vue基于Echarts的拖拽数据可视化功能实现

1

2

3

4

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

1

event.preventDefault()

1

2

3

4

5

6

7

8

9

function drop(ev)

{

// 避免浏览器默认处理数据（drop 事件的默认行为以链接的形式打开)

ev.preventDefault();

// 获取被拖数据。该方法将返回到 setData() 任何类型的数据都设置在方法中。

var data=ev.dataTransfer.getData("Text");

// 将被拖元素添加到放置元素(目标元素)中

ev.target.appendChild(document.getElementById(data));

}

1

2

3

4

5

6

<div>

<el-buttonclass="drag-button"type="success"draggable="true"

@dragstart.native="dragStart($event,'histogram')">

柱状图

</el-button>

</div>

1

2

3

dragStart(event,type){

event.dataTransfer.setData("Text",type);

},

1

2

3

4

<divclass="grid-contentbg-purple-lightdrag-resize-area"

@drop.prevent="drop($event)"@dragover.prevent="">

<div style="height:300px;width:400px" id="'histogra'></div>

</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

drop(event){

      const data=event.dataTransfer.getData("Text");

      if(data === 'histogram'){

 var myChart = echarts.init(document.getElementById('histogram')); // 指定图表的配置项和数据

 var option = {

 title: { text: 'ECharts 入门示例' },

 tooltip: {}, legend: { data:['销量'] },

 xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] },

 yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }]

 };

 // 使用刚指定的配置项和数据显示图表。

 myChart.setOption(option);

 }

}

1

2

let disX = e.clientX - el.offsetLeft;

        let disY = e.clientY - el.offsetTop;

1

2

3

4

let tX = e.clientX - disX;

let tY = e.clientY - disY;

el.style.left = tX + 'px';

el.style.top = tY + 'px'；

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

      // 初始化可拖拽方法

      initDrag(){

       let el = this.$el;

       el.onmousedown = (e)=>{

            e.preventDefault();

            e.target.style.cursor = 'move'; 

            //鼠标按下，计算鼠标触点距离元素左侧和顶部的距离

            let disX = e.clientX - el.offsetLeft;

            let disY = e.clientY - el.offsetTop;

            // console.log('22222',document);

            document.onmousemove = function (e) {

              //计算需要移动的距离

              let tX = e.clientX - disX;

              let tY = e.clientY - disY;

              //移动当前元素

              if (tX >= 0 && tX <= window.innerWidth - el.offsetWidth) {

                el.style.left = tX + 'px';

              } 

              if (tY >= 0 && tY <= window.innerHeight - el.offsetHeight) {

                el.style.top = tY + 'px';

              } 

            };

            //鼠标松开时，注销鼠标事件，停止元素拖拽。

            document.onmouseup = function (e) {

                document.onmousemove = null;

                document.onmouseup = null;

                e.target.style.cursor = 'default';

            };

       }

     },