<think>我们面对的问题是如何在ECharts中实现饼图显示
柱状图的图例（legend），并展示横
坐标值。根据用户描述，用户希望在一个图表中同时展示饼图和
柱状图，并且共享图例或
坐标轴信息。分析需求：1.饼图显示
柱状图的legend：通常饼图和
柱状图是两种不同的图表类型，它们的图例数据来源不同。但用户希望饼图能使用
柱状图的图例，这意味着我们需要让两种图表共享同一份图例数据。2.展示横
坐标值：横
坐标值通常是
柱状图（或条形图）的
坐标轴标签，而饼图没有
坐标轴。因此，这里可能是指
柱状图的横
坐标值需要显示，同时饼图要与之关联。
解决方案思路：我们可以使用ECharts的“多图表联动”功能，或者在一个图表实例中组合使用饼图和
柱状图（例如使用grid和饼图的位置调整）。但更常见的是使用多个图表实例进行联动，或者使用ECharts的“dataset”和“多系列”来组合图表。然而，用户要求饼图显示
柱状图的图例，这通常意味着我们希望饼图的每个扇形对应
柱状图中的一根
柱子（即同一个数据项），并且图例是
柱状图的数据项名称（即横
坐标值）。具体步骤：1.准备一个公共的dataset，包含
柱状图的横
坐标（category）数据和对应的数值（value）数据。2.同时
绘制柱状图和饼图，都使用这个dataset。3.设置图例（legend）为
柱状图的横
坐标值（即category），这样两个图表可以共享同一个图例。4.通过图例的切换同时控制两个图表。注意：ECharts中，饼图的数据格式是{name,value}，
柱状图的数据格式可以是（在category轴上显示name，y轴显示value）。因此，我们可以将同一组数据分别用于
柱状图和饼图。实现示例：假设我们有如下数据：
```javascriptvar data= [{name: '类别1', value:10},{name:'类别2',value:20},{name: '类别3', value:30},{name:'类别4',value:40}
];```我们可以在一个option中同时配置
柱状图和饼图（使用grid划分区域），或者使用两个图表实例联动。这里为了简单，我们使用一个图表实例，通过grid和饼图的位置设置来组合。示例代码（一个图表实例）：
```html<divid="main"style="width:800px;height:600px;"></div>
<script>//基于准备好的dom，初始化echarts实例var myChart =echarts.init
(document.getElementById
('main'
));//数据vardata =[{name: '类别1', value:10},{name:'类别2',value:20},{name: '类别3', value:30},{name:'类别4',value:40}];//提取name数组，用于
柱状图的xAxis.data和图例varnames= data.map
(function
(item
){return item.name;}
);//配置项varoption ={//使用一个公用的图例，数据来自name数组legend: {data: names},//设置网格布局，用于放置
柱状图grid:{left:'3%',right: '55%', //右侧留出空间给饼图top:'10%',bottom: '10%',containLabel: true},//横
坐标轴（
柱状图）xAxis:{type:'category',data:names},//
纵坐标轴（
柱状图）yAxis: {type: 'value'},//系列series: [//
柱状图系列{name: '
柱状图',type: 'bar',data: data.map
(function
(item
){return item.value;}
)},//饼图系列{name:'饼图',type: 'pie',//设置饼图的位置，在右侧center: ['75%', '50%'], //中心点位置（百分比或像素）radius: '40%', //饼图半径data:data,//饼图数据直接使用data数组（每个元素是{name,value}）//饼图的标签显示label:{formatter: '{b}:{c}
({d}%
)'// b是数据项名称，c是数值，d是百分比}}]};//使用刚指定的配置项和数据显示图表。myChart.setOption
(option
);
</script>```在这个配置中：-图例（legend）的数据来自我们提取的names数组，即
柱状图的横
坐标值（也是饼图的数据项名称）。-
柱状图使用xAxis的category轴，数据为names，yAxis为数值轴，
柱状图系列的数据是value数组。-饼图放置在右侧，使用同样的数据（每个数据项包含name和value），饼图的每个扇形对应一个数据项。-当点击图例时，
柱状图和饼图会同时响应（因为图例是公用的，并且两个系列都使用了同样的name）。注意：上述代码中，饼图的位置通过center和radius调整，grid控制
柱状图的区域。如果用户希望
柱状图的横
坐标值（即names）显示在饼图的图例上，那么我们已经实现了：图例显示的就是这些names。另外，用户提到“展示横
坐标值”，在
柱状图中已经通过xAxis显示出来了，而饼图没有横
坐标，但通过图例和标签可以展示同样的信息。引用说明：在ECharts中，组合图表是常见的需求，可以通过合理的配置实现[^1][^2]。相关问题：1.如何在ECharts中实现多个图表的联动？2.ECharts中饼图的标签格式如何自定义？3.如何调整组合图表中各个部分的位置和大小？</think>### ECharts饼图显示
柱状图图例及横
坐标值实现方案
要实现饼图显示
柱状图的图例（legend）并展示横
坐标值，可通过以下步骤实现：
#### 核心思路
1. **共享数据集**：使用同一份数据源驱动饼图和
柱状图
2. **图例联动**：通过`legend`组件的`data`属性统一控制
3. **
坐标轴标签显示**：在
柱状图的`xAxis`中配置横
坐标值
4. **视觉映射**：使用`visualMap`保持颜色一致性
#### 实现代码示例
```html
<div id="chartContainer" style="width: 800px;height:500px;"></div>
<script>
// 初始化图表
const chart = echarts.init
(document.getElementById
('chartContainer'
));
// 公共数据源（
柱状图横
坐标值作为饼图图例）
const data = [
{ name: '类别A', value: 235 },
{ name: '类别B', value: 274 },
{ name: '类别C', value: 190 }
];
// 配置项
const option = {
// 共享图例配置（显示
柱状图横
坐标值）
legend: {
data: data.map
(item => item.name
), // 使用
柱状图横
坐标值
left: 'center',
bottom: 0
},
//
柱状图配置
xAxis: {
type: 'category',
data: data.map
(item => item.name
), // 横
坐标值
axisLabel: { rotate: 30 } // 横
坐标标签旋转防
重叠
},
yAxis: { type: 'value' },
// 饼图配置
series: [
//
柱状图系列
{
type: 'bar',
data: data.map
(item => item.value
),
// 与饼图颜色同步
itemStyle: { color: params => chart.getModel
().getSeries
()[1].getData
().getItemVisual
(params.dataIndex, 'color'
) }
},
// 饼图系列
{
type: 'pie',
radius: '40%',
center: ['75%', '40%'], // 饼图位置
data: data,
label: { show: true, formatter: '{b}: {c}
({d}%
)' }
}
]
};
chart.setOption
(option
);
</script>
```
#### 关键配置说明
1. **图例统一控制**
`legend.data`使用
柱状图的横
坐标值数组，使饼图自动继承这些图例项：
```javascript
legend: {
data: data.map
(item => item.name
) //
柱状图横
坐标值作为图例
}
```
2. **横
坐标值显示**
在
柱状图的xAxis中直接使用数据源的name属性：
```javascript
xAxis: {
type: 'category',
data: data.map
(item => item.name
) // 显示横
坐标值
}
```
3. **颜色同步机制**
通过动态获取饼图颜色应用到
柱状图：
```javascript
itemStyle: {
color: params =>
chart.getModel
()
.getSeries
()[1] // 获取饼图系列
.getData
()
.getItemVisual
(params.dataIndex, 'color'
) // 获取对应颜色
}
```
4. **布局优化**
- 使用`center`调整饼图位置避免
重叠
- `axisLabel.rotate`防止横
坐标文字
重叠
- 图例放在底部
(`bottom:0`
)节省空间
#### 效果说明
1.
柱状图显示完整的横
坐标标签
2. 饼图使用
柱状图的横
坐标值作为图例
3. 点击图例会同时高亮/隐藏两个图表中的对应数据项
4. 颜色保持完全一致，实现视觉统一
> 此方案通过数据绑定和视觉映射实现了图表间的深度联动，符合ECharts的最佳实践[^1][^2]。实际应用中可根据需求调整饼图半径
(`radius`
)、位置
(`center`
)等参数优化布局。
本文介绍如何在Excel中通过添加空白列解决柱状图重叠问题，包括详细步骤与设置方法。
扫一扫
5104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
