Preface
Before that, I've shared with you how to use echarts to draw line graphs, double line graphs and histogram. Today, I'd like to share with you how to use echarts to draw multi-dimensional histogram.
Pits encountered with echarts:
- Be sure to add width and height to the chart container.
- The chart can be adjusted in the container to make the chart display more complete.
1. Introduce relevant 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. Determine the container
<div id="manyBar" style="width: 600px;height: 325px;"> </div>
3. Define the method of drawing multidimensional histogram, and configure the chart parameters
/** * Draw multidimensional histogram * @param container container * @param titleName Title Title * @param legendData Menu list * @param xData x Shaft data * @param seriesDatas Multidimensional chart data */ function drawManyBar(container, titleName, legendData, xData, seriesDatas) { var ticket = echarts.init(document.getElementById(container)); ticketOption = { //Title Style title : { text : titleName, textStyle : { color : 'white', }, left : 'left' }, //prompt box tooltip : { trigger : 'axis', backgroundColor : 'gray', axisPointer : { type : 'shadow' }, //Prompt information format, support html style formatter : function(params) { var res = '<div style="color:#00C7FF">'; res += '<strong>' + params[0].name + '(Ten thousand yuan)</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; } }, //menu legend : { //Menu font style textStyle : { color : 'white' }, //Menu location x : 'right', //Menu data data : legendData }, xAxis : [ { type : 'category', axisLine : { show : true, //x axis style lineStyle : { color : '#17273B', width : 1, type : 'solid', } }, //x-axis font settings axisLabel : { show : true, fontSize : 12, color : 'white' }, data : xData } ], yAxis : [ { type : 'value', //y-axis font setting axisLabel : { show : true, color : 'white', fontSize : 12, formatter : function(value) { return value + 'ten thousand'; } }, //y axis setting does not display axisLine : { show : false }, //Line style parallel to x axis splitLine : { show : true, lineStyle : { color : '#17273B', width : 1, type : 'dashd', } } } ], series : [ { name : '5A', type : 'bar', //Column width barWidth : 8, //Histogram style 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. Call methods and pass parameters
var titleName = 'Trend of scenic spot ticket revenue'; var legendData = [ '5A', '4A', '3A', '2A', 'A' ]; var xData = [ 'First quarter', 'The two quarter', 'The three quarter', 'Fourth quarter' ]; 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. Key points and methods
- The difference between multi-dimensional histogram and single histogram is that multiple sets of data are used.
- The prompt box component can customize the display format according to the needs. In toolip, add formatter to support html style.
- The y-axis can be set with different units according to the needs, such as 10000, K, ML, C ° and so on. Just add formatter to the y-axis, which I use here is 10000.
- A line parallel to the x axis. If it is set to true, but width is set to 0, the line will not be displayed. If it is set to false, the line will not be affected by the width value.
6. upper figure
Multidimensional histogram.png 
Histogram suspension.png