正方体柱子echarts pictorialBar配置项内容和展示

正方体柱子

      let arr = [];
let list = [];
let series = [];
let legend = [];
let fontSize = 16;
let barWidth = 26;
let barGap = 0;
let maxList = [];
let max = 460; //背景最大值取y轴刻度线（最后注释部分）
let colorStartList = ['transparent', 'transparent', 'transparent', 'transparent'];
let colorLeftList = ['#000', '#000', '#000', '#000'];
let colorTopList = ['#1E7EFF', '#FFA75A', '#6ACC29', '#9833FF'];
let colorEndList = ['#4084EE', '#FF8D28', '#6ACC29', '#9833FF'];
chartObj = {
    series: [
        { name: '当前资源', data: [269, 460, 400, 170] },
        { name: '其他资源', data: [39, 50, 40, 100] },
        { name: '资源', data: [15, 200, 80, 60] },
        { name: '资源2', data: [15, 200, 80, 60] },
    ],
    chartList: ['通信', '网络', '能源', '建筑'],
};
function colorRgba(str, alpha) {
    let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    var sColor = str.toLowerCase();
    if (sColor == 'transparent') {
        return 'transparent';
    }
    if (sColor && reg.test(sColor)) {
        if (sColor.length === 4) {
            var sColorNew = '#';
            for (let i = 1; i < 4; i += 1) {
                sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
            }
            sColor = sColorNew;
        }
        //处理六位的颜色值
        var sColorChange = [];
        for (let i = 1; i < 7; i += 2) {
            sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)));
        }
        return 'rgba(' + sColorChange.join(',') + ',' + alpha + ')';
    } else {
        return sColor;
    }
}
if (chartObj.series && chartObj.series.length) {
    chartObj.series.forEach((ele, i) => {
        arr = arr.concat(ele.data);
    });
    maxList = chartObj.series[0].data.map(() => {
        return max;
    });
    list = chartObj.series[0].data.map((item, index) => {
        return 1;
    });
    chartObj.series.forEach((item, index) => {
        legend.push({
            name: item.name,
            itemStyle: {
                color: colorEndList[index % colorEndList.length],
            },
        });
        //背景顶部切片
        series.push({
            data: maxList,
            type: 'pictorialBar',
            barMaxWidth: fontSize * 3,
            itemStyle: {
                color: colorEndList[index],
                opacity: 0.1,
            },
            tooltip: {
                show: false,
            },
            symbolPosition: 'end',
            symbol: 'diamond',
            symbolOffset: [
                (-0.5 * (chartObj.series.length - 1) +
                    index +
                    -0.5 * barGap * 0.01 * (chartObj.series.length - 1) +
                    barGap * 0.01 * index) *
                    barWidth,
                '-50%',
            ],
            symbolSize: [barWidth, barWidth * 0.4],
            zlevel: -1,
        });
        //底部切片
        series.push({
            data: list,
            color: colorStartList[index % colorStartList.length],
            type: 'pictorialBar',
            tooltip: {
                show: false,
            },
            barMaxWidth: fontSize * 3,
            symbol: 'diamond',
            symbolOffset: [
                (-0.5 * (chartObj.series.length - 1) +
                    index +
                    -0.5 * barGap * 0.01 * (chartObj.series.length - 1) +
                    barGap * 0.01 * index) *
                    barWidth,
                '50%',
            ],
            symbolSize: [barWidth, barWidth * 0.5],
        });

        //实际数据顶部切片
        series.push({
            data: item.data,
            type: 'pictorialBar',
            tooltip: {
                show: false,
            },
            barMaxWidth: fontSize * 3,
            color: colorTopList[index],
            symbolPosition: 'end',
            symbol: 'diamond',
            symbolOffset: [
                (-0.5 * (chartObj.series.length - 1) +
                    index +
                    -0.5 * barGap * 0.01 * (chartObj.series.length - 1) +
                    barGap * 0.01 * index) *
                    barWidth,
                '-50%',
            ],
            symbolSize: [barWidth, barWidth * 0.4],
            zlevel: 2,
        });
        //实际数据侧边切片
        series.push({
            data: item.data,
            type: 'pictorialBar',
            tooltip: {
                show: false,
            },
            barMaxWidth: fontSize * 3,
            color: {
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                type: 'linear',
                global: false,
                colorStops: [
                    {
                        offset: 0,
                        color: 'transparent',
                    },
                    {
                        offset: 0.2,
                        color: colorRgba(colorLeftList[index % colorLeftList.length], 0.2),
                    },
                    {
                        offset: 1,
                        color: colorRgba(colorLeftList[index % colorLeftList.length], 0.3),
                    },
                ],
            },
            symbolPosition: 'end',
            symbol: 'rect',
            symbolSize: [barWidth / 2, '100%'],
            symbolOffset: [
                (-0.5 * (chartObj.series.length - 1) +
                    index +
                    -0.5 * barGap * 0.01 * (chartObj.series.length - 1) +
                    barGap * 0.01 * index -
                    0.25) *
                    barWidth,
                0,
            ],
            zlevel: 1,
        });
        //柱子
        series.push({
            data: item.data,
            type: 'bar',
            name: item.name,
            barGap: barGap + '%',
            barWidth: barWidth,
            barMaxWidth: fontSize * 3,
            label: {
                show: false,
                position: 'top',
                distance: fontSize * 0.3,
                textStyle: {
                    color: colorEndList[index % colorEndList.length],
                    fontSize: fontSize,
                },
                // formatter: function (a, b) {
                //     return a.value==0?'':a.value;
                // },
            },
            showBackground: true,
            backgroundStyle: {
                color: {
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    type: 'linear',
                    global: false,
                    colorStops: [
                        {
                            offset: 0,
                            color: colorStartList[index % colorStartList.length],
                        },
                        {
                            offset: 0.2,
                            color: colorRgba(colorEndList[index % colorEndList.length], 0.2),
                        },
                        {
                            offset: 1,
                            color: colorRgba(colorEndList[index % colorEndList.length], 1),
                        },
                    ],
                },
                opacity: 0.1,
            },
            itemStyle: {
                color: {
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    type: 'linear',
                    global: false,
                    colorStops: [
                        {
                            offset: 0,
                            color: colorStartList[index % colorStartList.length],
                        },
                        {
                            offset: 0.2,
                            color: colorRgba(colorEndList[index % colorEndList.length], 0.2),
                        },
                        {
                            offset: 1,
                            color: colorRgba(colorEndList[index % colorEndList.length], 1),
                        },
                    ],
                },
            },
        });
    });
}
option = {
    // backgroundColor: "#061326",
    title: {
        text: '',
        top: 20,
        left: 'center',
        textStyle: {
            color: '#fff',
            fontSize: 20,
        },
    },
    tooltip: {
        show: true,
        trigger: 'axis',
        backgroundColor: 'rgba(116,176,222,0.3)',
        extraCssText: 'box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;',
        borderWidth: 0,
        confine: false,
        appendToBody: true,
        formatter: (params) => {
            ////console.log(params,'---paramsshopping')
            let result = "<div style='margin-bottom:5px;'>" + params[0].name + '</div>';
            params.forEach((item, index) => {
                var dotHtml = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:${fontSize}px;height:${fontSize}px;background:${colorEndList[index]}"></span>`;
                result +=
                    "<div style='display:flex;align-items:center;margin-bottom:5px'>" +
                    dotHtml +
                    item.seriesName +
                    (item.seriesName ? "<span style='display:inline-block;margin-right:6px;'></span>" : '') +
                    item.data +
                    '</div>';
            });
            return result;
        },
        //轴触发提示才有效
        axisPointer: {
            type: 'shadow',
            shadowStyle: {
                color: 'rgba(35,49,77,0.01)',
            },
        },
        textStyle: {
            color: '#fff',
            fontSize: fontSize,
        },
    },
    grid: {
        top: fontSize * 3.5,
        left: 5,
        right: 5,
        bottom: fontSize,
        containLabel: true, //包括文本，居中
    },
    legend: {
        show: true,
        data: legend,
        selectedMode: false, //图例是否可以点击
        type: 'scroll',
        icon: 'circle',
        itemWidth: fontSize,
        itemHeight: fontSize,
        textStyle: {
            color: '#C3E3F9',
            fontSize: fontSize,
        },
    },
    xAxis: {
        data: chartObj.chartList,
        type: 'category',
        axisLine: {
            show: true,
            lineStyle: {
                color: '#2B72A1',
            },
        },
        axisLabel: {
            fontSize: fontSize,
            color: '#87CCFF',
        },
        splitLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        interval: 0,
    },
    yAxis: [
        {
            type: 'value',
            name: '单位',
            nameGap: fontSize * 1.5,
            nameTextStyle: {
                align: 'center',
                fontSize: fontSize,
                color: '#2869A9',
            },
            splitNumber: 4,
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)',
                },
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                margin: 10,
                fontSize: fontSize,
                color: '#2869A9',
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#2869A9',
                },
            },
        },
    ],
    series: series,
};