实现正负值及多条Y轴 Echarts柱状图_c# 正负柱状图-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44368997/article/details/122242830

该博客展示了如何利用ECharts库创建一个包含正负值的柱状图，并添加了第二条Y轴。代码示例详细解释了配置过程，包括设置不同颜色以区分正负值，以及自定义标签样式和箭头符号。此外，还提供了图表的最终效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

正负值及多条Y轴

话不多说，直接上代码

let xData = ['语文', '数学', '英语', '地理', '物理', '化学', '生物'] 
let yData = [320, 302, -341, -374, 390, 450, -420]
let max = Math.max(...yData)
// 区分正负值
let emptyData = yData.map((v, i) => {
    let xColor = null
    if (v >= 0) {
        xColor = '#3B2C79'
    } else {
        xColor = '#F23B6B'
    }
    let item = {
        value: max,
        label: {
            formatter: '{a|' + v + '}',
            position: 'right',
            distance: 11,
            rich: {
                a: {
                    color: xColor,
                    fontSize: 16,
                    fontFamily: 'Semibold',
                    align: 'center',
                    verticalAlign: 'middle',
                }
            }
        }
    }
    return item
})
option = {
    grid: {
        left: '3.5%',
        right: '8%',
        bottom: '15%',
        containLabel: true
    },
    xAxis: [{
        type: 'value',
        axisLine: {
            show: true,
            symbol: ['arrow', 'arrow']
        },
        max: function (value) {
            return value.max
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#E6E6EB',
                type: 'dashed'
            },
        },
        axisLabel: {
            show: false,
        }
    }],
    yAxis: [{
        type: 'category',
        axisTick: {
            show: false
        },
        axisLabel: {
            fontFamily: 'Semibold',
            fontSize: '20',
            color: '#3B2C79',
        },
        data: xData
    },
    // 第二条Y轴
    {
        type: "category",
        name: "",
        position: 'right',
        offset: 20,
        axisTick: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisLine: {
            show: false
        },
        data: xData
    }],
    series: [{
        type: 'bar',
        barWidth: 18,
        showBackground: true,
        backgroundStyle: {
            color: '#E6E6EB'
        },
        itemStyle: {
            borderRadius: [0, 2, 2, 0],
            color: function (params) {
                let valueNum = params.value
                if (valueNum >= 0) {
                    return '#FDB703'
                } else {
                    return '#F23B6B'
                }
            }
        },
        data: yData
    },
    {
        type: 'bar',
        barWidth: 10,
        yAxisIndex: 1,
        itemStyle: {
            color: 'rgba(225,225,225,0)',
        },
        label: {
            show: true,
            position: 'right',
        },
        data: emptyData
    }]
};