Echarts散点图 拖拽布点的功能实现

实现需求：有一组item（设备）需要拖拽到散点图的指定位置，然后在前台展示给客户看

实现技术：主要是通过拖拽组件draggable 和echarts组件实现坐标转换的计算

散点图拖拽点的操作 

1.  
   //this.symbolSize = 20;
2.  
   const that = this;
3.  
    
4.  
   this.myChart.setOption({
5.  
   graphic: that.data.map(function (item, dataIndex) {
6.  
   return {
7.  
   type: "circle",
8.  
   position: that.myChart.convertToPixel("grid", item),
9.  
   shape: {
10.  
    cx: 0,
11.  
    cy: 0,
12.  
    r: that.symbolSize / 2,
13.  
    },
14.  
    invisible: true,
15.  
    draggable: true,
16.  
    ondrag: function () {
17.  
    that.onPointDragging(dataIndex, [
18.  
    this.x,
19.  
    this.y,
20.  
    item[2],
21.  
    item[3],
22.  
    ]);
23.  
    },
24.  
    onmousemove: function () {
25.  
    that.showTooltip(dataIndex);
26.  
    },
27.  
    onmouSEO（(Search Engine Optimization)）ut: function () {
28.  
    that.hideTooltip(dataIndex);
29.  
    },
30.  
    z: 100,
31.  
    };
32.  
    }),
33.  
    series: [
34.  
    {
35.  
    id: "a",
36.  
    data: this.data,
37.  
    },
38.  
    ],
39.  
    });

1.  
   //散点图拖拽点坐标处理方法
2.  
   onPointDragging(dataIndex, pos) {
3.  
   console.log(pos, "before");
4.  
   let pointList = this.myChart.convertFromPixel("grid", pos);
5.  
   console.log(pointList, "point after");
6.  
   pointList.push(pos[2], pos[3]);
7.  
   this.data[dataIndex] = pointList;
8.  
   // Update data
9.  
   this.myChart.setOption({
10.  
    series: [
11.  
    {
12.  
    id: "a",
13.  
    data: this.data,
14.  
    },
15.  
    ],
16.  
    });
17.  
    this.option && this.myChart.setOption(this.option);
18.  
    this.option.series.data = [];
19.  
    },
20.  
     
21.  
    //散点图上显示提示语的方法
22.  
    showTooltip(dataIndex) {
23.  
    this.myChart.dispatchAction({
24.  
    type: "showTip",
25.  
    seriesIndex: 0,
26.  
    dataIndex: dataIndex,
27.  
    });
28.  
    },
29.  
    //散点图上隐藏提示语的方法
30.  
    hideTooltip() {
31.  
    this.myChart.dispatchAction({
32.  
    type: "hideTip",
33.  
    });
34.  
    },

最后：将散点图的外部目标拖拽入散点图内部的时候的坐标计算方法

1.  
   //通过dragger组件
2.  
   //vue html代码 绑定拖拽事件
3.  
   <draggable
4.  
   class="dragItem"
5.  
   @end="(evt) => widgetOnDragged(evt, index, item)"
6.  
   v-for="(item, index) in dragList"
7.  
   :key="index"
8.  
   >
9.  
   <div class="tools-item">
10.  
    <span class="tools-item-text">{{ item.deviceName }}</span>
11.  
    </div>
12.  
    </draggable>
13.  
     
14.  
    //拖拽事件实现计算当前item 拖拽之后在散点图中坐标
15.  
    widgetOnDragged(evt, index, item) {
16.  
    var element = document.getElementById("main");//echarts的节点
17.  
    let dragItem = document.querySelectorAll("div[class='dragItem']") //需要被拖拽的item列表节点
18.  
    var rect = dragItem[index].getBoundingClientRect();//被拖拽的item
19.  
    var chartRect = element.getBoundingClientRect();
20.  
    let pos = [evt.originalEvent.offsetX rect.left - chartRect.left ,
21.  
    evt.originalEvent.offsetY rect.top - chartRect.top];
22.  
    let pointList = this.myChart.convertFromPixel("grid", pos);
23.  
    pointList.push(item.deviceName, item.deviceId);
24.  
    this.data.push(pointList);
25.  
    //保存点位
26.  
    let datalist = [];
27.  
    this.data.forEach((item) => {
28.  
    //所有坐标传给后端接口的时候保存两位小数点
29.  
    datalist.push({
30.  
    deviceId: item[3],
31.  
    axisx: parseFloat(item[0].toFixed(2)),
32.  
    axisy: parseFloat(item[1].toFixed(2)),
33.  
    });
34.  
    });
35.  
    //拖拽之后调取后端接口保存当前点
36.  
    editCanvas(datalist).then((res) => {
37.  
    console.log(res, "dates");
38.  
    });
39.  
    //重新调取接口 获取未进入散点图的item
40.  
    this.handlePoIntform();
41.  
    //重新加载echarts散点图的options
42.  
    const that = this;
43.  
    this.myChart.setOption({
44.  
    graphic: that.data.map(function (item, dataIndex) {
45.  
    return {
46.  
    type: "circle",
47.  
    position: that.myChart.convertToPixel("grid", item),
48.  
    shape: {
49.  
    cx: 0,
50.  
    cy: 0,
51.  
    r: that.symbolSize / 2,
52.  
    },
53.  
    invisible: true,
54.  
    draggable: true,
55.  
    ondrag: function () {
56.  
    that.onPointDragging(dataIndex, [
57.  
    this.x,
58.  
    this.y,
59.  
    item[2],
60.  
    item[3],
61.  
    ]);
62.  
    },
63.  
    onmousemove: function () {
64.  
    that.showTooltip(dataIndex);
65.  
    },
66.  
    onmouSEO（(Search Engine Optimization)）ut: function () {
67.  
    that.hideTooltip(dataIndex);
68.  
    },
69.  
    z: 100,
70.  
    };
71.  
    }),
72.  
    series: [
73.  
    {
74.  
    id: "a",
75.  
    data: this.data,
76.  
    },
77.  
    ],
78.  
    });
79.  
    this.option && this.myChart.setOption(this.option);
80.  
    },

请多多指教……

这篇好文章是转载于：学新通技术网