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模擬動態數據
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<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>