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

      const mainCategoryMap = {
    "湿巾": [{
        "sceneName": "基准场景",
        "mainCategory": "湿巾",
        "detailCategory": "便携装",
        "totalValue": 86.5,
        "totalCount": 173,
        "totalWeight": 17.3,
        "totalSquare": 17.3
    }, {
        "sceneName": "基准场景",
        "mainCategory": "湿巾",
        "detailCategory": "标准装",
        "totalValue": 388,
        "totalCount": 388,
        "totalWeight": 194,
        "totalSquare": 194
    }],
    "纸品": [{
        "sceneName": "基准场景",
        "mainCategory": "纸品",
        "detailCategory": "厨房纸",
        "totalValue": 1601,
        "totalCount": 370,
        "totalWeight": 740,
        "totalSquare": 1110
    }, {
        "sceneName": "基准场景",
        "mainCategory": "纸品",
        "detailCategory": "抽纸",
        "totalValue": 1788,
        "totalCount": 661,
        "totalWeight": 1089,
        "totalSquare": 1127
    }],
    "笔": [{
        "sceneName": "基准场景",
        "mainCategory": "笔",
        "detailCategory": "铅笔",
        "totalValue": 1601,
        "totalCount": 370,
        "totalWeight": 740,
        "totalSquare": 1110
    }, {
        "sceneName": "基准场景",
        "mainCategory": "笔",
        "detailCategory": "钢笔",
        "totalValue": 1788,
        "totalCount": 661,
        "totalWeight": 1089,
        "totalSquare": 1127
    }]
}

let skuCount = 0
let productList = []
for (let key in mainCategoryMap) {
    const dcArr = mainCategoryMap[key]
    skuCount += dcArr.length
    productList = productList.concat(dcArr)
}

let series = []
const markLines = [
    [{
            symbol: 'none',
            x: 0,
            y: '0',
            // coord: [0, '0'],
        },
        {
            symbol: 'none',
            x: '100%',
            y: '0',
            // coord: ['100%', '0'],
        }
    ],
    [{
            symbol: 'none',
            x: 0,
            y: '33.33%',
            // coord: [0, '0'],
        },
        {
            symbol: 'none',
            x: '100%',
            y: '33.33%',
            // coord: ['100%', '0'],
        }
    ],
    [{
            symbol: 'none',
            x: 0,
            y: '66.66%',
            // coord: [0, '0'],
        },
        {
            symbol: 'none',
            x: '100%',
            y: '66.66%',
            // coord: ['100%', '0'],
        }
    ],
    [{
            symbol: 'none',
            x: 0,
            y: '99%',
            // coord: [0, '0'],
        },
        {
            symbol: 'none',
            x: '100%',
            y: '99%',
            // coord: ['100%', '0'],
        }
    ]
]
let beUsed = 0

for (let key in mainCategoryMap) {
    const num = mainCategoryMap[key].length
    series.push({
        name: '产品大类',
        z: 0,
        data: [{
            name: key,
            value: 1
        }],
        label: {
            offset: [0, 0],
            show: true,
            position: 'insideLeft',
            formatter: ({
                name
            }) => name.split('').join('\n\n'),
            textStyle: {
                fontSize: 14,
                color: '#000',
                fontWeight: 'bold',
            }
        },
        type: 'bar',
        barGap: 0,
        barWidth: `${(num)/skuCount*100}%`,
        itemStyle: {
            normal: {
                // color: (params) => {
                //   console.log(params)
                //   let colors = ['#4150d8', '#28bf7e', '#ed7c2f', '#f2a93b', '#f9cf36', '#4a5bdc', '#4cd698', '#f4914e', '#fcb75b', '#ffe180', '#b6c2ff', '#96edc1']
                //   return colors[params.dataIndex]
                // },
                // opacity: 0.1,
                color: 'rgba(0, 0, 0, 0)',
                // borderColor: 'rgba(0, 0, 0, 0.2)',
                // borderType: 'dashed',
                // borderWidth: 1,
            }
        },
        xAxisIndex: 1,
        yAxisIndex: 1,
    })


}

const productNameList = productList.map(item => item.detailCategory)
const totalCountList = productList.map(item => item.totalCount)
const totalSquareList = productList.map(item => item.totalSquare)
const totalWeightList = productList.map(item => item.totalWeight)
const totalValueList = productList.map(item => item.totalValue)

option = {
    // title: {
    //   text: productList[0].sceneName,
    // },
    // toolbox: {
    //   feature: {
    //     saveAsImage: {},
    //     restore: {},
    //   }
    // },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
    },
    axisPointer: {
        link: {
            xAxisIndex: 'all'
        }
    },
    legend: {
        data: ['总需求数量', '总需求体积', '总需求重量', '总价值'],
        selectedMode: 'single',
        top: 30,
    },
    grid: [{
            top: 100,
            bottom: 100,
            right: 100,
            left: 200,
        },
        {
            top: 100,
            bottom: 100,
            right: 100,
            left: 100,
        },
    ],
    xAxis: [{
            type: 'value',
            gridIndex: 0,
            minInterval: 1,
            axisLabel: {
                color: '#333',
                // show: false,
            },
            splitLine: {
                // show: false,
            },
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#ccc'
                },
                // show: false,
            },
            z: 1,
        },
        {
            type: 'value',
            gridIndex: 1,
            axisLabel: {
                show: false
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            z: 0,
        },
    ],
    yAxis: [{
            type: 'category',
            data: productNameList,
            gridIndex: 0,
            axisLabel: {
                color: '#333',
                margin: 4,
            },
            // axisLine: {
            //   lineStyle: {
            //     color: '#e7e7e7'
            //   }
            // },
            axisTick: {
                show: false,
            },
            z: 2,
        },
        {
            type: 'category',
            // data: [],
            gridIndex: 1,
            axisLine: {
                show: false
            },
            axisTick: {
                show: true,
            },
            z: 1,
        },
    ],
    series: [{
            z: 1,
            name: '总需求数量',
            data: totalCountList,
            type: 'bar',
            stack: 'total',
            label: {
                show: true,
                position: 'insideLeft',
                textStyle: {
                    color: '#555'
                }
            },
            itemStyle: {
                normal: {
                    color: '#5B9BD5',
                }
            },
            xAxisIndex: 0,
            yAxisIndex: 0,
            // barWidth: '100%',
            markLine: {
                silent: true,
                lineStyle: {
                    type: 'solid',
                    color: 'red',
                },
                data: markLines
            },
        },
        {
            z: 1,
            name: '总需求体积',
            data: totalSquareList,
            type: 'bar',
            stack: 'total',
            label: {
                show: true,
                position: 'insideLeft',
                textStyle: {
                    color: '#555'
                }
            },
            itemStyle: {
                normal: {
                    color: '#5B9BD5',
                }
            },
            xAxisIndex: 0,
            yAxisIndex: 0,
            // barWidth: '100%',
            markLine: {
              silent: true,
              lineStyle: {
                type: 'solid',
                color: 'red',
              },
              data: markLines
            },
        },
        {
            z: 1,
            name: '总需求重量',
            data: totalWeightList,
            type: 'bar',
            stack: 'total',
            label: {
                show: true,
                position: 'insideLeft',
                textStyle: {
                    color: '#555'
                }
            },
            itemStyle: {
                normal: {
                    color: '#5B9BD5',
                }
            },
            xAxisIndex: 0,
            yAxisIndex: 0,
            // barWidth: '100%',
            markLine: {
              silent: true,
              lineStyle: {
                type: 'solid',
                color: 'red',
              },
              data: markLines
            },
        },
        {
            z: 1,
            name: '总价值',
            data: totalValueList,
            type: 'bar',
            stack: 'total',
            label: {
                show: true,
                position: 'insideLeft',
                textStyle: {
                    color: '#555'
                }
            },
            itemStyle: {
                normal: {
                    color: '#5B9BD5',
                }
            },
            xAxisIndex: 0,
            yAxisIndex: 0,
            // barWidth: '100%',
            markLine: {
              silent: true,
              lineStyle: {
                type: 'solid',
                color: 'red',
              },
              data: markLines
            },
        },
        ...series,
    ]
};