Using echarts to draw multidimensional histogram

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) ? '&nbsp;&nbsp;' : '')
                            + 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

Tags: Javascript JQuery

Posted on Tue, 03 Dec 2019 04:08:36 -0500 by JamesWebster