echarts饼图类型

### ECharts 饼图类型使用教程与示例

#### 创建基本饼图结构
为了构建一个基础的ECharts饼图，首先需要引入ECharts库并初始化图表实例。通过设置`series.type='pie'`指定图表类型为饼图。

<!-- HTML部分 -->
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

option = {
    title : {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
                normal: {
                    textStyle: {
                        fontSize: 10
                    }
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        width: 1
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                }
            },
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }
    ]
};

if (option && typeof option === "object") {
    myChart.setOption(option);
}
</script>

此代码片段展示了如何创建一个简单的饼图，并设置了标题、提示框以及数据项样式等属性[^2]。

#### 自定义图标显示
对于希望在各个扇区内加入特定图像的情况，则可以通过调整`series.data`中的对象来实现这一目标。具体来说，在每个数据条目里增加`icon`字段用于指明要使用的SVG路径字符串或其他形式的图片链接地址。

{
    value: 335,
    name: '直接访问',
    icon: 'path://M179...z' // SVG path 或 图片URL
},
...

这种方式允许开发者根据实际需求灵活定制每一个分段所对应的视觉表现形式[^1]。

#### 调整图例外观布局
当涉及到更复杂的场景比如多列图例或者改变默认的文字颜色时，可以利用`legend`组件的相关参数来进行个性化配置。例如下面这段脚本实现了左右两侧分别放置两组垂直方向上的文字标签列表：

legend: [{
    x: 'left',
    textStyle: {color: '#fff', padding:[11,0,11,0]},
    orient: 'vertical',
    data: []
}, {
    x: 'right',
    textStyle: {color: '#fff', padding:[11,0,11,0]},
    orient: 'vertical',
    data: []
}]

此外还提供了动态更新图例内容的方法，即先获取当前实例再调用其下的API接口完成相应操作[^3]。