当前位置：首页 > news >正文

记录：echarts实现tooltip的某个数据常显和恢复

news 来源：原创 2025/5/18 11:42:37

在这里插入图片描述

<template><div class="com-wapper"><div class="func-btns"><el-button type="primary" plain @click="showPoint('2023')">固定显示2023年数据</el-button><el-button type="success" plain @click="clearFixedTooltip">恢复</el-button></div><div ref="chartRef" class="chart-content"></div></div>
</template><script>
import * as echarts from "echarts";
export default {name: "com-page",components: {},props: {},data() {return {myData: {xData: ["2021", "2022", "2023", "2024", "2025"],dataList: [{name: "概率论",value: [61, 58, 72, 76, 83],},{name: "高等数学",value: [78, 62, 86, 83, 80],},{name: "离散数学",value: [91, 78, 66, 79, 92],},],},myChart: null,option: null,isShow: false,};},mounted() {this.drawingChart();window.addEventListener("resize", this.resize);},methods: {/*** 画图*/drawingChart() {this.myChart = echarts.init(this.$refs.chartRef);this.option = {grid: {containLabel: true,},legend: {data: this.myData.dataList.map((item) => {return {name: item.name,};}),},tooltip: {show: true,trigger: "axis",alwaysShowContent: false,},xAxis: [{type: "category",data: this.myData.xData,boundaryGap: true,},],yAxis: [{splitNumber: 5,min: 0,max: 100,},],series: this.myData.dataList.map((item) => {return {type: "line",data: item.value,name: item.name,smooth: true,showSymbol: true,};}),};this.myChart.setOption(this.option);},/*** 重置图表*/resize() {this.myChart && this.myChart.resize();},/*** 显示固定点的tooltip*/showPoint(point) {let xAxisData = this.myData.xData; // 横轴数据const index = xAxisData.findIndex((item) => item === point);if (index !== -1) {// 显示当前数据tooltipthis.myChart.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: index, // 要显示的数据点索引值});// 修改配置，保持tooltip一直显示this.myChart.setOption({tooltip: {alwaysShowContent: true,},});// 临时禁用鼠标事件this.myChart.getZr().off("globalout");this.myChart.getZr().off("click");this.myChart.getZr().off("mousemove");// 标记一下this.isShow = true;}},/*** 恢复tooltip的正常使用*/clearFixedTooltip() {if (this.isShow) {this.isShow = false;// 取消常显配置this.myChart.setOption({tooltip: {alwaysShowContent: false,},});// 恢复默认交互，重新绑定mousemove和globaloutconst zr = this.myChart.getZr();const that = this;zr.on("mousemove", function (e) {that.myChart._api.dispatchAction({type: "showTip",x: e.offsetX,y: e.offsetY,});});zr.on("globalout", function () {that.myChart._api.dispatchAction({type: "hideTip",});});// 隐藏当前tooltipthis.myChart.dispatchAction({type: "hideTip",});}},},beforeDestroy() {window.removeEventListener("resize", this.resize);this.myChart && this.myChart.dispose();},
};
</script><style lang='scss' scoped>
.com-wapper {height: 100%;.func-btns {text-align: center;}.chart-content {width: 100%;height: 70%;padding-top: 40px;margin-top: 30px;background: rgba(237, 237, 237, 0.2);}
}
</style>