ECharts折線圖（一）

時間 2019-12-01

標籤 echarts 折線简体版

原文原文鏈接

一、工程目錄html

二、引入插件angular-1.6.九、echarts-2.2.7數組

三、js編輯app

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);

}); echarts

四、html編輯ui

<!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>

<script src="../static/js/angular-1.6.9/angular.js"></script>

<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>xml

五、效果圖htm

相關文章

相關標籤/搜索

折線圖的繪製

echarts地圖製做

Docker命令大全

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<