Bootstrap

echarts 饼图pie齿轮绘制

效果:

制作内圈的齿轮:

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

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;