AngularJS使用Echarts
AngularJS使用Echarts
使用angular配置只要给ng对象绑定$scope里不同图表的option就行，html像这样：
<div e-chart ec-data="lineOption">div>
在controller中声明option,可以参考官网示例
$scope.lineOption = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
使用directive
app.directive('eChart', function($http, $window) {
function link($scope, element, attrs) {
//初始化图表
var myChart = echarts.init(element[0]);
//监控option数据变化
$scope.$watch(attrs['ecData'], function() {
var option = $scope.$eval(attrs.ecData);
if (angular.isObject(option)) {
//绘制图表
myChart.setOption(option);
}
}, true);
$scope.getDom = function() {
return {
'height': element[0].offsetHeight,
'width': element[0].offsetWidth
};
};
//监控图表宽高变化，响应式
$scope.$watch($scope.getDom, function() {
// resize echarts图表
myChart.resize();
}, true);
}
return {
//A 作为属性使用
restrict: 'A',
link: link
};
});
完整示例，通过JS模拟动态数据
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.js">script>
head>
<body ng-app="myApp" ng-controller="myCtrl">
<div e-chart ec-data="lineOption" style='width: 600px; height: 420px;'>div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $interval) {
$scope.lineOption = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value"
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line"
}
]
};
//创建定时器，每3秒刷新一次
var timer;
if (!angular.isDefined(timer)) {
timer = $interval(function() {
var array = [];
for (var i = 0; i < 7; i++) {
array.push(randomNum(200, 900));
}
$scope.lineOption.series[0].data = array;
},3000);
} else {
$interval.cancel(timer);
}
$scope.$on("$destory", function() {
$interval.cancel(timer);
});
});
app.directive("eChart", function($http, $window) {
function link($scope, element, attrs) {
//初始化图表
var myChart = echarts.init(element[0]);
//监控option数据变化
$scope.$watch(
attrs["ecData"],
function() {
var option = $scope.$eval(attrs.ecData);
if (angular.isObject(option)) {
//绘制图表
myChart.setOption(option);
}
},
true
);
$scope.getDom = function() {
return {
height: element[0].offsetHeight,
width: element[0].offsetWidth
};
};
//监控图表宽高变化，响应式
$scope.$watch(
$scope.getDom,
function() {
// resize echarts图表
myChart.resize();
},
true
);
}
return {
//A 作为属性使用
restrict: "A",
link: link
};
});
function randomNum(minNum, maxNum) {
return Math.random() * (maxNum - minNum + 1);
}
script>
body>
html>