ECharts 饼图自定义图形元素：graphic 参数详解

ECharts 中的饼图可以通过 'graphic' 参数来添加自定义图形元素，例如添加文字、图片等。

'graphic' 参数是一个数组，每个元素表示一个图形元素，具体属性如下：

• type：图形元素的类型，例如 'text' 表示文本，'image' 表示图片等。
• left：图形元素相对于容器左侧的偏移量。
• top：图形元素相对于容器顶部的偏移量。
• z：图形元素的层级，数值越大越靠前。
• shape：图形元素的形状，例如 'rect' 表示矩形，'circle' 表示圆形等。
• style：图形元素的样式，例如文本的颜色、字体大小等。
• onclick：图形元素的点击事件。

以下是一个示例：

option = {
    series: [{
        type: 'pie',
        data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
        ],
        radius: ['50%', '70%'],
        label: {
            show: false
        },
        labelLine: {
            show: false
        },
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        },
        graphic: [
            {
                type: 'text',
                left: 'center',
                top: 'center',
                style: {
                    text: '饼图',
                    font: 'bold 16px Microsoft YaHei'
                }
            }
        ]
    }]
};

在上面的示例中，我们通过 'graphic' 参数添加了一个文本元素，该元素位于饼图的中心位置，显示的文本为'饼图'。