分割线图表echarts 柱状配置项内容和展示

      const list = [
        {
            name: '杭州',
            value: '100',
        },
        {
            name: '宁波',
            value: '60',
        },
        {
            name: '温州',
            value: '60',
        },
        {
            name: '嘉兴',
            value: '60',
        },
        {
            name: '湖州',
            value: '60',
        },
        {
            name: '绍兴',
            value: '60',
        },
        {
            name: '金华',
            value: '60',
        },
        {
            name: '衢州',
            value: '60',
        },
        {
            name: '舟山',
            value: '60',
        },

        {
            name: '台州',
            value: '60',
        },
        {
            name: '丽水',
            value: '60',
        },


    ];
const list2 = [
        {
            name: '杭州',
            value: '70',
        },
        {
            name: '宁波',
            value: '40',
        },
        {
            name: '温州',
            value: '50',
        },
        {
            name: '嘉兴',
            value: '60',
        },
        {
            name: '湖州',
            value: '40',
        },
        {
            name: '绍兴',
            value: '50',
        },
        {
            name: '金华',
            value: '40',
        },
        {
            name: '衢州',
            value: '60',
        },
        {
            name: '舟山',
            value: '60',
        },

        {
            name: '台州',
            value: '60',
        },
        {
            name: '丽水',
            value: '60',
        },


    ];

    const datas = [
        '杭州',
        '宁波',
        '温州',
        '嘉兴',
        '湖州',
        '绍兴',
        '金华',
        '衢州',
        '舟山',
        '台州',
        '丽水',
    ];

    const values = [
        100,
        100,
        100,
        100,
        100,
        100,
        100,
        100,
        100,
        100,
        100,
        100,

    ];

option = {
        backgroundColor:'black',
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                // console.log(params)
                return params[0].name + ': '+params[0].value
            }
        },
        xAxis: {
            splitLine: { show: false },
            axisLabel: { 
                show: true ,
                textStyle: {
                    fontSize: 12,
                    color: '#fff',
                },
            },
            axisTick: {
                show: true
            },
            axisLine: { show: false },
        },
        grid: {
            containLabel: true,
            left: '3%',
            top: '3%',
            right: '10%',
            bottom: '3%',
        },
        yAxis: [
            {
                data: datas,
                inverse: true,
                axisLine: { show: false },
                axisTick: { show: false },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    // margin: ,
                    textStyle: {
                        fontSize: 12,
                        color: '#fff',
                    },
                },
            },
        ],
        series: [
            //蓝
             {
                //内
                type: 'bar',
                barWidth: 15,
                // legendHoverLink: false,
                // symbolRepeat: true,
                silent: true,
                itemStyle: {
                    color: 'transparent',
                    // borderWidth:2
                    borderColor: 'transparent',
                },
                data: list,
                z: 1,
                // animationEasing: 'elasticOut',
            },
            {
                type: 'pictorialBar',
                animationDuration: 0,
                symbolRepeat: 'fixed',
                symbolMargin: '20%',
                symbol: 'rect',
                symbolSize: [4, 15],
                symbolMargin: 2,
                symbolBoundingData: 2000,
                itemStyle: {
                    normal: {
                        color: 'transparent',
                    },
                },

                data: values,
                z: 0,
                animationEasing: 'elasticOut',
            },
            {
                //分隔
                type: 'pictorialBar',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(68, 225, 223, 1)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(66, 176, 244, 1)' // 100% 处的颜色
                        }], false)
                    }
                },
                symbolRepeat: 'fixed',
                symbolMargin: 1,
                symbol: 'rect',
                symbolClip: true,
                symbolSize: [3, 12],
                symbolPosition: 'start',
                symbolOffset: [0, -12],
                // symbolBoundingData: 2000,
                data: list,
                z: 2,
                animationEasing: 'elasticOut',
            },
            {
                // name: "外框",
                type: "bar",
                barGap: "-140%", // 设置外框粗细
                data: [100, 100, 100,100,100,100,100,100,100,100,100],
                barWidth: 16,
                itemStyle: {
                    normal: {
                        color: "RGBA(11, 17, 39, 1)", // 填充色
                        barBorderColor: "#1C4B8E", // 边框色
                        barBorderWidth: 1, // 边框宽度
                        // barBorderRadius: 0, //圆角半径
                        label: {
                            // 标签显示位置
                            show: false,
                            position: "top" // insideTop 或者横向的 insideLeft
                        }
                    }
                },
                z: 0
            },
            //黄
            {
                //内
                // name:'黄',
                type: 'bar',
                barWidth: 30,
                // legendHoverLink: false,
                // symbolRepeat: true,
                // silent: true,
                itemStyle: {
                    color: 'transparent',
                    // borderWidth:2
                    borderColor: 'transparent',
                },
                data: list2,
                z: 1,
                // animationEasing: 'elasticOut',
            },
            {
                //分隔
                type: 'pictorialBar',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(245, 154, 35, 1)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(247, 224, 124, 1)' // 100% 处的颜色
                        }], false)
                    }
                },
                symbolRepeat: 'fixed',
                symbolMargin: 1,
                symbol: 'rect',
                symbolClip: true,
                symbolSize: [3, 12],
                symbolPosition: 'start',
                symbolOffset: [0, 6],
                // symbolBoundingData: 2000,
                data: list2,
                z: 2,
                animationEasing: 'elasticOut',
            },
            {
                name: "外框2",
                type: "bar",
                // barGap: "-132%", // 设置外框粗细
                // barCategoryGap: "152%", // 设置外框粗细
                data: [100, 100, 100,100,100,100,100,100,100,100,100],
                barWidth: 16,
                itemStyle: {
                    normal: {
                        color: "RGBA(11, 17, 39, 1)", // 填充色
                        barBorderColor: "#1C4B8E", // 边框色
                        barBorderWidth: 1, // 边框宽度
                        // barBorderRadius: 0, //圆角半径
                        
                        label: {
                            // 标签显示位置
                            show: false,
                            position: "top" // insideTop 或者横向的 insideLeft
                        }
                    }
                },
                z: 0
            },
        ],
    };