Echarts + Angularjs
Angularjs指令使用Echarts
先决条件
您将需要在计算机上正确安装以下内容。
- Node.js（带有NPM）和Bower
破坏V1的变化
-
echart支持为v3.4.0； -
angular支撑为v1.6.2; - 地图图需要其他工作，请参见下文；
- 删除了Custome主题，所有这些主题都将其用于构建；
建筑
准备
bower install和npm install默认
gulp
使用实时监视器开发，自动打开浏览器以查看示例
- 构建
gulp build
构建文件
- 发布
gulp publish
Build＆Bump NPM版本
用法
安装Bower依赖并保存生产
$ bower install angular-echarts --save
注入Echarts和Angular-Acharts文件
<script src="path/to/bower_components/echarts/dist/echarts.js"></script>
<script src="path/to/bower_components/angular-echarts/dist/angular-echarts.min.js"></script>
下载并注入地图定义如果您需要地图图表：http：//echarts.baidu.com/download-map.html
添加依赖并声明演示控制器
var app = angular.module('demo', ['angular-echarts']);
app.controller('LineChartController', function ($scope) {
var pageload = {
name: 'page.load',
datapoints: [
{ x: 2001, y: 1012 },
{ x: 2002, y: 1023 },
{ x: 2003, y: 1045 },
{ x: 2004, y: 1062 },
{ x: 2005, y: 1032 },
{ x: 2006, y: 1040 },
{ x: 2007, y: 1023 },
{ x: 2008, y: 1090 },
{ x: 2009, y: 1012 },
{ x: 2010, y: 1012 },
]
};
var firstPaint = {
name: 'page.firstPaint',
datapoints: [
{ x: 2001, y: 22 },
{ x: 2002, y: 13 },
{ x: 2003, y: 35 },
{ x: 2004, y: 52 },
{ x: 2005, y: 32 },
{ x: 2006, y: 40 },
{ x: 2007, y: 63 },
{ x: 2008, y: 80 },
{ x: 2009, y: 20 },
{ x: 2010, y: 25 },
]
};
$scope.config = {
title: 'Line Chart',
subtitle: 'Line Chart Subtitle',
debug: true,
showXAxis: true,
showYAxis: true,
showLegend: true,
stack: false,
};
$scope.data = [ pageload ];
$scope.multiple = [pageload, firstPaint ];
});
使用此标记进行快速演示
<div class="col-md-3" ng-controller="LineChartController">
<line-chart config="config" data="data"></line-chart>
<line-chart config="config" data="multiple"></line-chart>
</div>
贡献
git clone git@github.com:wangshijun/angular-echarts.git- 更改为新目录
npm install-
bower install
跑步 /开发
- 浏览器中打开
docs/index.html
或者，您可以使用
gulp server并访问http://lo*c**alhost:8080在Chrome浏览器中，以避免XMLHttpRequest Cross origin requests错误。
下载源码
通过命令行克隆项目:
git clone https://github.com/wangshijun/angular-echarts.git