重叠竖状柱图echarts rgba(255,255,255,.5)' } }, "splitLine": { "show": false }, "axisTick": { "show": false }, "splitArea": { "show": false }, "axisLabel": { "interval": 0, color: 'rgba(255,255,255,0.7)配置项内容和展示

自定义legend的重叠竖状柱图

      option = {
    backgroundColor: "#344b58",
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'none' // 默认为直线，可选为：'line' | 'shadow'
            // show: false
        },
        textStyle: {
            color: "#D7E3FF"
        },
        backgroundColor: "#0F1225",
        padding: [10, 18, 20, 12],
        formatter: function(obj) {
            var str = '';
            str = '<div style="font-size: 12px;"><p style="color:#8DA2D3;lineHeight:18px;height:18px;">' + obj[0].name + '</p>';
            obj.map(item => {
                let subStr = "<div style='lineHeight:22px;height:24px;'><div style='display:inline-block;width:5px;height:5px;margin-right:6px;background:" + item.color + ";border-radius:50%;margin-bottom:2px;'></div>" + item.seriesName + "：" + item.value + "</div>";
                str += subStr;
            });
            str += "</div>";
            return str;
        },
    },
    legend: {
        data: ['小桥', '中桥', '大桥', '特大桥'],
        icon: "rect",
        itemGap: 24,
        itemWidth: 10,
        itemHeight: 10,
        right: '10%',
        orient: "horizontal",
        textStyle: {
            color: "rgba(255,255,255,0.7)",
            fontSize: 14,
            padding: [0, 0, 0, 3],
            fontFamily: "SourceHanSansCN-Regular"
            // lineHeight: 30
        }
    },
    "grid": {
        "borderWidth": 0,
        "top": '20%',
        "bottom": '10%',
        left: '15%',
        right: 0,
        textStyle: {
            color: "#fff"
        }
    },
    "calculable": true,
    "xAxis": [{
        "type": "category",
        "axisLine": {
            lineStyle: {
                color: 'rgba(255,255,255,.5)'
            }
        },
        "splitLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "splitArea": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,
            color: 'rgba(255,255,255,0.7)',
            fontSize: 18
        },
        "data": ['1950', '60', '70', '80', '90', '2000', '10', '20'],
    }],
    "yAxis": [{
        "type": "value",
        "splitLine": {
            "show": false
        },
        "axisLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,
            color: 'rgba(255,255,255,0.5)',
            fontSize: 20

        },
        "splitArea": {
            "show": false
        },

    }],
    color: ['#32accf', "#f1ae58", "#f37f40", "#3edea4"].reverse(),
    "series": [{
            "name": "小桥",
            "type": "bar",
            "stack": "总量",
            "barMaxWidth": 20,
            "barGap": "10%",
            "data": [
                709,
                1917,
                2455,
                2610,
                1719,
                1433,
                1917,
                2455,
            ],
        },
        {
            "name": "中桥",
            "type": "bar",
            "stack": "总量",
            "data": [
                327,
                224,
                507,
                624,
                800,
                482,
                224,
                507,
                624,
            ]
        },
        {
            "name": "大桥",
            "type": "bar",
            "stack": "总量",
            "data": [
                444,
                257,
                567,
                423,
                646,
                368,
                444,
                257,
                567,
            ]
        },
        {
            "name": "特大桥",
            "type": "bar",
            "stack": "总量",
            "data": [
                327,
                621,
                234,
                251,
                23,
                482,
                251,
                23,
                482,
            ]
        },
    ]
}