echarts directive
标签(空格分隔): echarts angularjs directive
文本为简单的echarts图指令,具体配置项可查看官方文档API进行配置。
一、柱状图指令
directive.js
/**
* ngEchartsLine
*/
'use strict';
angular.module("MetronicApp").directive('ngEchartsLine', function () {
return {
template: '<div style="height:400px"></div>',
restrict: 'E',
scope: {
id: "@",
item: "=",//数据源,每项的数值
data: "=",//x轴的提示文字,即统计的分类
text:"@",//主标题
subtext:"@"//附标题(灰)
},
replace: true,
link: function ($scope, $element, $attrs) {
var initOptions = function () {
var dataAxis = $scope.data;
var data = $scope.item;
var yMax = 1000;
var dataShadow = [];
for (var i = 0; i < data.length; i++) {
dataShadow.push(yMax);
}
return {
title: {
text: $scope.text,
subtext: $scope.subtext
},
tooltip: {
//提示框触发类型,默认('item')数据触发,可选为:'item' | 'axis'
trigger: 'item'
},
xAxis: {
data: dataAxis,
axisLabel: {
inside: false,
textStyle: {
color: '#999'
},
rotate: 40,//倾斜角度
interval :0
},
axisTick: {
show: false
},
axisLine: {
show: false
},
z: 10
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#999'
}
}
},
dataZoom: [
{
type: 'inside'
}
],
series: [
{ // For shadow
type: 'bar',
itemStyle: {
normal: {color: 'rgba(0,0,0,0.05)'}
},
barGap:'-100%',
barCategoryGap:'40%',
data: dataShadow
},
{
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#83bff6'},
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#188df0'}
]
),
label: {
show: true,
position: 'top',
formatter: '{c}'
}
},
emphasis: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#2378f7'},
{offset: 0.7, color: '#2378f7'},
{offset: 1, color: '#83bff6'}
]
)
}
},
data: data
}
]
};
};
var myChart = echarts.init(document.getElementById($scope.id));
myChart.setOption(initOptions());
//动态监听数据的变化
$scope.$watch('data', function (newVal, oldVal) {
if(angular.equals(newVal,oldVal)){
return;
}
myChart.setOption(initOptions());
},true);
$scope.$watch('item', function (newVal, oldVal) {
if(angular.equals(newVal,oldVal)){
return;
}
myChart.setOption(initOptions());
},true);
}
};
});
html:
<ng-echarts-line
id="xxxid"
item="xxxx"
data="xxxx"
text="柱状图示例"
subtext="Zoom">
</ng-echarts-line>
二、饼图指令
directive.js
/**
* ngEchartsPie
*/
'use strict';
angular.module("MetronicApp").directive('ngEchartsPie', function () {
return {
template:"<div style='height: 400px'></div>",
restrict: 'E',
scope: {
id: "@",
data: "=",//数据源
text:"@",//主标题
subtext:"@",//附标题(灰)
name:"@"//提示框title
},
replace: true,
link: function ($scope, $element, $attrs) {
var initOptions =function() {
$scope.nameList = [];//颜色区划提示文字列表
for (var index in $scope.data) {
$scope.nameList.push($scope.data[index].name);
}
return {
title : {
text: $scope.text,
subtext: $scope.subtext,
x:'left'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'right',
data: $scope.nameList//颜色区划方块
},
series : [
{
name: $scope.name,
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:$scope.data,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
};
var myChart = echarts.init(document.getElementById($scope.id));
myChart.setOption(initOptions());
//动态监听数据的变化
$scope.$watch('data', function (newVal, oldVal) {
if (angular.equals(newVal,oldVal)) {
return;
}
myChart.setOption(initOptions());
},true);
}
};
});
html
<ng-echarts-pie
id="xxxxid"
data="xxxx"
text="饼状图示例"
subtext="Pie"
name="所占比重">
</ng-echarts-pie>
本文图片均来自网络
如有错误多多指正