echarts实现带背景色的圆环图

最新推荐文章于 2024-05-06 13:40:27 发布

原创最新推荐文章于 2024-05-06 13:40:27 发布 · 3k 阅读

本内容遵循CC 4.0 BY-SA版权协议

文章介绍了如何在Echarts中创建带背景颜色的圆环图，当有多个数据项时，遇到label显示在中间且小数据项被大數據项遮挡的问题。解决方案是通过设置不可点击数据的label为不可见，并禁用其点击事件，保持可点击数据的label可见，从而确保正确显示和交互。

实现带背景颜色的圆环图实际上就是一个圆环图设置两种不同的颜色，通过设置一个可点击，另一个不可点击来达到一个视觉上的效果。

在这里插入图片描述

问题：
实现的过程中发现一个问题，多个圆环图同时放入数据时，label文字显示在中间，可点击的数据较小时，echarts自动识别数据最大的数据（不可点击的数据），鼠标悬停上去的时候，又显示正确的数据。

解决：在不可点击的数据项中设置label不可见，在可点击的label设置可点击。

关键代码：

    data.forEach(item => {
        resData.push(
          [
            {
              ...item,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 1,
                  x1: 0,
                  y1: 0,
                  colorStops: [
                    {
                      offset: 0, color: '#3a79ed'
                    },
                    {
                      offset: 1, color: '#a2c2fc'
                    }
                  ]
                }
              },
              label: {
                show: true
              }
            },
            {
              name: '---',
              // she
              value: total - item.value,
              // 设置这个label不可见
              label: {
                show: false
              },
              emphasis: {
                 // 设置这一数据库不可点击
                disabled: true
              },
              itemStyle: {
                color: '#dbeefc'
              }
            }
          ]
        )
      })