echarts修改legend参数
时间: 2025-01-14 07:39:27 浏览: 75
### ECharts Legend 配置详解
ECharts 提供了丰富的 `legend` 属性来定制图例组件的行为和外观。通过调整这些属性可以实现不同样式的图例展示效果。
对于希望设置滚动图例(垂直或水平),可以通过如下方式配置:
#### 基本配置项说明
- **pageButtonPosition**: 设置分页按钮的位置,默认为 `'end'`,也可以设为 `'start'` 或者其他自定义位置[^1]。
```javascript
option = {
legend: {
pageButtonPosition: 'end', // 将分页按钮放置于末端
type: 'scroll',
orient: 'vertical'
}
};
```
当需要创建一个带有滚动功能的垂直方向图例外观时,上述代码片段展示了如何指定页面按钮位于图例列表之后显示的方式。
#### 完整实例演示
下面给出一段完整的 JavaScript 代码用于初始化带滚动条的竖直排列图例图表:
```html
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0;">
<div id="main" style="height: 100%"></div>
<script type="text/javascript">
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {},
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
data: (function () {
var list = [];
for (var i = 0; i < 100; i++) { // 创建大量数据模拟滚动需求
list.push('data item ' + i);
}
return list;
})(),
pageButtonItemGap: 5, // 图例翻页按钮之间的间距
pageButtonPosition: 'end', // 分页按钮位置[end/start/custom]
pageIconColor: '#7cb5ec', // 默认选中的颜色
pageIconInactiveColor: '#ccc',//未被激活的颜色
pageFormatter: '{current}/{total}',//当前页码格式化器
selectedMode : false // 是否开启点击切换系列状态的功能
},
series: [{
name: '',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'outside'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
data:(function (){
var datas=[];
for(var j=0;j<100;j++){
datas.push({value:j*1,name:'data '+j});
};
return datas;
})()
}]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
```
此段 HTML 和 JavaScript 组合实现了具有滚动特性的垂直布局图例,并且包含了详细的注释帮助理解各个部分的作用。
阅读全文
相关推荐



















