AngularJS使用Echarts
在项目中用到了AngularJS结合Echarts，不能直接使用Echarts，需用directive指令来操作，记录一下。
代码如下：
angular.module('test')
.directive('line', function() {
return {
scope: {
id: "@",
legend: "=",
item: "=",
data: "="
},
restrict: 'E',
template: '',
replace: true,
link: function($scope, element, attrs, controller) {
myChart = echarts.init(document.getElementById($scope.id),'macarons');
var option = {
// 提示框，鼠标悬浮交互时的信息提示
tooltip: {
show: true,
trigger: 'item'
},
// 图例
legend: {
data: []
},
// 横轴坐标轴
xAxis: [{
type: 'category',
data: [],
boundaryGap : false
}],
dataZoom: [{ // 这个dataZoom组件，默认控制x轴。
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start: 40, // 左边在 40% 的位置。
end: 100 // 右边在 100% 的位置。
},
{ // 这个dataZoom组件，也控制x轴。
type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
start: 40, // 左边在 40% 的位置。
end: 100 // 右边在 100% 的位置。
}],
// 纵轴坐标轴
yAxis: [{
type: 'value'
}],
// 数据内容数组
series: function(){
var serie=[];
return serie;
}()
};
myChart.setOption(option);
$scope.$watch('data',function(newValue, oldValue, scope){
if(newValue.length == 0){
myChart.clear();
var option = {
// 提示框，鼠标悬浮交互时的信息提示
tooltip: {
show: true,
trigger: 'item'
},
// 图例
legend: {
data: []
},
// 横轴坐标轴
xAxis: [{
type: 'category',
data: [],
boundaryGap : false
}],
dataZoom: [{ // 这个dataZoom组件，默认控制x轴。
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start: 40, // 左边在 40% 的位置。
end: 100 // 右边在 100% 的位置。
},
{ // 这个dataZoom组件，也控制x轴。
type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
start: 40, // 左边在 40% 的位置。
end: 100 // 右边在 100% 的位置。
}],
// 纵轴坐标轴
yAxis: [{
type: 'value'
}],
// 数据内容数组
series: function(){
var serie=[];
return serie;
}()
};
myChart.setOption(option);
}
var option = {
// 提示框，鼠标悬浮交互时的信息提示
tooltip: {
show: true,
trigger: 'item'
},
// 图例
legend: {
orient: 'horizontal', // 布局方式，默认为水平布局，可选为：'horizontal' ¦ 'vertical'
x: 'center', // 水平安放位置，默认为全图居中，可选为：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 图例边框颜色
borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
padding: 30, // 图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 20, // 图例图形宽度
itemHeight: 14, // 图例图形高度
textStyle: {
color: '#333' // 图例文字颜色
},
data: $scope.legend
},
// 横轴坐标轴
xAxis: [{
type: 'category',
data: $scope.item,
boundaryGap : false
}],
// 纵轴坐标轴
yAxis: [{
type: 'value'
}],
// 数据内容数组
series: function(){
var serie=[];
for(var i=0;i<$scope.legend.length;i++){
var item = {
name : $scope.legend[i],
type: 'line',
data: $scope.data[i]
};
serie.push(item);
}
return serie;
}()
};
myChart.setOption(option);
}, true);
}
};
});
注意事项：
1.
scope: {
id: "@",
legend: "=",
item: "=",
data: "="
},@绑定：在子作用域重置属性内容前：父作用域的属性内容修改会使子作用域对应的属性内容也随之修改，子作用域属性内容变化不会影响到父作用域对应的属性内容。在子作用域重置属性内容后：子作用域仍然会根据父作用域变化而变化，但如果将scope属性设为true，则不会随之变化。
=绑定：创建一个父与子作用域可以同时共享的属性，完全共享和同步。
2.
$scope.$watch('data',function(newValue, oldValue, scope){},true)$watch(watchFn,watchAction,deepWatch)
watchFn:angular表达式或函数的字符串
watchAction(newValue,oldValue,scope):watchFn发生变化会被调用
deepWatch：可选的布尔值命令检查被监控的对象的每个属性是否发生变化，当为true时，若监控对象是数组，只要某位发生改变，就会调用到，否则无法监听到变化。
3.
myChart.setOption(option，true);true的作用就是，清空Echarts的数据缓存，避免第二次加入数据的时候，会有一瞬间是错乱的。因为在别的地方做了处理，所以这里没有加true。
html使用：
<line id="charts" legend="legend" item="item" data="data">line> 参考： AngularJS自定义Echarts标签 — 折线图Line