可以使用 ECharts 中的 graphic 组件绘制饼图内环,具体步骤如下:

  1. 在饼图中设置一个内半径,表示内环的大小,可以通过设置 series 中的 radius 数组来实现:
series: [{
    type: 'pie',
    radius: ['50%', '70%'], // 外半径为 50%,内半径为 70%
    // ...
}]
  1. 在图表中添加一个 graphic 组件,用于绘制内环,可以通过设置 graphic 的 type 属性为 'ring' 来实现:
graphic: {
    type: 'ring',
    shape: {
        cx: '50%', // 中心点横坐标
        cy: '50%', // 中心点纵坐标
        r: ['50%', '70%'] // 内环半径和外环半径
    },
    style: {
        fill: '#fff', // 填充颜色
        stroke: '#999', // 描边颜色
        lineWidth: 1 // 描边宽度
    }
}
  1. 通过设置 graphic 的 shape 和 style 属性,可以进一步调整内环的形状和样式,例如设置内环为圆形、设置填充颜色和描边颜色等。

完整代码示例:

option = {
    series: [{
        type: 'pie',
        radius: ['50%', '70%'],
        data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
        ]
    }],
    graphic: {
        type: 'ring',
        shape: {
            cx: '50%',
            cy: '50%',
            r: ['50%', '70%']
        },
        style: {
            fill: '#fff',
            stroke: '#999',
            lineWidth: 1
        }
    }
};
ECharts 饼图内环绘制:使用 graphic 组件实现

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

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