需求背景:需要给予数据点点击事件,且保持选中高亮的状态(类似于单选选中的状态)
给予数据点点击事件,去赋予数据:
myChart.on('click', function (params) {
const index = props.optionsData.findIndex((item) => params.data[0] === item.data[0]);
console.error('index---', index);
if (index > -1) {
curData.value = props.optionsData[index];
};
});
在series里添加select属性,点击时保持选中高亮的状态:
series: [{
type: 'line',
symbol: 'circle',
symbolSize: 12, //折线点的大小
label: {
normal: {
position: 'top'
},
},
lineStyle: {
normal: {
width: 0,
},
},
// 折线拐点的样式
itemStyle: {
color: "#d8d8d8",
borderColor: "#ffffff",
borderWidth: 1,
},
// 选中状态
select: {
itemStyle: {
color: "#0082f9",
borderColor: "#ffffff",
borderWidth: 1,
}
},
selectedMode: "single",
data: [],
markArea: { //标记区域范围设置背景颜色
data: []
},
}]