您的位置：首页 > Web前端 > AngularJS

AngularJS自定义Echarts标签 — 折线图Line

2015-08-21 11:56 796 查看

很多时候数据都要用图表的形式来展示，Echarts就是一款开源、功能强大的图表工具，但有些图表只是数据不同，不可能每一个图都单独画一个，所以我就考虑能不能把它封装起来？这使我瞄准了刚接触的AngularJS自定义指令directive，把两者结合一下，就有了一个简单可复用的图表标签了。

这些代码提供出来，大家可以拿来就用，在这里我不会解释的很详细，都是基于有AngualrJS基础和htm基础的，但由于笔者功力不足，大家如果有什么不明白或错误的地方可以回复留言，多多交流交流。

1、准备文件

AngularJS的js文件：angular.js

Echarts的js文件：echarts-all.js

2、html页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>折线图</title>
</head>
<!--加载AngularJS-->
<script src="js/angular/angular.js"></script>
<!--加载ECharts-->
<script src="js/echarts-2.2.7/build/dist/echarts-all.js"></script>
<script src="js/line.js"></script>

<body ng-app="app" ng-controller="lineCtrl">
<line id="main" legend="legend" item="item" data="data"></line>
</body>
</html>

3、line.js的编码

var app = angular.module('app', []);

app.controller('lineCtrl', function($scope) {
$scope.legend = ["Berlin", "London",'New York','Tokyo'];
$scope.item = ['Jan', 'Feb', 'Mar', 'Apr', 'Mar', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$scope.data = [
[-1, 1, 3, 7, 13, 16, 18, 16, 15, 9, 4, 2],	//Berlin
[0, 1, 4, 7, 12, 15, 16, 15, 15, 10, 6, 5],	//London
[4, 4, 5, 10, 16, 22, 25, 24, 20, 14, 9, 3],	//New York
[7, 6, 8, 14, 17, 22, 25, 27, 24, 17, 14, 10]	//Tokyo
];
});

app.directive('line', function() {
return {
scope: {
id: "@",
legend: "=",
item: "=",
data: "="
},
restrict: 'E',
template: '<div style="height:400px;"></div>',
replace: true,
link: function($scope, element, attrs, controller) {
var option = {
// 提示框，鼠标悬浮交互时的信息提示
tooltip: {
show: true,
trigger: 'item'
},
// 图例
legend: {
data: $scope.legend
},
// 横轴坐标轴
xAxis: [{
type: 'category',
data: $scope.item
}],
// 纵轴坐标轴
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;
}()
};
var myChart = echarts.init(document.getElementById($scope.id),'macarons');
myChart.setOption(option);
}
};
});

效果图如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航