Echarts在线免费图表

 
            let list2=[
    {
        name: "坝区",
        num: 40,
    },
    {
        name: "左岸陆区",
        num: 88,
    },
    {
        name: "左岸低下厂区",
        num: 60,
    },
    {
        name: "右岸陆区",
        num: 16,
    },
    {
        name: "左岸产区",
        num: 71,
    },
    {
        name: "其他区域一",
        num: 100,
    },
    {
        name: "其他区域二",
        num: 25,
    },
]

let  list = [
    {
        name: "核心区",
        num: 25,
        label: "25个"
    },
    {
        name: "控制区",
        num: 50,
        label: "50个"
    },
    {
        name: "限制区",
        num: 75,
        label: "75个"
    },
]
let barTopColor = ["#E7251A","#D6BF4B","#1FABDA","#7F35C5","#42C997","#93C65C","#9BB465"];
let barBottomColor = "#286BAA";

option = {
     backgroundColor: 'dark',
    title: {
        text: '各区域设备统计',
        top:20,
        left:0,
        textStyle: {
            color:'white',
            fontSize:14,
            fontWeight:'normal',
        }
    },
    grid:{
        top:'20%',
        bottom:'15%'
    },
    xAxis: {
        data:  list2.map(item => item.name),
        axisTick: {
            show: false
        },
        axisLine: {
            show: true,
            lineStyle:{
                color:'#545278'
            }
        },
        axisLabel: {
            show: true,
            margin: 15,
            fontSize: 12,
            color: '#ffffff',
            formatter: function(e){ // 2个字换行
                let re = ""
                const arrayLength = Math.floor((e.length / 2)) ;
                const range = [...Array(arrayLength).keys()].map(x => (x * 2));
                range.forEach(function(i){
                    re += e[i] + e[i+1] + "\n"
                }) 
                return re
            }
        },
        interval: 0
    },
    yAxis: {
        name: "单位：个",
        nameTextStyle: {
            color: "white",
            padding: [0,0,18,500],
            fontSize: 14,
        },
        splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
              type: "dashed"
            }
          },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
            lineStyle:{
                color:'#545278'
            }
        },
        axisLabel: {
            show: true,
            margin: 10,
            fontSize: 14,
            color: 'white',
        },
    },
    series: [{
        name: '柱顶部',
        type: 'pictorialBar',
        symbolSize: [18, 8],
        symbolOffset: [0, -5],
        itemStyle: {
                color: function(params) {
                    return barTopColor[params.dataIndex];
                }
        },
        label: {
            show: true,
            position: 'top',
            fontSize: 14,
            color: "white"
        },
        symbolPosition: 'end',
        data: list2.map(item => item.num),
    }, {
        name: '柱底部',
        type: 'pictorialBar',
        symbolSize: [18, 8],
        symbolOffset: [0, 5],
        itemStyle: {
            color: barBottomColor
        },
        data:  list2.map(item => item.num),
    },{
        name: "设备个数",
        type: 'bar',
        itemStyle: {
            color: function(params) {
                return new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [{
                            offset: 1,
                            color: barBottomColor
                        },
                        {
                            offset: 0,
                            color:  barTopColor[params.dataIndex]
                        }
                    ]
                );
            },
            opacity: .9
        },
        barWidth: 18,
        data:  list2.map(item => item.num),
    }]
};