echarts柱状图高亮
时间: 2023-11-10 13:03:49 浏览: 129
要实现 echarts 柱状图的高亮效果,可以通过设置 series 中的 emphasis 属性来实现。具体来说,可以在 emphasis 中设置 itemStyle 属性,来定义高亮时柱子的样式,例如颜色、边框等。同时,也可以设置 label 属性,来定义高亮时柱子上的标签样式。
以下是一个示例代码:
```
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
emphasis: {
itemStyle: {
color: '#FFC107',
borderColor: '#000',
borderWidth: 2
},
label: {
show: true,
position: 'top',
color: '#000',
fontSize: 16
}
}
}]
};
```
以上代码中,当鼠标悬浮在某个柱子上时,该柱子会高亮显示,颜色变为 #FFC107,边框颜色为黑色,边框宽度为 2 像素。同时,该柱子上方会显示标签,字体颜色为黑色,字号为 16 像素。
阅读全文