echarts一个嵌套饼图

### ECharts 嵌套饼图使用教程

#### 创建基本配置项
为了创建一个嵌套饼图，首先需要定义图表的基本配置选项。这包括设置标题、图例以及系列数据。

var option = {
    title: {
        text: '嵌套饼状图',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    }
};

#### 定义内层饼图的数据
对于内部的饼图来说，只需要提供相应的`series`对象并指定其半径范围即可。这里通过调整最小最大值来控制圆环宽度。

option.series.push({
    name: '访问来源',
    type: 'pie',
    radius: ['40%', '70%'], // 设置内外圈比例
    avoidLabelOverlap: false,
    itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
    },
    label: {
        show: true,
        position: 'outside'
    },
    emphasis: {
        label: {
            show: true,
            fontSize: '20',
            fontWeight: 'bold'
        }
    },
    data:[
        {value:335, name:'直接访问'},
        {value:310, name:'邮件营销'}
    ]
});

#### 添加外层饼图作为背景
为了让视觉效果更佳，在外部再包裹一层透明度较高的大圆形区域作为装饰用途。注意这里的颜色可以设为较浅的颜色以便突出中间部分的内容[^1]。

option.series.push({
    name: '',
    type: 'pie',
    clockWise : false,
    radius : ['80%','90%'],
    hoverAnimation: false,
    center : ['50%','50%'],
    itemStyle:{
        normal:{label:{show:false},labelLine:{show:false}},
        emphasis:{borderWidth:0}
    },
    data:[{value:1,name:'invisible'},]
});

#### 初始化图表实例并与DOM关联
最后一步就是初始化ECharts实例并将上述配置应用到具体的HTML容器上完成渲染工作。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

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