本文主要是介绍echarts 点击(柱图、折线图)图表外的按钮，高亮图表中的某些柱子何点位，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
需求：实现当用户点击 ECharts 中的某个图表之外的按钮时，图表中的两个折线点的图形颜色高亮显示或者两个柱子高亮显示，实现这个功能其实很简单，ECharts 官网有 Api 可实现，方法如下：
// 如果要高亮系列：
dispatchAction({type: 'highlight'// 用 index 或 id 或 name 来指定系列。// 可以使用数组指定多个系列。seriesIndex?: number | number[],seriesId?: string | string[],seriesName?: string | string[]// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项dataIndex?: number | number[],// 可选，数据项名称，在有 dataIndex 的时候忽略name?: string | string[],
});简单示例实现代码如下：
创建一个有柱图和折线图的组件 lineChart.vue
<template><div><div ref="chart" style="height: 420px"></div><div style="display: flex; justify-content: space-around"><button @click="showPoints1">高亮显示1个点</button><button @click="showPoints2">高亮显示2个点</button><button @click="showPoints3">高亮显示1个柱子1个点</button><button @click="showPoints4">高亮显示2个柱子2个点</button></div></div>
</template> <script>
export default {data() {return {chartInstance: null,currentHighLigh: {seriesIndex: [],dataIndex: []}};},mounted() {this.setChartOption();},methods: {setChartOption() {this.chartInstance = this.$echarts.init(this.$refs.chart);const option = {xAxis: {type: "category",data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},yAxis: {type: "value",},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: "line",smooth: true,symbolSize: 20,itemStyle: {normal: {color: "#00FFF6",borderColor: "#00FFF6",borderWidth: 2,lineStyle: {color: "#00FFF6", // 折线颜色},},emphasis: {color: "red", // 鼠标悬浮时圆点颜色},},},{type: "bar",barWidth: 5,tooltip: {show: false,},label: {show: false,position: "top",color: "#fff",},itemStyle: {normal: {color: "#1cfffb",lineStyle: {width: 5,color: "#1cfffb", // 折线颜色},},emphasis: {color: "red", // 鼠标悬浮时圆点颜色},},data: [820, 932, 901, 934, 1290, 1330, 1320],},],};option && this.chartInstance.setOption(option);},highlightPoints(seriesIndex, dataIndexes) {this.chartInstance.dispatchAction({type: "highlight",seriesIndex: seriesIndex,dataIndex: dataIndexes,});},showPoints1() {// 如果有高亮，先取消高亮this.hiddenPoints();this.currentHighLigh = {seriesIndex: [0],dataIndex: [1]}// 假设我们要高亮第一个系列中的第一个和第三个点// this.highlightPoints(0, [0, 2]);// 假设我们要高亮第二个系列中的第二个和第四个点// this.highlightPoints(1, [1, 3]);// 假设我们要高亮第一个系列和第二个系列中的第一个和第三个点// this.highlightPoints([0, 1], [0, 2]);// 假设我们要高亮第一个系列中的第二个点this.highlightPoints(0, 1);},showPoints2() {// 如果有高亮，先取消高亮this.hiddenPoints();this.currentHighLigh = {seriesIndex: 0,dataIndex: [0, 2]}// 假设我们要高亮第一个系列中的第一个和第三个点this.highlightPoints(0, [0, 2]);},showPoints3() {// 如果有高亮，先取消高亮this.hiddenPoints();this.currentHighLigh = {seriesIndex: [0, 1],dataIndex: [2]}// 假设我们要高亮第二个系列中的第三个柱子this.highlightPoints([0, 1], 2);},showPoints4() {// 如果有高亮，先取消高亮this.hiddenPoints();this.currentHighLigh = {seriesIndex: [0, 1],dataIndex: [0, 2]}// 假设我们要高亮第一个系列和第二个系列中的第一个和第三个点this.highlightPoints([0, 1], [0, 2]);},// 取消高亮hiddenPoints() {// 如取消高亮系列：this.chartInstance.dispatchAction({type: 'downplay',// 可以使用数组指定多个系列。seriesIndex: this.currentHighLigh.seriesIndex,// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项dataIndex: this.currentHighLigh.dataIndex})}},
};
</script> <style scoped>
/* 你的样式 */
</style>欢迎收看！
这篇关于echarts 点击(柱图、折线图)图表外的按钮，高亮图表中的某些柱子何点位的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
