echarts做双柱图

1、先看效果:

 2、思路:

  是横向柱图沿着Y轴方向有正负数据的效果,所以做出图的关键在于组合series;

3、上option:

option = {
    title: {
        "text": `201808`,
                "left": "center",
                "top": "5%",
                "textStyle": {
                    "color": "#333333",
                    "fontFamily": "PingFangSC-Medium",
                    "fontSize": 14,
                    "lineHeight": 16,
                    "rich": {
                            "a": {
                                "color": '#bebebe',
                                "fontSize": 12,
                            },
                        }
                }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器,坐标轴触发有效
            type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        }
    },
    grid: {
        top: 80,
        bottom: 30
    },
    xAxis: {
        type: 'value',
        position: 'top',
        axisLine: {show: false},
        axisLabel: {show: false},
        axisTick: {show: false},
        splitLine: {show: false},
    },
    yAxis: {
        type: 'category',
        axisLine: {show: false},
        axisLabel: {show: false},
        axisTick: {show: false},
        splitLine: {show: false},
        data: ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one']
    },
    series: [
        {
            "name": "202008",
            "type": "bar",
            "stack": "202008人数",
            "color": "#FF7D00", 
            "label": {
                "show": true,
                "position": [
                    "0%",
                    "30%"
                ],
                "color": "#000",
                "formatter": "233(22%)"
            },
            "data": [
                26,
                141,
                75,
                282,
                37,
                26,
                141,
                75,
                282,
                37,
            ]
        },
        {
            "name": "202008legend",
            "type": "bar",
            "stack": "202008人数",
            "color": "#FF7D00",
            "label": {
                "show": false
            },
            "data": [
                -26,
                -141,
                -75,
                -282,
                -37,
                -26,
                -141,
                -75,
                -282,
                -37,
            ]
        }
    ]
};
原文地址:https://www.cnblogs.com/art-poet/p/13628261.html