echarts实现markLine可拖拽并获取拖拽后的点位数据

快乐是Happy
228 阅读3分钟

多个个数据源markLine拖拽

<!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset="utf-8" />
    <title>ECharts 可拖拽标记线示例</title>
  </head>
  <body style="height: 100%; margin: 0">
    <div id="container" style="width: 80%; height: 100%"></div>

    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script>
      var chart = echarts.init(document.getElementById("container"));

      // 假设的数据源
      var dataSource = {
        ScatterResults: [
          {
            Id: 643734388158725,
            SessionId: "4DF533804B901138",
            ItemName: "L2-1-S8_PSET101_6kgf*cm",
            Y_USL: 6,
            Y_LSL: 5,
            X_LSL: 2,
            X_USL: 10,
            Items: [
              {
                JobId: 619176891240709,
                X: 0,
                Y: 5.01,
                Result: "Fail",
                StopTime: "2024-12-05 00:57:08",
              },
              {
                JobId: 619480151851269,
                X: 0,
                Y: 5.01,
                Result: "Fail",
                StopTime: "2024-12-05 21:31:05",
              },
              {
                JobId: 621531555860741,
                X: 0,
                Y: 5.01,
                Result: "Fail",
                StopTime: "2024-12-11 16:38:20",
              },
            ],
          },
          {
            Id: 643734388474117,
            SessionId: "4DF533804B901138",
            ItemName: "L2-1-S3_PSET101_6kgf*cm",
            Y_USL: 6.57,
            Y_LSL: 4.61,
            X_LSL: 36,
            X_USL: 60,
            Items: [
              {
                JobId: 621140938801413,
                X: 0,
                Y: 0.35,
                Result: "Fail",
                StopTime: "2024-12-10 14:08:59",
              },
              {
                JobId: 619098613825797,
                X: 50,
                Y: 6.16,
                Result: "Pass",
                StopTime: "2024-12-04 19:38:32",
              },
              {
                JobId: 619098713604357,
                X: 70,
                Y: 6.05,
                Result: "Pass",
                StopTime: "2024-12-04 19:38:56",
              },
            ],
          },
        ],
      };

      // 处理数据源，为每个系列创建 markLine 数据
      var seriesData = dataSource.ScatterResults.map(function (group) {
        return {
          name: group.ItemName,
          type: "scatter",
          data: group.Items.map(function (item) {
            return [item.X, item.Y];
          }),
          markLine: {
            data: [
              { name: "X_LSL", xAxis: group.X_LSL, title: group.ItemName, id: group.Id },
              { name: "X_USL", xAxis: group.X_USL, title: group.ItemName, id: group.Id },
              { name: "Y_LSL", yAxis: group.Y_LSL, title: group.ItemName, id: group.Id },
              { name: "Y_USL", yAxis: group.Y_USL, title: group.ItemName, id: group.Id },
            ],
            symbol: "none",
            label: {
              show: true,
              formatter: "{a}: {b}: {c}",
            },
            lineStyle: {
              type: "solid",
            },
            emphasis: {
              label: {
                show: true,
              },
            },
          },
        };
      });

      var option = {
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "value",
        },
        series: seriesData,
      };

      chart.setOption(option);

      // 添加拖拽事件
      function onMarkLineDrag(params) {
        console.log("🚀 ~ onMarkLineDrag ~ params:", params);

        const obj = dataSource.ScatterResults.find((item) => item.Id === params.data.id);
        console.log("🚀 ~ onMarkLineDrag ~ obj:", obj);

        if (params.componentType === "markLine") {
          var seriesIndex = params.seriesIndex;
          var dataIndex = params.dataIndex;
          var isXAxis = option.series[seriesIndex].markLine.data[dataIndex].hasOwnProperty("xAxis");

          // 初始化拖拽参数数据，从原始对象中获取初始值
          const dragParamsData = {
            sessionId: obj.SessionId,
            y_Usl: obj.Y_USL,
            y_Lsl: obj.Y_LSL,
            x_Usl: obj.X_USL,
            x_Lsl: obj.X_LSL,
          };

          function onMouseMove(mouseMoveEvent) {
            var endPoint = mouseMoveEvent.offsetX;
            var endPointY = mouseMoveEvent.offsetY;
            var coord = chart.convertFromPixel({ seriesIndex: seriesIndex }, [endPoint, endPointY]);

            // 根据拖拽的是X轴还是Y轴的标记线来更新数据
            if (isXAxis) {
              option.series[seriesIndex].markLine.data[dataIndex].xAxis = coord[0];
            } else {
              option.series[seriesIndex].markLine.data[dataIndex].yAxis = coord[1];
            }

            chart.setOption(option);
          }

          function onMouseUp(mouseUpEvent) {
            document.removeEventListener("mousemove", onMouseMove);
            document.removeEventListener("mouseup", onMouseUp);

            // 获取拖拽后的点位数据
            var finalCoord = chart.convertFromPixel({ seriesIndex: seriesIndex }, [
              mouseUpEvent.offsetX,
              mouseUpEvent.offsetY,
            ]);
            var finalValue = isXAxis ? finalCoord[0].toFixed(2) : finalCoord[1].toFixed(2);

            // 根据params.name判断并赋值
            switch (params.name) {
              case "X_USL":
                dragParamsData.x_Usl = finalValue;
                break;
              case "X_LSL":
                dragParamsData.x_Lsl = finalValue;
                break;
              case "Y_USL":
                dragParamsData.y_Usl = finalValue;
                break;
              case "Y_LSL":
                dragParamsData.y_Lsl = finalValue;
                break;
              default:
                // 如果没有匹配到name，不做任何操作
                break;
            }

            // 在这里可以使用dragParamsData进行后续操作，例如发送到服务器等
            console.log("拖拽后的参数数据：", dragParamsData);
          }

          document.addEventListener("mousemove", onMouseMove);
          document.addEventListener("mouseup", onMouseUp);
        }
      }

      onMarkLineClick = function (params) {
        console.log("🚀 ~ params11111111111:", params);
      };

      // 绑定拖拽事件
      chart.on("mousedown", onMarkLineDrag);
      chart.on("click", onMarkLineClick);

      window.addEventListener("resize", function () {
        chart.resize();
      });
    </script>
  </body>
</html>

单个数据源markLine拖拽

<!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset="utf-8" />
    <title>ECharts 可拖拽标记线示例</title>
  </head>
  <body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>

    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script>
      var chart = echarts.init(document.getElementById("container"));

      var markLineData = [
        { name: "X轴标线1", xAxis: 20 },
        { name: "X轴标线2", xAxis: 40 },
        { name: "Y轴标线1", yAxis: 10 },
        { name: "Y轴标线2", yAxis: 40 },
      ];

      var option = {
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "scatter",
            data: [
              [10, 20],
              [30, 40],
              [50, 60],
            ],
            markLine: {
              data: markLineData,
              symbol: "none",
              label: {
                show: true,
                formatter: "{b}: {c}",
              },
              lineStyle: {
                type: "solid",
                color: "#333",
              },
              emphasis: {
                label: {
                  show: true,
                },
              },
            },
          },
        ],
      };

      chart.setOption(option);

      // 添加拖拽事件
      function onMarkLineDrag(params) {
        if (params.componentType === "markLine") {
          var dataIndex = params.dataIndex;
          var isXAxis = markLineData[dataIndex].hasOwnProperty('xAxis');

          function onMouseMove(mouseMoveEvent) {
            var endPoint = mouseMoveEvent.offsetX;
            var endPointY = mouseMoveEvent.offsetY;
            var coord = chart.convertFromPixel({ seriesIndex: 0 }, [endPoint, endPointY]);

            // 根据拖拽的是X轴还是Y轴的标记线来更新数据
            if (isXAxis) {
              markLineData[dataIndex].xAxis = coord[0];
            } else {
              markLineData[dataIndex].yAxis = coord[1];
            }

            chart.setOption({
              series: [
                {
                  markLine: {
                    data: markLineData,
                  },
                },
              ],
            });
          }

          function onMouseUp(mouseUpEvent) {
            document.removeEventListener("mousemove", onMouseMove);
            document.removeEventListener("mouseup", onMouseUp);

            // 获取拖拽后的点位数据
            var finalCoord = chart.convertFromPixel({ seriesIndex: 0 }, [
              mouseUpEvent.offsetX,
              mouseUpEvent.offsetY,
            ]);
            var finalValue = isXAxis ? finalCoord[0] : finalCoord[1];
            console.log('拖拽后的点位数据：', finalValue);
          }

          document.addEventListener("mousemove", onMouseMove);
          document.addEventListener("mouseup", onMouseUp);
        }
      }

      chart.on("mousedown", onMarkLineDrag);

      window.addEventListener("resize", function () {
        chart.resize();
      });
    </script>
  </body>
</html>
avatar
文章
阅读
粉丝