前言
在此之前, 已经跟大家分享了如何使用 echarts 画折线图, 双折线图, 柱状图, 今天跟大家分享一下使用 echarts 画多维柱状图.
使用 echarts 遇到过的坑:
一定要给图表容器添加宽度与高度.
图表在容器中可以调整位置, 让图表显示的更完整.
1. 引入相关 JS
- <script type="text/javascript" src="../js/jquery-2.1.1.js">
- </script>
- <script type="text/javascript" src="../echarts-4.2.0/echarts.min.js">
- </script>
2. 确定容器
- <div id="manyBar" style="width: 600px;height: 325px;">
- </div>
3. 定义画多维柱状图是方法, 配置图表参数
- /**
- * 画多维柱状图
- * @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);
- }
4. 调用方法, 传递参数
- 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);
5. 划重点, 方法说明
多维柱状图与单柱状图的区别在于, 使用了多组数据.
提示框组件, 可以根据需求自定义显示格式, 在 tooltip 里面, 加入 formatter, 支持 HTML 样式.
y 轴是可以根据需要设置不同的单位的, 比如万, K, 毫升, C° 等等, 只需要在 yAxis 里面加入 formatter, 我这里使用的就是万.
与 x 轴平行的线, 如果设置为 true, 但是 width 设置为 0, 该线是不显示的, 设置为 false 则不受 width 值影响.
6. 上图
多维柱状图. PNG
柱状图悬浮. PNG
来源: http://www.jianshu.com/p/961130cece9d