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

来源：互联网发布：淘宝网上哪家金鱼好编辑：程序博客网时间：2024/06/14 16:20

很多时候数据都要用图表的形式来展示，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);}};});

效果图如下：

代码：下载

4 0