![](https://i-blog.csdnimg.cn/blog_migrate/884ca84ca3002bc5ddb0f79bc173afa7.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/611f0dc91e188790cc3dd0740a4a706f.gif)
<script type="text/javascript" src="../js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="../echarts4.2.0/echarts.min.js"></script>
![](https://i-blog.csdnimg.cn/blog_migrate/d9ed2717da2ef53e20023cd980aeaff5.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7aacfd5ff1b31d8a285a92d753aedd43.gif)
<div id="manyBar" style="width: 600px;height: 325px;">
</div>
注:js中字体用了白色。如果你的背景是白色的话,看不到文字
![](https://i-blog.csdnimg.cn/blog_migrate/916a78a3c232bc30a1344b5156841646.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/81f1b45d991596eaf870cd2ae6304c4a.gif)
/**
* 画多维柱状图
* @param container 容器
* @param titleName 标题名称
* @param legendData 菜单列表
* @param xData x轴数据
* @param seriesDatas 多维图表数据
*/
function drawManyBar(container, titleName, legendData, xData, seriesDatas) {
var ticket = echarts.init(document.getElementById(container));
ticketOption = {
//标题样式
title : {
text : titleName,
textStyle : {
color : 'white',
},
left : 'left'
},
//提示框
tooltip : {
trigger : 'axis',
backgroundColor : 'gray',
axisPointer : {
type : 'shadow'
},
//提示信息格式,支持html样式
formatter : function(params) {
var res = '<div style="color:#00C7FF">';
res += '<strong>' + params[0].name + '(万元)</strong>';
for ( var i = 0, l = params.length; i < l; i++) {
res += '<br/>' + ((i == 4) ? ' ' : '')
+ params[i].seriesName + ' : '
+ params[i].value;
}
res += '</div>';
return res;
}
},
//菜单
legend : {
//菜单字体样式
textStyle : {
color : 'white'
},
//菜单位置
x : 'right',
//菜单数据
data : legendData
},
xAxis : [ {
type : 'category',
axisLine : {
show : true,
//x轴线样式
lineStyle : {
color : '#17273B',
width : 1,
type : 'solid',
}
},
//x轴字体设置
axisLabel : {
show : true,
fontSize : 12,
color : 'white'
},
data : xData
} ],
yAxis : [ {
type : 'value',
//y轴字体设置
axisLabel : {
show : true,
color : 'white',
fontSize : 12,
formatter : function(value) {
return value + '万';
}
},
//y轴线设置不显示
axisLine : {
show : false
},
//与x轴平行的线样式
splitLine : {
show : true,
lineStyle : {
color : '#17273B',
width : 1,
type : 'dashd',
}
}
} ],
series : [ {
name : '5A',
type : 'bar',
//柱子宽度
barWidth : 8,
//柱状图样式
itemStyle : {
color : 'red',
barBorderRadius : [ 30, 30, 0, 0 ]
},
data : seriesDatas[0]
}, {
name : '4A',
type : 'bar',
barWidth : 8,
itemStyle : {
color : 'orange',
barBorderRadius : [ 30, 30, 0, 0 ]
},
data : seriesDatas[1]
}, {
name : '3A',
type : 'bar',
barWidth : 8,
itemStyle : {
color : 'yellow',
barBorderRadius : [ 30, 30, 0, 0 ]
},
data : seriesDatas[2]
}, {
name : '2A',
type : 'bar',
barWidth : 8,
itemStyle : {
color : 'green',
barBorderRadius : [ 30, 30, 0, 0 ]
},
data : seriesDatas[3]
}, {
name : 'A',
type : 'bar',
barWidth : 8,
itemStyle : {
color : 'blue',
barBorderRadius : [ 30, 30, 0, 0 ]
},
data : seriesDatas[4]
} ]
};
ticket.setOption(ticketOption);
}
![](https://i-blog.csdnimg.cn/blog_migrate/d1b0f8935d6601248dc9a084f8affb99.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/c0f792f27f7342ff76a1b2c33878bd98.gif)
var titleName = '景区门票收入走势';
var legendData = [ '5A', '4A', '3A', '2A', 'A' ];
var xData = [ '一季度', '二季度', '三季度', '四季度' ];
var seriesDatas = [[ 83, 56, 77, 99 ], [ 62, 55, 67, 82 ], [ 71, 45, 62, 79 ], [ 78, 40, 58, 77 ], [ 76, 33, 52, 67 ]];
drawManyBar('manyBar', titleName, legendData, xData, seriesDatas);
预览
摘自:
https://blog.csdn.net/kzhzhang/article/details/124674343