Preface:
echarts is a report plug-in produced by Baidu. It is very rich in chart display and widely used in our development. However, the official examples are very simple. Fortunately, their api documents provide a lot of configuration items, which provides the possibility for us to draw a richer chart.
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.

Today's focus: bar chart.
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="bar" style="width: 600px;height: 325px;">
</div>

3. Define the method of drawing line chart, and configure the chart parameters

/**
 * Drawing histogram
 * @param container container
 * @param xData x Shaft data
 * @param seriesData Chart data
 */
function drawBar(container, xData, seriesData) {
    var myCharts = echarts.init(document.getElementById(container));
    myOption = {
        //Prompt box component
        tooltip : {
            //Type of prompt information triggered when mouse hovers over a column
            trigger : 'item',
            position : 'top',
            formatter : '{c}'
        },
        //Figure position
        grid : {
            left : '4%',
            right : '4%',
            bottom : '4%',
            top : 30,
            //Drawing position scale label with axis
            //If the coordinate axis is not included when the drawing position is adjusted, the coordinate axis information will not be displayed completely
            containLabel : true
        },
        xAxis : [ {
            type : 'category',
            //x axis style
            axisLine : {
                show : true,
                lineStyle : {
                    color : 'rgba(255,255,255,0.2)',
                    //The x axis wants to be set as axis hidden, and the width is set as 0
                    width : 1,
                    type : 'dashed'
                }
            },
            //x-axis font style
            axisLabel : {
                show : true,
                fontSize : 12,
                color : 'white',
                //Display all x-axis coordinates
                interval : 0
            },
            data : xData
        } ],
        yAxis : [ {
            type : 'value',
            //y-axis font style
            axisLabel : {
                show : true,
                color : 'white',
                fontSize : 12
            },
            //y axis style
            axisLine : {
                show : false
            },
            //Set lines parallel to the x axis (split lines) not to display
            splitLine : {
                show : false,
                lineStyle : {
                    //If it is displayed, set the width of the split line. If it is set to 0, the split line will not be displayed
                    width : 1
                }
            }
        } ],
        series : [ {
            type : 'bar',
            //Column width
            barWidth : '20',
            //Column spacing
            barGap : '20',
            itemStyle : {
                color : {
                    type : 'linear',
                    x : 0,
                    y : 0,
                    x2 : 0,
                    y2 : 1,
                    colorStops : [ {
                        offset : 0,
                        color : '#6ae6dd '/ / color at 0%
                    }, {
                        offset : 1,
                        color : '#3b8ce4 '/ / color at 100%
                    } ]
                },
                barBorderRadius : [ 30, 30, 0, 0 ],
            },
            //The style of a column when it is suspended or jumped to a certain column
            emphasis : {
                itemStyle : {
                    color : {
                        type : 'linear',
                        x : 0,
                        y : 0,
                        x2 : 0,
                        y2 : 1,
                        colorStops : [ {
                            offset : 0,
                            color : 'rgba(254,136,94,1)' // Color at 0%
                        }, {
                            offset : 1,
                            color : 'rgba(251,46,73,1)' // Color at 100%
                        } ]
                    }
                }
            },
            data : seriesData
        } ]
    };
    myCharts.setOption(myOption);

    var app = {};
    app.currentIndex = -1;
    var myTimer = setInterval(
        function() {
            var dataLen = myOption.series[0].data.length;
            if ((app.currentIndex < dataLen - 1)
                    && myOption.series[0].data[app.currentIndex + 1].value == 0) {
                myCharts.dispatchAction({
                    type : 'downplay',
                    seriesIndex : 0,
                    dataIndex : app.currentIndex
                });
                app.currentIndex = (app.currentIndex + 1) % dataLen;
            } else {
                // Cancel previously highlighted shapes
                myCharts.dispatchAction({
                    type : 'downplay',
                    seriesIndex : 0,
                    dataIndex : app.currentIndex
                });
                app.currentIndex = (app.currentIndex + 1) % dataLen;
                // Highlight the current shape
                myCharts.dispatchAction({
                    type : 'highlight',
                    seriesIndex : 0,
                    dataIndex : app.currentIndex
                });
                // Show tooltip
                myCharts.dispatchAction({
                    type : 'showTip',
                    seriesIndex : 0,
                    dataIndex : app.currentIndex
                });
            }
        }, 3000);
}

4. Call methods and pass parameters

var xData = ['Coastal', 'Rural', 'Historical culture', 'theme park', 'Natural landscape', 'red tourism', 'Industrial Tourism', 'Parent-child travel', 'Leisure vacation', 'Other'];
var seriesData = [ {
    value : 56
}, {
    value : 156
}, {
    value : 256
}, {
    value : 86
}, {
    value : 96
}, {
    value : 36
}, {
    value : 126
}, {
    value : 176
}, {
    value : 261
}, {
    value : 121
} ];
drawBar('bar', xData, seriesData);

5. key points

• In the definition method, some styles and data that need to be displayed dynamically are defined as parameters of the method. Different parameters can be transferred according to different display requirements. Other styles have been written as fixed styles according to page styles.
• The fixed style is only a part of the api. If you want to show more rich and dynamic graphs, you can refer to the official api. The configuration method is the same.

6. upper figure

Histogram.png