echarts的bar情况下的legend有三种类型,要求文字放在图形中间,选中是一种颜色,非选中是一种颜色
时间: 2023-07-16 18:15:15 浏览: 162
可以通过设置legend的textStyle属性来实现文字居中,设置selectedMode为single或multiple来控制选中模式,然后通过设置selected和itemStyle来实现选中和非选中状态下的颜色不同。
以下是一个示例代码:
```javascript
option = {
legend: {
data: ['销量'],
textStyle: {
align: 'center'
},
selectedMode: 'single',
selected: {
'销量': true
},
itemStyle: {
normal: {
color: '#ccc'
},
emphasis: {
color: '#f00'
}
}
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
```
在上述代码中,legend的textStyle属性设置了align为center,使文字居中显示;selectedMode设置为single,表示只能选中一个图例项;selected属性设置了默认选中的项;itemStyle的normal属性设置了非选中状态下的颜色为#ccc,emphasis属性设置了选中状态下的颜色为#f00。
阅读全文