export default { data() { return { // 谐波光标 harmonicCursorVisible: false, harmonicCursorPoints: [], harmonicCursorSeries: null, }; }, mounted() {}, beforeDestroy() {}, methods: { enableHarmonicCursor() { this.harmonicCursorVisible = true; this.chartInstance.getZr().on("click", this.handleHarmonicCursorClick); }, // 禁用谐波光标 disableHarmonicCursor() { this.harmonicCursorVisible = false; this.chartInstance.getZr().off("click", this.handleHarmonicCursorClick); this.removeHarmonicCursor(); }, handleHarmonicCursorClick(event) { if (!this.harmonicCursorVisible) return; // 获取点击位置对应的X值 const pointInGrid = this.chartInstance.convertFromPixel( { seriesIndex: 0 }, [event.offsetX, event.offsetY] ); const baseX = pointInGrid[0]; // 生成1-6倍频的X坐标 this.harmonicCursorPoints = []; for (let i = 1; i <= 6; i++) { const xValue = baseX * i; const closestIndex = this.findClosestIndex(xValue); this.harmonicCursorPoints.push({ xAxis: xValue, multiple: i, yValue: this.envelopeList.y[closestIndex]?.toFixed(2) || "0", }); } this.updateHarmonicCursor(); }, // 更新谐波光标显示 updateHarmonicCursor() { // 创建谐波光标系列 this.harmonicCursorSeries = { type: "line", id: "HARMONIC_CURSOR", silent: true, markLine: { silent: true, lineStyle: { color: "#FFA500", // 橙色表示谐波光标 type: "dashed", width: 1, }, symbol: ["none", "none"], label: { show: true, position: "start", formatter: (params) => `${params.data.multiple}X\n${params.data.yValue}`, color: "#FFA500", backgroundColor: "rgba(255,255,255,0.8)", padding: [2, 4], borderRadius: 3, }, data: this.harmonicCursorPoints.map((point) => ({ xAxis: point.xAxis, multiple: point.multiple, yValue: point.yValue, })), }, }; // 更新图表 const option = this.chartInstance.getOption(); const otherSeries = option.series.filter( (s) => s.id !== "HARMONIC_CURSOR" ); this.chartInstance.setOption( { series: [...otherSeries, this.harmonicCursorSeries], }, { replaceMerge: ["series"], notMerge: false, } ); }, // 移除谐波光标 removeHarmonicCursor() { const option = this.chartInstance.getOption(); const series = option.series.filter((s) => s.id !== "HARMONIC_CURSOR"); this.chartInstance.setOption({ series }, { replaceMerge: ["series"] }); this.harmonicCursorPoints = []; }, }, };