echarts 母子饼图

ECharts是一个强大的JavaScript数据可视化库，它支持创建各种复杂的图表，包括母子饼图。母子饼图是一种特殊的饼状图，主要用于显示层次结构的数据，其中大饼代表总体，小饼嵌套在大饼内部，表示整体中的部分。通过这种方式，可以清晰地展示每个部分在整个体系中的占比及其相互之间的关系。

在ECharts中，创建母子饼图的主要步骤如下：
1. 引入ECharts库和饼图组件。
2. 定义数据结构，包含总值和子类别数据。
3. 使用`series`配置项中的`type`属性设置为'multipie'，并配置子系列（children）。
4. 设置标签、颜色等视觉样式，并添加数据。

下面是一个简单的示例代码：

var option = {
  tooltip: {},
  legend: {
    data:['总量']
  },
  series: [
    {
      name: '总量',
      type: 'pie', // 饼状图
      radius: ['50%', '70%'], // 控制大饼和小饼的比例
      data:[
        {value: 335, name:'直接访问'},
        {value: 310, name:'邮件营销'},
        {value: 234, name:'联盟广告'},
        {value: 135, name:'视频广告'}
      ],
      children: [
        {
          value: 335,
          name: '直接访问',
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        {
          value: 310,
          name: '邮件营销',
          itemStyle: {...},
        },
        ... // 其他子项类似配置
      ]
    }
  ]
};

// 初始化ECharts实例并渲染
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);