子母饼图

### 子母饼图简介 子母饼图是一种特殊的饼图形式，用于表示部分与整体的关系以及不同层次的数据结构。这种图表特别适合展示具有层级关系的数据集合，在一个大圆圈内部嵌套一个小圆圈或者多个扇形区域来区分不同的数据组。 ### 使用ECharts创建子母饼图的方法 在JavaScript库ECharts中可以通过如下方式实现子母饼图： #### 准备工作 确保已经引入了Echarts库文件，并初始化了一个DOM容器用来放置图表[^2]。 ```html <div id="main" style="width: 600px;height:400px;"></div> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> ``` #### 初始化图表实例并配置选项 接下来定义图表的具体属性和数据源，这里采用`series`中的`radius`参数控制内外层半径比例，以此达到子母效果。 ```javascript var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构' }, tooltip : { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series : [ { 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:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ] }; if (option && typeof option === 'object') { myChart.setOption(option); } ``` 此段代码展示了如何利用ECharts构建一个简单的子母饼图，其中最关键的部分在于设置了`series.radius=['40%', '70%']`使得图表呈现出内外两层的效果。 ### Tableau环境下制作子母饼图指南 如果偏好使用商业智能工具Tableau，则可以根据特定需求定制更加复杂的子母饼图。具体步骤涉及创建额外维度作为辅助字段以支持多级分类视图，之后再通过调整图形布局使各组件相互叠加形成所需的视觉呈现[^3]。 例如，先建立一个新的计算字段命名为“记录1”，接着复制该字段两次至行分隔区；随后针对每一个副本分别指定其表现形式——上方的小型独立饼图负责体现细粒度的比例分配状况，下方较大的则汇总总体数值信息。最后一步就是同步两者坐标轴并将不必要的装饰元素移除以便清晰表达核心内容。