echarts柱状图负值-动态设置圆角样式

最新推荐文章于 2023-12-21 07:54:10 发布

Enidchan_

最新推荐文章于 2023-12-21 07:54:10 发布

阅读量3.8k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/EnidChann/article/details/109312962

echarts 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在Echarts图表中，针对含有负值的柱状图进行动态设置圆角样式。当数据为负时，不仅柱状图文字会显示在下方，同时圆角样式也需要相应调整。

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

在这里插入图片描述
如图, 柱状图有负数时,圆角的样式需要进行动态调整

      series: [
        {
          type: 'bar',
          barWidth: '30',
          // 在这里对data进行自定义配置即可
          data: seriesData.map(item => {
            // console.log(item, 'item')
            return {
              value: item,
              label: {
                show: true,
                fontSize: 12,
                position: 'top',
                distance: 10,
                color: '#666',
                padding: [4, 4],
                formatter: '{c}'
              },
              itemStyle: {
                normal: {
                  barBorderRadius: item > 0 ? [15, 15, 0, 0] : [0, 0, 15, 15], // 动态设置柱状图圆角
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#94C2FD'
                    },
                    {
                      offset: 1,
                      color: '#5C98CB'
                    }
                  ])
                }
              }
            }
          })
        }
      ]