1、工程目录
2、引入插件angular-1.6.9、echarts-2.2.7
3、js编辑
var app = angular.module('app', []);
app.controller('lineCtrl', function($scope) { $scope.legend = ['QUANTITY','AVG']; $scope.item = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']; $scope.quantity = [29, 21, 19, 32, 26, 24, 25, 16, 17, 14, 9, 3]; $scope.avg = []; var total = 0; for(var i=0;i<$scope.quantity.length;i++){ total += $scope.quantity[i]; } var v = total/$scope.item.length; for(var i=0;i<$scope.quantity.length;i++){ $scope.avg.push(v); } $scope.data = [ $scope.quantity, //QUANTITY $scope.avg //AVG ]; var myChart = echarts.init(document.getElementById('line-wrap')); var option = { // 提示框，鼠标悬浮交互时的信息提示 tooltip: { show: true, trigger: 'item' }, // 图例 legend: { data: $scope.legend }, toolbox: { feature: { saveAsImage: {} } }, // 横轴坐标轴 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', symbol:'', //折点样式 data: $scope.data[i] }; if($scope.legend[i]=='AVG') { item.symbol = 'none'; } serie.push(item); } return serie; }() }; myChart.setOption(option); });4、html编辑
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>折线图</title> <!--加载AngularJS--> <script src="../static/js/angular-1.6.9/angular.js"></script> <!--加载ECharts--> <script src="../static/js/echarts-2.2.7/build/dist/echarts-all.js"></script> <script src="../static/app/lineChartModule.js"></script> </head><body ng-app="app" ng-controller="lineCtrl">
<div id="line-wrap" style="height: 500px;" /><!-- 图形加载区 --> </body> </html>5、效果图
