简单的可视化图表——“柱状图”

ECharts柱状图

基础模板参考：https://echarts.apache.org/handbook/zh/get-started/

例图：

下附简单代码：

let option = {
        // 1.鼠标移入
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        title: {
            text: '标题',
            left: '10',
            top: '10',
        },
        // 2.顶部
        legend: {},
        // 3.padding
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        // 4.x轴
        xAxis: [
            {
                type: 'category',
                data: ['demo1', 'demo2', 'demo3', 'demo4', 'demo5']
            }
        ],
        // 5.y轴
        yAxis: [
            {
                type: 'value'
            }
        ],
        // 颜色
        color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
                offset: 0,
                color: 'blueviolet'
            },
            {
                offset: 1,
                color: '#fff'
            }
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
                offset: 0,
                color: '#4ba0ee'
            },
            {
                offset: 1,
                color: '#d6e9fb'
            }
        ])],
        // 6.内容
        series: [
            {
                name: 'A',
                type: 'bar',
                // 鼠标移入自己高亮，其他变淡（焦点）
                emphasis: {
                    focus: 'series'
                },
                data: [320, 332, 301, 334, 390, 330, 320],

            },
            {
                name: 'B',
                type: 'bar',
                // 相同堆叠 
                // stack: 'Ad',
                emphasis: {
                    focus: 'series'
                },
                data: [220, 132, 101, 134, 90, 230, 210],
            },

        ]
    };