echarts 饼图pie齿轮绘制

最新推荐文章于 2024-04-22 10:38:57 发布

Igiveufireworks

最新推荐文章于 2024-04-22 10:38:57 发布

阅读量527

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/igiveufireworks/article/details/127015613

版权

这篇博客介绍了如何使用ECharts库创建一个内圈齿轮效果的饼图。通过设置数据项和属性，如`itemStyle`、`label`和`tooltip`，可以隐藏部分饼图切片，达到齿轮的视觉效果。循环次数和`value`值可以调整齿轮的细节。此外，还展示了如何在`series`中配置相关参数，如`hoverAnimation`、`center`和`radius`，来定制图表的交互和布局。

摘要由CSDN通过智能技术生成

效果：

制作内圈的齿轮：

设置data：

  const labelItemArr = [];
  for (let i = 0; i < 65; ++i) {
      labelItemArr.push({
          value: 10,
          name: '',
          itemStyle: { normal: { color: '#2D5470' } }
        },
        {
          value: 10,
          name: '',
          itemStyle: {
            normal: {
              legend: {
                show: false,
              },
              label: { show: false },
              labelLine: { show: false },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            }
          }
        }
      );
  }

通过第二项设置颜色为透明制作齿轮效果。可以根据循环的次数和value的大小调节齿轮样式。

在series内部加上一项：

series: [
    {
        type: 'pie',
        hoverAnimation: false,
        center: ['25%', '50%'],
        // z: 2,
        data: labelItemArr,
        radius: ['39%', '42%'],
        // zlevel: -2,
        label: {
          normal: {
            position: 'inside',
            show: false,
          }
        },
        tooltip: {
          show: false // 取消悬浮框
        }
      }, 
    // 省略其他项
]