echarts折线图 鼠标悬浮单个 图例文字选中时 文字颜色配置
时间: 2024-10-09 13:04:49 浏览: 58
EasyUI表格合并,及echarts折线图,导出折线图为图片
ECharts是一个强大的数据可视化库,它的折线图通过`series`选项中的`emphasis`属性可以设置鼠标悬停时的效果。对于单个图例文字选中时的颜色配置,你可以利用`legend`部分的`select`事件和`itemStyle`选项。
在`legend`部分添加`select`事件处理器,并在其中修改选中项的文字样式,例如:
```javascript
myChart.on('legend.select', function (params) {
var selectedSeriesIndex = params.selected;
myChart.setOption({
legend: {
itemStyle: {
normal: { color: '#000' }, // 默认颜色
emphasis: { color: 'red' } // 选中时颜色
},
select: {
triggered: true, // 开启图例选中状态
selected: selectedSeriesIndex // 设置选中系列索引
}
}
});
});
```
在这个例子中,当用户点击图例文字时,对应折线图的颜色会变为红色。正常情况下,文字颜色默认为黑色。
阅读全文