Echarts 滑动时将超出坐标的点设置为边界值

需求

有这样的一个 Echarts 图
想要在初始化的时候把超过 X 轴超过边界的点全部卡在边界的位置
比如 x 轴最小值是 2，最大值是 6，想要在初始化的时候将所有小于 2 的点卡在 2 处显示，超过 6 的点卡在 6 坐标处显示
根据鼠标左右滑动去改坐标左右值以及点的对应变化，效果如下图

实现

首先是正常的初始化 Echarts，在初始化的时候对数据进行处理

 <div id="main" style="width: 600px; height: 400px"></div>
     data() {
          return {
            min: 2,// 坐标最小值
            max: 6,// 坐标最大值
            myChart: null,
            data: [//假设为后端数据
              ["14.616", "7.241", "0.896"],
              ["3.958", "5.701", "0.955"],
              ["2.768", "8.971", "0.669"],
              ["9.051", "9.710", "0.171"],
              ["14.046", "4.182", "0.536"],
              ["12.295", "1.429", "0.962"],
              ["4.417", "8.167", "0.113"],
              ["0.492", "4.771", "0.785"],
              ["7.632", "2.605", "0.645"],
              ["14.242", "5.042", "0.368"],
            ],
          };
        },

     mounted() {
          this.myChart = echarts.init(document.getElementById("main"));
          this.render();
        },

    methods: {
          render() {
            let option = {
              xAxis: {
                min: this.min,
                max: this.max,
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  type: "scatter", // 这是个『散点图』
                  itemStyle: {
                    opacity: 0.8,
                  },
                  symbolSize: function (val) {
                    return val[2] * 40;
                  },
                  data:this.data,
                },
              ],
            };
            // 使用刚指定的配置项和数据显示图表。
            this.myChart.setOption(this.processData(option));
          },

          // 执行数据处理
          processData(option) {
            //  深拷贝一份源数据
            let tempData = this.deepClone(this.data);
            // 处理源数据
            tempData.forEach((item) => {
              if (item[0] < this.min) item[0] = this.min;
              if (item[0] > this.max) item[0] = this.max;
            });
            // 处理完成后给 option 赋值
            option.series[0].data = tempData;
            console.log(this.data);//这里的源数据不会被改变
            return option;
          },

          deepClone(obj) {
            if (obj === null) return null;
            let clone = Object.assign({}, obj);
            Object.keys(clone).forEach(
              (key) =>
                (clone[key] =
                  typeof obj[key] === "object"
                    ? this.deepClone(obj[key])
                    : obj[key])
            );
            if (Array.isArray(obj)) {
              clone.length = obj.length;
              return Array.from(clone);
            }
            return clone;
          },
        },

初始化的时候，执行了如下操作

为图形获取 dom -> render() 函数渲染 > 在render() 函数内部调用 processData() 进行数据处理
值得注意的地方就是 processData() 函数内部使用了深拷贝去克隆了 data 数组,将克隆后的数据遍历，超过最大最小值的数据都赋值为对应的大小值值就 ok

初始化完成后边就是在页面添加监听了
这里就超级简单了
methods 中添加方法，监听用户在 id 为 main 的框中滑动行为是向左还是向右，判断完成后改变 x 坐标大小值

    eListener() {
            const main = document.getElementById("main");
            let start = "";
            main.addEventListener("mousedown", (e) => {
              start = e.x;
            });
            main.addEventListener("mouseup", (e) => {
              // 大于零 则说明向右滑动
              if (e.x - start > 0) {
                this.min += 1;
                this.max += 1;
              }
              if (e.x - start < 0) {
                this.min -= 1;
                this.max -= 1;
              }
            });
          },

在 watch 中进行 监听，因为我们之前已经构建好了数据之间的联系，所以只需要监听到变化调用重新渲染函数即可

    watch: {
          //这里只需要监听 min 或 max 其中之一就好 
          min(newVal, old) {
            this.render()
          },
        },

然后就实现了我们要的效果