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