123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145 |
- export default {
- data() {
- return {
- // 边带光标
- sidebandCursorVisible: false,
- sidebandCursorPoints: [],
- sidebandCursorSeries: null,
- };
- },
- mounted() {},
- beforeDestroy() {},
- methods: {
- // 边带光标
- enableSidebandCursor() {
- this.sidebandCursorVisible = true;
- // 添加鼠标移动事件监听
- this.chartInstance.getZr().on("mousemove", this.handleSidebandCursorMove);
- },
- disableSidebandCursor() {
- this.sidebandCursorVisible = false;
- // 移除鼠标移动事件监听
- this.chartInstance
- .getZr()
- .off("mousemove", this.handleSidebandCursorMove);
- // 移除边带光标
- this.removeSidebandCursor();
- },
- handleSidebandCursorMove(event) {
- if (!this.sidebandCursorVisible) return;
- // 获取鼠标位置对应的X值
- const pointInGrid = this.chartInstance.convertFromPixel(
- { seriesIndex: 0 },
- [event.offsetX, event.offsetY]
- );
- const xValue = pointInGrid[0];
- // 生成3个光标点(中心、左、右)
- this.sidebandCursorPoints = [
- { xAxis: xValue - 5, val: (xValue - 5).toFixed(2) }, // 左边带
- { xAxis: xValue, val: xValue.toFixed(2) }, // 中心
- { xAxis: xValue + 5, val: (xValue + 5).toFixed(2) }, // 右边带
- ];
- this.updateSidebandCursor();
- },
- updateSidebandCursor() {
- if (this.sidebandCursorPoints.length < 3) return;
- // 获取当前图表选项
- const option = this.chartInstance.getOption();
- // 创建新的系列配置
- this.sidebandCursorSeries = {
- type: "line",
- id: "SIDEBAND_CURSOR",
- silent: true, // 禁止系列响应事件
- markLine: {
- silent: true,
- lineStyle: {
- color: "red",
- type: "dashed",
- width: 1,
- },
- symbol: ["none", "none"],
- label: {
- show: true,
- position: "start",
- formatter: (params) => params.data.val,
- color: "red",
- },
- data: this.sidebandCursorPoints.map((point) => ({
- xAxis: point.xAxis,
- val: point.val,
- })),
- },
- markArea: {
- silent: true,
- itemStyle: {
- color: "rgba(255, 0, 0, 0.2)", // 红色半透明背景
- },
- data: [
- // 左侧区域(左线到中线)
- [
- {
- xAxis: this.sidebandCursorPoints[0].xAxis,
- yAxis: "min", // 从Y轴最小值开始
- },
- {
- xAxis: this.sidebandCursorPoints[1].xAxis,
- yAxis: "max", // 到Y轴最大值结束
- },
- ],
- // 右侧区域(中线到右线)
- [
- {
- xAxis: this.sidebandCursorPoints[1].xAxis,
- yAxis: "min",
- },
- {
- xAxis: this.sidebandCursorPoints[2].xAxis,
- yAxis: "max",
- },
- ],
- ],
- },
- };
- // 更新图表(保留原有系列)
- const otherSeries = option.series.filter(
- (s) => s.id !== "SIDEBAND_CURSOR"
- );
- this.chartInstance.setOption(
- {
- series: [...otherSeries, this.sidebandCursorSeries],
- },
- {
- replaceMerge: ["series"], // 关键配置:只替换series
- notMerge: false,
- }
- );
- },
- removeSidebandCursor() {
- // 获取当前选项
- const option = this.chartInstance.getOption();
- // 过滤掉边带光标系列
- const series = option.series.filter((s) => s.id !== "SIDEBAND_CURSOR");
- // 更新图表
- this.chartInstance.setOption(
- {
- series: series,
- },
- { replaceMerge: "series" }
- );
- this.sidebandCursorPoints = [];
- },
- },
- };
|