echarts 饼图pie齿轮绘制

最新推荐文章于 2024-05-30 12:42:18 发布

Igiveufireworks

最新推荐文章于 2024-05-30 12:42:18 发布

阅读量467

点赞数

文章标签： echarts 前端 javascript

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

版权

效果：

制作内圈的齿轮：

设置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 // 取消悬浮框
        }
      }, 
    // 省略其他项
]