用echarts绘制饼图---绘制嵌套饼图
时间: 2025-04-08 17:15:42 浏览: 37
### 绘制 ECharts 嵌套饼图
要使用 ECharts 绘制嵌套饼图,可以通过配置 `series` 属性中的多个对象实现。每个 `series` 对象代表一个独立的饼图层,通过调整其 `radius` 和 `center` 参数可以分别控制大小和位置。
以下是具体方法:
#### 1. 设置基本结构
ECharts 的图表初始化通常需要指定 DOM 容器以及基础配置项。对于嵌套饼图来说,核心在于定义多组 `series` 数据[^1]。
```javascript
// 初始化 echarts 实例
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
// 配置项
var option = {
series: [
// 外层饼图数据
{
type: 'pie',
radius: ['50%', '70%'], // 控制外圈半径范围
center: ['50%', '50%'], // 中心点坐标
data: [
{ value: 40, name: 'A' },
{ value: 60, name: 'B' }
]
},
// 内层饼图数据
{
type: 'pie',
radius: ['20%', '40%'], // 控制内圈半径范围
center: ['50%', '50%'],
data: [
{ value: 30, name: 'C' },
{ value: 70, name: 'D' }
]
}
]
};
myChart.setOption(option);
```
上述代码展示了如何创建两个不同层次的饼图,并通过 `radius` 调整内外圆环的比例关系。
#### 2. 自定义样式
为了增强可视化效果,还可以进一步自定义颜色、标签显示等内容。例如,添加 `label` 或者修改默认主题配色方案。
```javascript
{
label: {
show: true,
formatter: '{b}: {c} ({d}%)', // 显示名称、数值及百分比
fontSize: 14
},
itemStyle: {
color: function(params) {
var colors = ['#ff8a65', '#9ccc65']; // 自定义渐变色彩数组
return colors[params.dataIndex];
}
}
}
```
以上片段说明了如何利用回调函数动态分配每一块扇区的颜色。
#### 注意事项
- 确保所有 `series` 共享相同的 `center` 值以便保持同心布局。
- 如果存在过多层级,则需合理规划各部分占比以免视觉混乱。
阅读全文
相关推荐

















