#ngECharts
Baidu ECharts(http://echarts.baidu.com) 的AngularJS封装包。
- 本插件受https://github.com/violet-day/angular-echarts 启发,本着学习AngularJS而写;
- 封装了echarts的showLoading, hideLoading, connect和添加自定义地图的方法;
- https://github.com/wangshijun/angular-echarts
- https://github.com/violet-day/angular-echarts
- https://github.com/zuiyuexuan/angularjs-requirejs-echarts
- https://github.com/xuhuan/angular-echarts
- https://github.com/liekkas/ng-echarts
http://goldymark.github.io/ngECharts/
Apache License 2.0
- Angularjs (开发时使用1.2.16版本,没有做兼容性测试,其他版本应该没问题);
- Baidu ECharts;
引入ngECharts的js文件:
JS:
<script src="lib/angular.min.js"></script>
<script src="lib/echarts-all.js"></script>
<script src="dist/ngECharts.min.js"></script>
1、 加载ngECharts模块: JS:
angular.module('myApp', ['ngECharts'])
2、 使用echarts指令: HTML:
<echarts id="chart1" option="option" width="1000px" height="400px"></echarts>
3、 Controller代码: JS:
angular.module('myApp', ['ngECharts'])
.controller('myCtrl', ['$scope','ec', function($scope,ec){
$scope.option = ...
}]);
说明:ECharts的图表选项,详情;
angular.module('myApp', ['ngECharts'])
.controller('myCtrl', ['$scope','$timeout', 'ec', function($scope,$timeout,ec){
$timeout(function(){
ec.showLoading('chart1');
ec.connect(['chart2','chart3']);
});
$timeout(function(){
ec.hideLoading('chart1');
},1000);
ec.addMap("FS","data/fs.json");
}]);
var chart1 = ec.getInstance('chart1');
var option1 = ec.getOption('chart1');
ec.clear();
说明:过渡控制,显示Loading(读取中),详情;
[可选][类型:array of string] effects : loading效果,可选为:'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble',支持外部装载;默认随机显示,没有ring效果(不好看);
$timeout(function(){
// chart1显示Loading
ec.showLoading('chart1','拼命加载中……',['spin','whirling','bar']);
// chart2,chart3都显示Loading
ec.showLoading(['chart2','chart3'],'拼命加载中……',['spin','whirling','bar','bubble']);
});
$timeout(function(){
ec.hideLoading(['chart1','chart2','chart3']);
},2500);
说明:多图联动,传入echarts对应的id,支持可变参数和数组,详情;
$timeout(function(){
// 写法1
ec.connect('chart1','chart2');
// 写法2
ec.connect(['chart1','chart2']);
});
说明:扩展使用自定义地图,详情;
$timeout(function(){
ec.addMap("FS","data/fs.json");
});