ECharts实现柱状图正负数显示在同一侧

亦凉 2022-10-30 11:19 134阅读 0赞

> 想必大家工作中也有用到过ECharts，但是大部分的需求应该都是相对简单的展示，比如说使用柱状图时，当数值为正与负值时显示在两侧，如下这样（一左一右或一上一下）：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70]

> 那么如果我想让他们无论正负均显示在同一侧呢？

1、可参考如下简单示例：

运行结果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 1]  
2、真实项目使用场景如下（barChart.vue组件中）：

series: [
    {
         type: 'pictorialBar',
         symbolSize: [28, '100%'],
         symbolOffset: [0, 0],
         symbol:'image://'+ require('../../assets/legal/background6.png'),
         symbolRepeat: false,
         data: ydata, // 真实值，用来控制柱状图的高低
         barCategoryGap: "50%",
         z: 0,
         itemStyle: {
             normal: {
                 color: "#397cf9",
                 barBorderRadius: [0, 0, 0, 0],
             }
         },
         label: {
         show: true,
         position: 'top',
         fontSize:14,
         offset:[0,0],
         color:"rgba(177, 234, 255, 1)",
         formatter:  function(params){
             if(xdata[params.dataIndex]){
                    return xdata[params.dataIndex] + '%'  // 显示值，用来显示在柱状图上面的数字
                } else {
                    return params.value+'%'
                }
            },
         },
     },
    ]

页面中：

let xdata1 = [];
    let ydata1 = [];
    
    xdata1.push(item.sumValue);
    xdata1.push(item.budgetValue); // xdata1对应组件中的xdata，是显示值，用来显示在柱状图上面的数字
    
    if(item.sumValue<0) {
      item.sumValue = (item.sumValue).substr(1) // 去掉前面的‘-’，变为正数，用来控制柱状图的高低
    }
    if(item.budgetValue<0) {
      item.budgetValue = (item.budgetValue).substr(1) // 去掉前面的‘-’，变为正数，用来控制柱状图的高低
    }
    
    ydata1.push(item.sumValue);
    ydata1.push(item.budgetValue);

欢迎各位小伙伴一起交流哦

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70]: /images/20221024/de77839c7678418d9c098fcc5e26d61c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 1]: /images/20221024/d7f341a7f82345c8a1698a98abd47184.png