标签：结合 new 技术分享 temp art lap app script ret
原理：
利用angularjs中的指令（directive）将echarts封装。
步骤：
1.封装函数：
app.directive(‘line‘, function() { return { scope: { id: "@", legend: "=", item: "=", data: "=" }, restrict: ‘E‘, template: ‘<div style="height:400px;width:100px;"></div>‘, replace: true, link: function($scope, element, attrs, controller) { var option = { ······ }; var myChart = echarts.init(document.getElementById("main")); myChart.setOption(option); } }; });
2.创建块用来放置图表
<line id="main" legend="legend" item="item" data="data"></line>
指令（directive）的作用就是自定义元素。所以创建<line></line>
3.控制器获得数据
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 ]; });
4.将echarts中得到的option配置放入函数中，并把数据调用进配置。
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; }() };
完整测试代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>折线图</title> </head> <!--加载AngularJS--> <script src="../producers/angular/angular.min.js"></script> <!--加载ECharts--> <script src="../producers/echars/echarts.js"></script> <body ng-app="app" ng-controller="lineCtrl"> <line id="main" legend="legend" item="item" data="data"></line> <script type="text/javascript"> 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;width:100px;"></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("main")); myChart.setOption(option); } }; }); </script> </body> </html>
标签：结合 new 技术分享 temp art lap app script ret
原文地址：http://www.cnblogs.com/s313139232/p/7519693.html
