前言：angular中快速使用echarts
在html使用ehart很简单，你只需要引入文件和按照官方例子按照对应参数配置和数据填充就Ok了，那么在angular中怎么使用eharts(可以使用echarts3)，你只需要去看个官方提供的demo，大致知道图形通过做哪些事构建出来的就行。
步骤：
1.知道大致流程，这里你可以官网直接去gitup地址，上面有angular echarts的使用方法的介绍，我三个都看了觉得最三个最容易看懂且代码也比较少，克隆下来看里面代码很快就明白了。
2.引入文件到项目中
1）你可以使用npm i ng-echarts --save-dev，然后在task任务中打包，相应地方require引入。
2）通过下载js文件外部引入(博主一般将插件都外部引入放在lib目录中)
你在gitup克隆下来的demo中js文件复制到lib的echarts下，macarons.js是一个主题文件，你需要在官网中的主题文件下载中下载你对应的主题。
3.在gulp任务中将引入的文件打包
gulp.task('build-lib-js', ['build-clean-third-lib-js'], function () {
var thirdLibJs = gulp.src([//外部引用js
'./lib/bootstrap/js/bootstrap.min.js',
'./lib/echarts/echarts.min.js',
'./lib/echarts/macarons.js',
])
.pipe(concat('lib.min.js', {newLine: '\r\n'}))
.pipe(gulp.dest('js'));
return merge.apply(null, thirdLibJs);
});
4.使用方法
1).html模块
ec-option:echarts中的option
ec-config:其他参数的配置项 * theme：图表主题名称, * event：绑定事件 * dataLoaded：数据是否加载（用于Loading）
<ng-echarts class="col-md-6 echarts" ec-config="lineConfig" ec-option="lineOption"></ng-echarts>
2)自定义组件模块
angular.module('ng-echarts',[])
.directive('ngEcharts',[function(){
return {
link: function(scope,element,attrs,ctrl){
function refreshChart(){
var theme = (scope.config && scope.config.theme)
? scope.config.theme : 'default';
var chart = echarts.init(element[0],theme);
if(scope.config && scope.config.dataLoaded === false){
chart.showLoading();
}
if(scope.config && scope.config.dataLoaded){
chart.setOption(scope.option);
chart.resize();
chart.hideLoading();
}
if(scope.config && scope.config.event){
if(angular.isArray(scope.config.event)){
angular.forEach(scope.config.event,function(value,key){
for(var e in value){
chart.on(e,value[e]);
}
});
}
}
};
//自定义参数 - config
// event 定义事件
// theme 主题名称
// dataLoaded 数据是否加载
scope.$watch(
function () { return scope.config; },
function (value) {if (value) {refreshChart();}},
true
);
//图表原生option
scope.$watch(
function () { return scope.option; },
function (value) {if (value) {refreshChart();}},
true
);
},
scope:{
option:'=ecOption',
config:'=ecConfig'
},
restrict:'EA'
}
}]);
3）controller模块（配置参数和加载数据）
你可以根据官方例子将数据更改为接口获取，将配置项根据需要修改参数，参数具体参考
.controller('Ctrl1',function($scope,$interval,$timeout){
function onClick(params){
console.log(params);
};
$scope.lineConfig = {
theme:'default',//主题
event: [{click:onClick}],//触发事件
dataLoaded:true//数据是否加载
};
$scope.lineOption = {
title : {//标题
text: '未来一周气温变化(5秒后自动轮询)',
subtext: '纯属虚构'
},
tooltip : {//提示框 坐标轴触发
trigger: 'axis'
},
legend: {//图例组件
data:['最高气温','最低气温']
},
toolbox: {//工具箱
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},//数据视图(可更改为自己的样式)
magicType : {show: true, type: ['line', 'bar']},//视图切换
restore : {show: true},//还原
saveAsImage : {show: true}//存为图片
}
},
calculable : true,
xAxis : [//x轴
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [//y轴
{
type : 'value',
axisLabel : {
formatter: '{value} °C'
}
}
],
series : [//数据
{
name:'最高气温',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'最低气温',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
markPoint : {
data : [
{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
})
-----原创文章，©版权所有，转载请注明标明出处：http://www.cnblogs.com/doinbean