echarts, 点击点且保持选中高亮的状态

3,225 阅读1分钟

需求背景:需要给予数据点点击事件,且保持选中高亮的状态(类似于单选选中的状态)

image.png

给予数据点点击事件,去赋予数据:

image.png

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属性,点击时保持选中高亮的状态:

image.png

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: []
  },
}]