echarts legend样式
时间: 2023-10-05 13:14:54 浏览: 134
ECharts 的图例(legend)可以通过配置项来修改样式。以下是一些常见的图例样式修改:
1. 修改图例位置:
```javascript
legend: {
left: 'center', // 图例水平居中
bottom: 10, // 图例垂直底部距离为 10
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
```
2. 修改图例字体样式:
```javascript
legend: {
textStyle: {
color: '#333', // 字体颜色
fontSize: 14, // 字体大小
fontWeight: 'normal' // 字体粗细
}
},
```
3. 修改图例图标大小:
```javascript
legend: {
itemWidth: 20, // 图例图标宽度
itemHeight: 10 // 图例图标高度
},
```
4. 修改图例背景色:
```javascript
legend: {
backgroundColor: '#eee' // 背景色
},
```
5. 修改图例边框:
```javascript
legend: {
borderColor: '#ccc', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: 5 // 边框圆角
},
```
这些样式可以根据实际需求进行自由组合,达到更好的显示效果。
阅读全文