在项目中用到了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