以下是一个使用 ECharts 在饼图中用 graphic 绘制内环的示例代码:

var option = {
  series: [
    {
      type: 'pie',
      radius: ['50%', '70%'],
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ],
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      itemStyle: {
        borderWidth: 2,
        borderColor: '#fff'
      },
      emphasis: {
        itemStyle: {
          borderWidth: 2,
          borderColor: '#fff'
        }
      },
      animationDuration: 3000,
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 200;
      }
    },
    {
      type: 'pie',
      radius: ['40%', '45%'],
      avoidLabelOverlap: false,
      data: [
        { value: 1, name: '', itemStyle: { color: '#EDEDED' } }
      ],
      hoverAnimation: false,
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      itemStyle: {
        borderWidth: 0
      },
      tooltip: {
        show: false
      },
      graphic: {
        elements: [
          {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
              text: '内环',
              fill: '#555',
              fontFamily: 'Arial',
              fontSize: 20,
              fontWeight: 'bold'
            },
            z: 100
          }
        ]
      }
    }
  ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

在这个示例中,我们在饼图中添加了一个内环,使用 graphic 绘制了一个文本元素来显示'内环'文本。具体实现方法是在第二个 series 中添加了一个数据项,并设置了 graphic 元素。同时,我们还对内环的样式进行了微调,如设置了颜色、禁用了标签重叠等。

这个示例中的 option 变量可以直接传给 setOption 方法,用于显示图表。如果需要更多的样式调整,可以在 option 中添加更多的配置项。

ECharts 饼图内环绘制:使用 graphic 元素实现

原文地址: https://www.cveoy.top/t/topic/lxuI 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录