Echarts 双向柱图封装，含双值数据及名称位置修改

前言

实现如下图所示双向柱状图，难点名称位置的调整，双值展现，以及双值最大值设置。

---

 

一、组件封装

1.代码如下（示例）：

const myData = [
    '地区一',
    '地区二',
    '地区三四',
    '地区四',
    '地区五',
    '地区六',
    '地区七',
    '地区八',
];

const vehicle = [80, 17.4, 65.5, 58.5, 87.3, 98.2, 45, 65,];
const personnel = [28, 17.5, 26.4, 30.3, 28, 34.4, 56, 26];
const data1 = [12112, 3882, 2332, 3039, 1233, 308, 1297, 1283];
const data2 = [10180, 1284, 2093, 3890, 1908, 203, 1123, 1987];
let maxVal1 = Math.max(...vehicle)
let maxVal2 = Math.max(...personnel)
let maxVal = maxVal1>maxVal2 ? maxVal1 : maxVal2
console.log('maxVal',maxVal)
function fomatPercent(data) {
            let sum = 0;
            data1.map((item) => {
                sum += item;
            });
            return Math.round((data / sum) * 100) + '%';
        }
        function formatterArr() {
            var arr = new Array();
            data1.map((item, i) => {
                arr.push({
                    coord: [item, i]
                });
            });
            return arr
        }
option = {
    tooltip: {
        show: true,
    },
    grid: [
        {
            show: false,
            left: '55%',
            top: 0,
            bottom: 22,
            width: '0%',
        },
        {
            show: false,
            left: '10%',
            top: '5%',
            bottom: 0,
            containLabel: true,
            width: '39.8%',
        },
        {
            show: false,
            right: '10%',
            top: '5%',
            bottom: 0,
            containLabel: true,
            width: '39.8%',
        },
    ],
    xAxis: [
        {
            gridIndex: 0,
            show: false,
        },
        {
            gridIndex: 1,
            max:maxVal,
            type: 'value',
            inverse: true,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
                verticalAlign: 'middle',
                textStyle: {
                    color: '#B2B2B2',
                    fontSize: 12,
                },
            },
            splitLine: {
                show: false,
            },
        },
        {
            gridIndex: 2,
            type: 'value',
            max:maxVal,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
                verticalAlign: 'middle',
                textStyle: {
                    color: '#B2B2B2',
                    fontSize: 12,
                },
            },
            splitLine: {
                show: false,
            },
        },
    ],
    yAxis: [
        {
            gridIndex: 0,
            type: 'category',
            inverse: true,
            position: 'right',
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            data: myData.map(function (value) {
                return {
                    value: value,
                    textStyle: {
                        align: 'right',
                    },
                };
            }),
            axisLabel: {
                fontSize: 14,
                rich: {
                    b: {
                        color: '#333',
                        width: 100,
                        height: 30,
                        align: 'center',
                    },
                },
                formatter: function (params) {
                    return [`{b|${params}}`].join('\n');
                },
            },
        },
        {
            gridIndex: 1,
            type: 'category',
            inverse: true,
            position: 'left',
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
                margin: 8,
                textStyle: {
                    color: '#1B1D1E',
                    fontSize: 14,
                    fontWeight:600
                },
                align: "top",
                padding: [0, 100, 0, 0],
                formatter: function (params) {
                    var index = myData.map((item) => item).indexOf(params);
                    var value = data1.map((item) => item);
                    return value[index]
                },
            },
            data: myData.map(function(value) {
                return {
                    value: value,
                    textStyle: {
                        align: 'center'
                    }
                }
            })
        },
        {
            gridIndex: 2,
            type: 'category',
            inverse: true,
            position: 'right',
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color:'#1B1D1E',
                    fontSize:14,
                    fontWeight:600,
                },
                padding: [0, 0, 0, 40],
                formatter: function (params) {
                    var index = myData.map((item) => item).indexOf(params);
                    var value = data2.map((item) => item);
                    return value[index]
                },
            },
            data: myData,
        },
    ],
    series: [
        {
            name: '车辆',
            type: 'bar',
            barGap: 20,
            barWidth: 20,
            xAxisIndex: 1,
            yAxisIndex: 1,
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(245, 245, 245, 1)',
            },
            label: {
                normal: {
                    show: true,
                    color:'#1B1D1E',
                    fontSize:14,
                    fontWeight:600,
                    verticalAlign:'middle',
                    position:"insideRight",
                    padding:[3,130,0,0],
                    formatter: (params) => {
                        return params.data + '%'
                    },
                },
                // emphasis: {
                //     show: true,
                //     position: 'left',
                //     offset: [0, 0],
                //     textStyle: {
                //         color: '#666666',
                //         fontSize: 14,
                //     },
                // },
            },
           
            itemStyle: {
                normal: {
                    // barBorderRadius: [10, 0, 0, 10],
                    color:'#BFD76D'
                },
            },
            data: vehicle,
        },
        {
            name: '人员',
            type: 'bar',
            barGap: 20,
            barWidth: 20,
            xAxisIndex: 2,
            yAxisIndex: 2,
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(245, 245, 245, 1)',
            },
            label: {
                normal: {
                    show: true,
                    // position:'right',
                    color:'#1B1D1E',
                    fontSize:14,
                    fontWeight:600,
                    verticalAlign:'middle',
                    position:"insideLeft",
                    padding:[3,0,0,130],
                    formatter: (params) => {
                        return params.data + '%'
                    },
                },
                // emphasis: {
                //     show: true,
                //     position: 'right',
                //     offset: [0, 0],
                //     textStyle: {
                //         color: '#666666',
                //         fontSize: 14,
                //     },
                // },
            },
            itemStyle: {
                normal: {
                    // barBorderRadius: [0, 10, 10, 0],
                    color:'#D7B36D',
                },
            },
            data: personnel,
        },
        
    ],
};

---

总结

关键属性：grid        第一个对象中设置的为名称的位置（left），第二个第三个分别对应左右两边柱状图的位置及宽度，为实现自适应最好宽度以及上下左右属性都用百分比设置

y轴的gridIndex   为0时为名字显示的数据，为1时为左侧外侧显示的数据，为2时为右侧外侧显示的数据，具体样式和需求对应即可

series中的label  定义柱体中的数值百分比位置