vue3 使用Echarts 的 dataZoom 滑动效果 type: ‘inside‘或type: ‘slider‘时无效果以及悬浮层不显示

1、使用Echarts 的 dataZoom 滑动效果无效果

import * as echarts from 'echarts';
let myChart = ref(null);
let option = {
  // color: ["#fff"],
  title: {
    text: "",
    textStyle: {
      fontSize: '14px'
    },
    padding: [5,5,5,20]
  },
  tooltip: {
    trigger: "axis",
    show: true, // 鼠标点击显示数据的样式
    showDelay: 0, //显示延时，添加显示延时可以避免频繁切换
    // hideDelay: 50,//隐藏延时
    transitionDuration: 0, //动画变换时长
    backgroundColor: "#0e163a", //背景颜色（此时为默认色）
    borderRadius: 8, //边框圆角
    padding: 5, // [5, 10, 15, 20] 内边距
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
  },
  grid: {
    top: "15%",
    left: "1%",
    right: "5%",
    bottom: "2%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      // gridIndex: 0,
      boundaryGap: true,
      alignWithLabel: true,
      // data: this.xData, // x轴数据
      splitNumber: 5,
      minInterval: 1,
      nameTextStyle: {
        width: 10,
      },
      // inverse: true, // 倒过来显示，先从x轴最右边显示
      axisLabel: {
        showMaxLabel: true,
        // formatter: '{value}',
        formatter: function (value) {
          // 横轴文字显示换行回调
          var newParamsName = "";
          var paramsNameNumber = value.length;
          var provideNumber = 11; // 一行显示几个字
          var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
          if (paramsNameNumber > provideNumber) {
            for (var p = 0; p < rowNumber; p++) {
              var tempStr = "";
              var start = p * provideNumber;
              var end = start + provideNumber;
              if (p == rowNumber - 1) {
                tempStr = value.substring(start, paramsNameNumber);
              } else {
                tempStr = value.substring(start, end) + "\n";
              }
              newParamsName += tempStr;
            }
          } else {
            newParamsName = value;
          }
          return newParamsName;
        },
        // textStyle: {
        //   color: "#fff",
        // },
        // interval: this.termActive == "1" ? 800 : this.termActive == "2" ? 1100 : this.termActive == "3" ? 1500 : this.termActive == "4" ? 2000 : 3000// 刻度间隔100条数据
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
      axisLabel: {
        formatter: "{value}",
        // textStyle: {
        //   color: "#fff",
        // },
      },
    },
  ],
  dataZoom: [
    {
      type: 'inside',
      start: 65,
      end: 85
    }
  ],
  series: [
    {
      // name: this.tabName, // 鼠标点击展示的数据标题
      type: "line",
      stack: "",
      smooth: true,
      lineStyle: {
        width: 2,
        // color: "#fff",
      },
      showSymbol: false,
      emphasis: {
        focus: "series",
      },
      // data: this.yData // 值
    },
  ],
};
const initCharts = () => {
  nextTick(() => {
    if(!myChart.value) {
    } else {
      myChart.value.dispose();
    }
    myChart.value = echarts.init(document.getElementById(`echartBox${activeKey.value}`));
    console.log(myChart.value);
    if(myChart.value) {
      option && myChart.setOption(option);
    }
  });
}

2、打印出的效果为Proxy：

3、效果图：

4、两种解决方式，第一种：proxy对象可能不兼容鼠标事件，使用markRaw标记成不是响应式的对象；第二种：echarts不绑定响应式；但原理是一样的：就是不要做成响应式的，echarts尽量不要放到ref，reative里报包着，影响性能，如果放，则使用markRaw标记成不是响应式的

5、第一种： 使用 markRaw

myChart.value = markRaw(echarts.init(document.getElementById(`echartBox${activeKey.value}`)));
console.log(myChart.value);

6、第二种：不绑定响应式 – 完整代码

import * as echarts from 'echarts';
let option = {
  // color: ["#fff"],
  title: {
    text: "",
    textStyle: {
      fontSize: '14px'
    },
    padding: [5,5,5,20]
  },
  tooltip: {
    trigger: "axis",
    show: true, // 鼠标点击显示数据的样式
    showDelay: 0, //显示延时，添加显示延时可以避免频繁切换
    // hideDelay: 50,//隐藏延时
    transitionDuration: 0, //动画变换时长
    backgroundColor: "#0e163a", //背景颜色（此时为默认色）
    borderRadius: 8, //边框圆角
    padding: 5, // [5, 10, 15, 20] 内边距
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
  },
  grid: {
    top: "15%",
    left: "1%",
    right: "5%",
    bottom: "2%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      // gridIndex: 0,
      boundaryGap: true,
      alignWithLabel: true,
      // data: this.xData, // x轴数据
      splitNumber: 5,
      minInterval: 1,
      nameTextStyle: {
        width: 10,
      },
      // inverse: true, // 倒过来显示，先从x轴最右边显示
      axisLabel: {
        showMaxLabel: true,
        // formatter: '{value}',
        formatter: function (value) {
          // 横轴文字显示换行回调
          var newParamsName = "";
          var paramsNameNumber = value.length;
          var provideNumber = 11; // 一行显示几个字
          var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
          if (paramsNameNumber > provideNumber) {
            for (var p = 0; p < rowNumber; p++) {
              var tempStr = "";
              var start = p * provideNumber;
              var end = start + provideNumber;
              if (p == rowNumber - 1) {
                tempStr = value.substring(start, paramsNameNumber);
              } else {
                tempStr = value.substring(start, end) + "\n";
              }
              newParamsName += tempStr;
            }
          } else {
            newParamsName = value;
          }
          return newParamsName;
        },
        // textStyle: {
        //   color: "#fff",
        // },
        // interval: this.termActive == "1" ? 800 : this.termActive == "2" ? 1100 : this.termActive == "3" ? 1500 : this.termActive == "4" ? 2000 : 3000// 刻度间隔100条数据
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
      axisLabel: {
        formatter: "{value}",
        // textStyle: {
        //   color: "#fff",
        // },
      },
    },
  ],
  dataZoom: [
    {
      type: 'inside',
      start: 65,
      end: 85
    }
  ],
  series: [
    {
      // name: this.tabName, // 鼠标点击展示的数据标题
      type: "line",
      stack: "",
      smooth: true,
      lineStyle: {
        width: 2,
        // color: "#fff",
      },
      showSymbol: false,
      emphasis: {
        focus: "series",
      },
      // data: this.yData // 值
    },
  ],
};
let myChart = null;
const initCharts = () => {
  nextTick(() => {
    if(!myChart) {
    } else {
      myChart.dispose();
    }
    myChart = echarts.init(document.getElementById(`echartBox${activeKey.value}`));
    if(myChart) {
      option && myChart.setOption(option);
    }
  });
}

5、打印结果：

5、实现效果：

全世界都在下雨，就像走到哪儿，我都在想你！