Echarts柱形圖（三）

時間 2019-12-01

標籤 echarts 柱形圖简体版

原文原文鏈接

一、工程目錄html

二、js引用數組

三、js編輯app

var app = angular.module('app', []);
app.controller('barCtrl', function($scope) {
$scope.legend = ['ONE','TWO','THREE','FOUR'];
$scope.item = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
   $scope.one = [29, 21, 19, 32, 21, 24, 9, 16, 52, 14, 29, 1];
   $scope.two = [21, 11, 1, 10, 24, 31, 37, 34, 17, 11, 9, 13];
   $scope.three = [25, 12, 78, 15, 17, 8, 40, 21, 17, 21, 17, 22];
   $scope.four = [28, 19, 44, 22, 11, 12, 25, 16, 41, 16, 26, 32];
$scope.data = [ $scope.one, $scope.two, $scope.three, $scope.four];

   var myChart = echarts.init(document.getElementById('bar-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: 'bar',
data: $scope.data[i]
};
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/barChartModule.js"></script>
</head>xml

<body ng-app="app" ng-controller="barCtrl">
<div id="bar-wrap" style="height: 500px;" />
</body>
</html>
htm

五、效果圖three

相關文章

相關標籤/搜索

每日一句

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

最新文章

本站公眾號

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

相關文章

>>更多相關文章<<