在使用
ECharts 绘制
饼图时，默认情况下 `
legend` 和 `series` 并不会自动对齐到同一水平线上。如果希望将它们放在同一行显示，可以调整布局样式以及定位设置。
以下是实现的具体步骤及代码示例：
---
### 核心思路
1. **手动调整
Legend 的位置**
设置 `
legend.top` 或者 `
legend.bottom` 属性，并结合 `left`, `right` 等属性来微调其相对于整个画布的位置。
2. **控制 Series 的中心点偏移**
修改
饼图的圆心坐标 (`center`) 来适应与
legend 对齐的需求。
3. **CSS 布局优化（可选）**
可以通过外部 CSS 控制容器的整体布局效果，确保视觉上更美观。
---
### 示例代码
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
ECharts 饼图 - 同一水平线</title>
<script src="https://cdn.jsdelivr.net/npm/
echarts/dist/
echarts.min.js"></script>
<style>
#main {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
var chartDom = document.getElementById('main');
var myChart =
echarts.init(chartDom);
var option = {
// 左侧放置
图例 (
Legend)，右侧留出空间给
饼图展示
legend: {
orient: 'vertical', // 垂直排列
top: 'middle', // 垂直居中对齐
right: '75%', // 距离右侧约 75%
itemWidth: 25, //
图例标记宽度
itemHeight: 14 //
图例标记高度
},
series: [{
name: '访问来源',
type: 'pie',
radius: ['40%', '60%'], // 设定内外圈的比例
center: ['75%', '50%'], // 圆心相对父级 DOM 定位 (%)
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
],
labelLine: {
length: 10,
length2: 15
},
label: {
normal: {
formatter: '{b|{b}}\n{per|({d}%)}', // 自定义标签内容
rich: {
b: {
fontSize: 14,
lineHeight: 30
},
per: {
color: '#eee'
}
}
}
}
}]
};
myChart.setOption(option);
</script>
</body>
</html>
```
---
### 关键点说明
1. **
Legend 放置**
将 `
legend.right` 设置为 `'75%'` 表示距离右边边界预留一定空间；同时配合 `top: middle` 让它垂直方向上靠近中间。
2. **Series 中心调节**
使用 `center=['75%','50%']` 把
饼图放到右半部分中央区域，避免遮挡左侧
图例文字。
3. **其他细节定制**
包含但不限于调整字体、颜色等个性化需求，均可以在对应的字段内进一步修改样式规则。
---
####
本文介绍了如何通过设置Echarts饼图的图例选择模式为`selectedMode: false`来禁用图例点击事件，解决鼠标悬停时值重叠的尴尬问题，从而优化图表的交互体验。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
