echarts实现正负轴柱状图

效果： 

 data变量配置：

     // 正负柱状图
            zhengfuZhu: {},
            data1: [],
            data2: [],
            data3: [],
            data4: [],
            xAxisData1: [],//横轴刻度
            seriesLabel: { //柱子上的字体
                show: false,
                position: 'outside',
                color: '#BEC3EB',
            },
            seriesEmphasis: { //
                itemStyle: {
                    shadowBlur: 20,
                    shadowColor: 'rgba(0,0,0,0.3)'
                }
            },
            seriesBarWidth: 17,//设置柱子粗细
            seriesYears: ['2022', '2023'],
            seriesColors: ['#4A86DE', '#ECE058', '#23C16D', '#F4AB67'], // 设置柱子颜色复制

html:

<div class="byn_box">
     <div id="lineEcharts" style="width:400px;height:300px"></div>
</div>复制

methods:

drawLine(){
        this.zhengfuZhu = {
                legend: {
                    data: [`${this.seriesYears[0]}计划完成任务`, `${this.seriesYears[0]}实际完成任务`,
                    `${this.seriesYears[1]}计划完成任务`, `${this.seriesYears[1]}实际完成任务`],
                    right: '10%',
                    icon: 'circle',
                    textStyle: {
                        color: ' #BEC3EB',
                        fontSize: 13
                    },
                    itemWidth: 12, // 设置宽度
                    itemHeight: 12, // 设置高度
                    itemGap: 15,
                    formatter: function (value) {
                        return value
                    },
                },
                tooltip: {
                    formatter: function (params) {
                        var value = params.value;
                        //首先要看看params是怎样的数据结构，里面有什么内容;
                        if (value < 0) {
                            value = -value
                        }
                        return params.seriesName + '：' + value + ''
                    }
                },
                xAxis: {
                    data: this.xAxisData1,
                    splitArea: { show: false },
                    axisLabel: {
                        textStyle: {
                            color: '#BEC3EB',
                            fontSize: 13
                        },
 
                    },
                },
                yAxis: [
                    {
                        type: 'value',
                        splitNumber: 10,
                        splitLine: {
                            show: true, lineStyle: {
                                color: '#6469A1',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            formatter: function (value) {
                                // Function formatter
                                if (value < 0) {
                                    value = -value
                                } else {
                                    value = value
                                }
                                return value + ''
                            },
                            textStyle: {
                                color: ' #BEC3EB',
                                fontSize: 13
                            },
                        },
                    }],
                grid: {
                    bottom: 25,
                    top: 35,
                    right: 0
                },
                series: [
                    {
                        name: `${this.seriesYears[0]}计划完成任务`,
                        type: 'bar',
                        stack: 'one',
                        label: this.seriesLabel,
                        emphasis: this.seriesEmphasis,
                        data: this.data1,
                        barWidth: this.seriesBarWidth,
                        itemStyle: {
                            // 柱状图颜色
                            color: this.seriesColors[0]
                        }
                    },
                    {
                        name: `${this.seriesYears[0]}实际完成任务`,
                        type: 'bar',
                        label: this.seriesLabel,
                        stack: 'two',
                        emphasis: this.seriesEmphasis,
                        barWidth: this.seriesBarWidth,
                        data: this.data3,
                        itemStyle: {
                            // 柱状图颜色
                            color: this.seriesColors[1]
                        }
                    },
                    {
                        name: `${this.seriesYears[1]}实际完成任务`,
                        type: 'bar',
                        label: this.seriesLabel,
                        stack: 'one',
                        emphasis: this.seriesEmphasis,
                        data: this.data2,
                        barWidth: this.seriesBarWidth,
                        itemStyle: {
                            // 柱状图颜色
                            color: this.seriesColors[2]
                        }
                    },
                    {
                        name: `${this.seriesYears[1]}计划完成任务`,
                        type: 'bar',
                        label: this.seriesLabel,
                        stack: 'two',
                        emphasis: this.seriesEmphasis,
                        barWidth: this.seriesBarWidth,
                        data: this.data4,
                        itemStyle: {
                            // 柱状图颜色
                            color: this.seriesColors[3]
                        }
                    },
                ],
            }
 
            var myChart2 = echarts.init(document.getElementById('lineEcharts'));
            myChart2.setOption(this.zhengfuZhu);
}复制

在mounted获取数据并调用：

 mounted() {
        for (let i = 0; i < 12; i++) {
            this.xAxisData1.push(i + 1 + "月");
            this.data1.push(+(Math.random() * 200).toFixed(2));
            this.data3.push(+(Math.random() * 500).toFixed(2));
            this.data2.push(-(Math.random() + 300).toFixed(2));
            this.data4.push(-(Math.random() + 100).toFixed(2));
        }
        this.drawLine();
}复制