1、需求——如何在echarts中实现托拖拽的效果

2、解决方案

1、用Echarts的type为graph类型画图,优点:拖拽不用重新定点划线,有自带的连线关系,缺点:连线的样式及特效不能很好呈现

1//注意this.viewData是从后台获取的数据
mounted () {
2
const that = this
3
this.$nextTick(() => {
4
let myChart = echarts.init(document.getElementById(this.scaleLine_id))
5
var home = "image:///img/bussiness.png"; //业务
6
var error_home = "image:///img/error-bussiness.png"; //故障业务
7
var windows = "image:///img/windows.png"; //windows主机
8
var error_windows = "image:///img/error-windows"; //故障windows
9
var linux = "image:///img/linux.png"; //linux
10
var error_linux = "image:///img/error-linux.png"; //故障linux
11
var cluster0 = "image:///img/cluster_0.png"; //web服务器
12
var error_cluster0 = "image:///img/error-cluster_0.png"; //故障web服务器
13
var cluster1 = "image:///img/cluster_1.png"; //数据库
14
var error_cluster1 = "image:///img/error-cluster_1.png"; //故障数据库
15
var cluster2 = "image:///img/cluster_2.png"; //消息队列
16
var error_cluster2 = "image:///img/error-cluster_2.png"; //故障消息队列
17
var cluster3 = "image:///img/cluster_3.png"; //缓存
18
var error_cluster3 = "image:///img/error-cluster_3.png"; //故障缓存
19
var cluster4 = "image:///img/cluster_4.png"; //文件系统
20
var error_cluster4 = "image:///img/error-cluster_4.png"; //故障文件系统
21
let labelOne = {//文字1省级市级五区
22
normal: {
23
position: "bottom",
24
distance:0, //离图标多远
25
show: true,
26
textStyle: {
27
fontSize: 15,
28
color:'#00eaff',
29
fontFamily:'microsoftYaHei'
30
},
31
}
32
};
33
let lineColorOne = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
34
offset: 0,
35
color: '#58B3CC'
36
}, {
37
offset: 1,
38
color: '#F58158'
39
}])
40
let viewData = this.viewData
41
let data = []
42
var symbolSize = 20;
43
// console.log(viewData)
44
//处理数据格式
45
for(let i = 0;i<viewData.element.length;i++){
46
data.push(viewData.element[i].value)
47
if(viewData.element[i].type === 20){
48
if(viewData.element[i].status === 1){
49
viewData.element[i].symbol = home
50
viewData.element[i].symbolSize = 40
51
viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
52
viewData.element[i].draggable = 'true'
53
viewData.element[i].fixed = 'true'
54
viewData.element[i].label = labelOne
55
}else{
56
viewData.element[i].symbol = error_home
57
viewData.element[i].symbolSize = 40
58
viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
59
viewData.element[i].draggable = 'true'
60
viewData.element[i].fixed = 'true'
61
viewData.element[i].label = labelOne
62

63
}
64
}else if(viewData.element[i].type === 10){
65
if(viewData.element[i].status === 1){
66
viewData.element[i].symbol = windows
67
viewData.element[i].symbolSize = 40
68
viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
69
viewData.element[i].draggable = 'false'
70
viewData.element[i].fixed = 'true'
71
viewData.element[i].label = labelOne
72
}else{
73
viewData.element[i].symbol = error_windows
74
viewData.element[i].symbolSize = 40
75
viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
76
viewData.element[i].draggable = 'false'
77
viewData.element[i].fixed = 'true'
78
viewData.element[i].label = labelOne
79

80
}
81

82
}else if(viewData.element[i].type === 11){
83
if(viewData.element[i].status === 1){
84
viewData.element[i].symbol = linux
85
viewData.element[i].symbolSize = 40
86
viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
87
viewData.element[i].draggable = 'false'
88
viewData.element[i].fixed = 'true'
89
viewData.element[i].label = labelOne
90
}else{
91
viewData.element[i].symbol = error_linux
92
viewData.element[i].symbolSize = 40
93
viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
94
viewData.element[i].draggable = 'false'
95
viewData.element[i].fixed = 'true'
96
viewData.element[i].label = labelOne
97

98
}
99

100
}else if(viewData.element[i].type === 0){
101
if(viewData.element[i].status === 1){
102
viewData.element[i].symbol = cluster0
103
viewData.element[i].symbolSize = 40
104
viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
105
viewData.element[i].draggable = 'false'
106
viewData.element[i].fixed = 'true'
107
viewData.element[i].label = labelOne
108
}else{
109
viewData.element[i].symbol = error_cluster0
110
viewData.element[i].symbolSize = 40
111
viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
112
viewData.element[i].draggable = 'false'
113
viewData.element[i].fixed = 'true'
114
viewData.element[i].label = labelOne
115

116
}
117

118
}else if(viewData.element[i].type === 1) {
119
if(viewData.element[i].status === 1){
120
viewData.element[i].symbol = cluster1
121
viewData.element[i].symbolSize = 40
122
viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
123
viewData.element[i].draggable = 'false'
124
viewData.element[i].fixed = 'true'
125
viewData.element[i].label = labelOne
126
}else{
127
viewData.element[i].symbol = error_cluster1
128
viewData.element[i].symbolSize = 40
129
viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
130
viewData.element[i].draggable = 'false'
131
viewData.element[i].fixed = 'true'
132
viewData.element[i].label = labelOne
133

134
}
135

136
}else if(viewData.element[i].type === 2) {
137
if(viewData.element[i].status === 1){
138
viewData.element[i].symbol = cluster2
139
viewData.element[i].symbolSize = 40
140
viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
141
viewData.element[i].draggable = 'false'
142
viewData.element[i].fixed = 'true'
143
viewData.element[i].label = labelOne
144
}else{
145
viewData.element[i].symbol = error_cluster2
146
viewData.element[i].symbolSize = 40
147
viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
148
viewData.element[i].draggable = 'false'
149
viewData.element[i].fixed = 'true'
150
viewData.element[i].label = labelOne
151

152
}
153

154
}else if(viewData.element[i].type === 3) {
155
if(viewData.element[i].status === 1){
156
viewData.element[i].symbol = cluster3
157
viewData.element[i].symbolSize = 40
158
viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
159
viewData.element[i].draggable = 'false'
160
viewData.element[i].fixed = 'true'
161
viewData.element[i].label = labelOne
162
}else{
163
viewData.element[i].symbol = error_cluster3
164
viewData.element[i].symbolSize = 40
165
viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
166
viewData.element[i].draggable = 'false'
167
viewData.element[i].fixed = 'true'
168
viewData.element[i].label = labelOne
169

170
}
171

172
}else if(viewData.element[i].type === 4){
173
if(viewData.element[i].status === 1){
174
viewData.element[i].symbol = cluster4
175
viewData.element[i].symbolSize = 40
176
viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
177
viewData.element[i].draggable = 'false'
178
viewData.element[i].fixed = 'true'
179
viewData.element[i].label = labelOne
180
}else{
181
viewData.element[i].symbol = error_cluster4
182
viewData.element[i].symbolSize = 40
183
viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
184
viewData.element[i].draggable = 'false'
185
viewData.element[i].fixed = 'true'
186
viewData.element[i].label = labelOne
187

188
}
189

190
}
191
}
192
var linkss = viewData.line.map((item,i)=>{
193
return {
194
source:item.fromName.id,
195
target:item.toName.id,
196

197
}
198
})
199
console.log(linkss)
200
const option = {
201
grid: {
202
left: '6%',
203
top: '1%',
204
bottom:'5%',
205
},
206
textStyle: {
207
color: '#f00',
208
fontSize: 16,
209
fontWeight: 600,
210
},
211
// tooltip: {
212
// // 表示不使用默认的『显示』『隐藏』触发规则。
213
// triggerOn: 'none',
214
// formatter: function (params) {
215
// return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
216
// }
217
// },
218
backgroundColor:"#013954",
219
// backgroundColor:"#fff",
220
animationDuration: 1500,
221
animationEasingUpdate: 'quinticInOut',
222
xAxis: {
223
show: false,
224
type: 'value',
225
axisLine: {onZero: false}
226
},
227
yAxis: {
228
show: false,
229
type: 'value',
230
axisLine: {onZero: false}
231
},
232
series: [
233
{
234
id:'a',
235
type: 'graph',
236
coordinateSystem: 'cartesian2d',
237
legendHoverLink: false,
238
hoverAnimation: true,
239
nodeScaleRatio: false,
240
roam: false,
241
color: {
242
type: 'linear',
243
x: 0,
244
y: 0,
245
x2: 0,
246
y2: 1,
247
colorStops: [{
248
offset: 0, color: 'red' // 0% 处的颜色
249
}, {
250
offset: 1, color: 'blue' // 100% 处的颜色
251
}],
252
global: false // 缺省为 false
253
},
254
edges:linkss,
255
data: viewData.element,
256
},
257
]
258
};
259
//折线点原本并没有拖拽功能,需要我们为它加上:使用 graphic 组件,在每个点上面,覆盖一个隐藏的可拖拽的圆点
260
myChart.setOption(option,true);
261
// onPointDragging(0)//初始化
262
console.log(myChart.getOption())
263
myChart.setOption({
264
graphic: echarts.util.map(data, function (dataItem, dataIndex) {
265
return {
266
// 'circle' 表示这个 graphic element 的类型是圆点。
267
type: 'circle',
268
shape: {
269
// 圆点的半径。
270
r: symbolSize
271
},
272
position: myChart.convertToPixel('grid', dataItem),
273
invisible: true,
274
// 这个属性让圆点可以被拖拽。
275
draggable: true,
276
// 把 z 值设得比较大,表示这个圆点在最上方,能覆盖住已有的折线图的圆点。
277
z: 100,
278
ondrag: echarts.util.curry(onPointDragging, dataIndex),
279
// 在 mouseover 的时候显示,在 mouseout 的时候隐藏。
280
onmousemove: echarts.util.curry(showTooltip, dataIndex),
281
onmouseout: echarts.util.curry(hideTooltip, dataIndex),
282
};
283
})
284
});
285
// 此函数中会根据拖拽后的新位置,改变 data 中的值,并用新的 data 值,重绘折线图,从而使折线图同步于被拖拽的隐藏圆点。
286
function onPointDragging(dataIndex) {
287
// 这里的 data 就是本文最初的代码块中声明的 data,在这里会被更新。
288
// 这里的 this 就是被拖拽的圆点。this.position 就是圆点当前的位置。
289
data[dataIndex] = myChart.convertFromPixel('grid', this.position);
290
let initIndex = that.viewData.element[dataIndex].value
291
viewData.element[dataIndex].value = data[dataIndex]
292
console.log( that, data[dataIndex])
293
//元素位置改变后重新划线
294
// for(let i = 0;i < viewData.line.length;i ++){
295
// if(viewData.line[i].fromName === viewData.element[dataIndex].id){
296
// viewData.line[i].coords[0] = data[dataIndex]
297
// }else if(viewData.line[i].toName === viewData.element[dataIndex].id){
298
// viewData.line[i].coords[1] = data[dataIndex]
299
// }
300
// }
301
// 用更新后的 data,重绘折线图。
302
myChart.setOption(option);
303
}
304
function showTooltip(dataIndex) {
305
myChart.dispatchAction({
306
type: 'showTip',
307
seriesIndex: 0,
308
dataIndex: dataIndex
309
});
310
}
311
function hideTooltip(dataIndex) {
312
myChart.dispatchAction({
313
type: 'hideTip'
314
});
315
}
316
// 最后,为了使 dom 尺寸改变时,图中的元素能自适应得变化
317
window.addEventListener('resize', function () {
318
// 对每个拖拽圆点重新计算位置,并用 setOption 更新。
319
myChart.setOption({
320
graphic: echarts.util.map(data, function (item, dataIndex) {
321
return {
322
position: myChart.convertToPixel('grid', item)
323
};
324
})
325
});
326
});
327
//监听点击事件
328
myChart.on('click', function (params) {
329
console.log(params)
330
if(params.seriesType === "graph"){
331
that.$emit('selectAsset',params.data.id)
332
}
333
//TODO
334

335
});
336
// //添加右件菜单
337
// myChart.on("mousedown",function(e){
338
// if(e.event.event.button===2){
339
// //e中有当前节点信息
340
// showMenu(e,[
341
// {
342
// "name": "菜单1",
343
// "fn": function() {
344
// alert("触发-菜单1" + e.data);
345
// console.log(e);
346
// }
347
// }, {
348
// "name": "菜单2",
349
// "fn": function() {
350
// alert("触发-菜单2" + e.data);
351
// }
352
// }
353
// ]);
354
// }
355
// })
356
//
357
// var style_ul = "padding:0px;margin:0px;border: 1px solid #ccc;background-color: #fff;position: absolute;left: 0px;top: 0px;z-index: 2;display: none;";
358
// var style_li = "list-style:none;padding: 5px; cursor: pointer; padding: 5px 20px;margin:0px;";
359
// var style_li_hover = style_li + "background-color: #00A0E9; color: #fff;";
360
//
361
// //右键菜单容器
362
// var menubox = $("<div class='echartboxMenu' style='" + style_ul + "'><div style='text-align:center;background:#ccc'></div><ul style='margin:0px;padding:0px;'></ul></div>")
363
// .appendTo($(document.body));
364
//
365
// //移除浏览器右键菜单
366
// myChart.getDom().oncontextmenu = menubox[0].oncontextmenu = function(){
367
// return false;
368
// }
369
//
370
// //点击其他位置隐藏菜单
371
// $(document).click(function() {
372
// menubox.hide()
373
// });
374
//
375
// //显示菜单
376
// var showMenu = function(e,menus){
377
// $("div", menubox).text(e.name);
378
// var menulistbox = $("ul", menubox).empty();
379
// $(menus).each(function(i, item) {
380
// var li = $("<li style='" + style_li + "'>" + item.name + "</li>")
381
// .mouseenter(function() {
382
// $(this).attr("style", style_li_hover);
383
// })
384
// .mouseleave(function() {
385
// $(this).attr("style", style_li);
386
// })
387
// .click(function() {
388
// item["fn"].call(this);
389
// menubox.hide();
390
// });
391
// menulistbox.append(li);
392
// });
393
// menubox.css({
394
// "left": event.x,
395
// "top": event.y
396
// }).show();
397
// }
398

399
/*窗口自适应,关键代码*/
400
setTimeout(function (){
401
window.onresize = function () {
402
myChart.resize();
403
}
404
},200)
405
// window.addEventListener('resize', function () {
406
// myChart.resize();
407
// });
408
})
409
},

2、元素用graph类型的画图,连线关系用type为line的关系描述,优点:连线的样式多样化,便于动态渲染。缺点:初始化的时候不显示线条


​ 1
series: [
2
{
3
id:'a',
4
type: 'graph',
5
coordinateSystem: 'cartesian2d',
6
legendHoverLink: false,
7
hoverAnimation: true,
8
nodeScaleRatio: false,
9
roam: false,
10
lineStyle: {//去掉自带的那条线,不要删
11
normal: {
12
width: 0,
13
shadowColor: 'none',
14
color: 'transparent'
15
},
16
},
17
data: viewData.element,
18
},
19
{
20
type: 'lines', //大数据到块1,2,...n
21
coordinateSystem: 'cartesian2d',
22
z: 1,
23
// showAllSymbol:true,
24
effect: {
25
show: true,
26
smooth: true,
27
trailLength: 0,
28
symbol: "arrow",
29
color: '#ffc776',
30
symbolSize: 8,
31
period: 6,
32
loop: true,
33
},
34
lineStyle: {
35
normal: {
36
curveness: 0,
37
color: lineColorOne,
38
width: 1,
39
}
40
},
41
data:viewData.line,
42
}
43
]
44 45
// 此函数中会根据拖拽后的新位置,改变 data 中的值,并用新的 data 值,重绘折线图,从而使折线图同步于被拖拽的隐藏圆点。
46
function onPointDragging(dataIndex) {
47
// 这里的 data 就是本文最初的代码块中声明的 data,在这里会被更新。
48
// 这里的 this 就是被拖拽的圆点。this.position 就是圆点当前的位置。
49
data[dataIndex] = myChart.convertFromPixel('grid', this.position);
50
let initIndex = that.viewData.element[dataIndex].value
51
viewData.element[dataIndex].value = data[dataIndex]
52
console.log( that, data[dataIndex])
53
//元素位置改变后重新划线(关键代码)
54
for(let i = 0;i < viewData.line.length;i ++){
55
if(viewData.line[i].fromName === viewData.element[dataIndex].id){
56
viewData.line[i].coords[0] = data[dataIndex]
57
}else if(viewData.line[i].toName === viewData.element[dataIndex].id){
58
viewData.line[i].coords[1] = data[dataIndex]
59
}
60
}
61
// 用更新后的 data,重绘折线图。
62
myChart.setOption(option);
63
}
64


1、需求——如何在echarts中实现托拖拽的效果

                            

2、解决方案

1、用Echarts的type为graph类型画图,优点:拖拽不用重新定点划线,有自带的连线关系,缺点:连线的样式及特效不能很好呈现

关键代码:

代码块

Plain Text
 
 
 
 
 
 
1
 mounted () {
2
      const that = this
3
      this.$nextTick(() => {
4
        let myChart = echarts.init(document.getElementById(this.scaleLine_id))
5
        var home = "image:///img/bussiness.png";  //业务
6
        var error_home = "image:///img/error-bussiness.png";  //故障业务
7
        var windows = "image:///img/windows.png";  //windows主机
8
        var error_windows = "image:///img/error-windows";  //故障windows
9
        var linux = "image:///img/linux.png";  //linux
10
        var error_linux = "image:///img/error-linux.png";  //故障linux
11
        var cluster0 = "image:///img/cluster_0.png";  //web服务器
12
        var error_cluster0 = "image:///img/error-cluster_0.png";  //故障web服务器
13
        var cluster1 = "image:///img/cluster_1.png";  //数据库
14
        var error_cluster1 = "image:///img/error-cluster_1.png";  //故障数据库
15
        var cluster2 = "image:///img/cluster_2.png";  //消息队列
16
        var error_cluster2 = "image:///img/error-cluster_2.png";  //故障消息队列
17
        var cluster3 = "image:///img/cluster_3.png";  //缓存
18
        var error_cluster3 = "image:///img/error-cluster_3.png";  //故障缓存
19
        var cluster4 = "image:///img/cluster_4.png";  //文件系统
20
        var error_cluster4 = "image:///img/error-cluster_4.png";  //故障文件系统
21
        let labelOne = {//文字1省级市级五区
22
          normal: {
23
            position: "bottom",
24
            distance:0,//离图标多远
25
            show: true,
26
            textStyle: {
27
              fontSize: 15,
28
              color:'#00eaff',
29
              fontFamily:'microsoftYaHei'
30
            },
31
          }
32
        };
33
        let lineColorOne = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
34
          offset: 0,
35
          color: '#58B3CC'
36
        }, {
37
          offset: 1,
38
          color: '#F58158'
39
        }])
40
        let viewData = this.viewData
41
        let data = []
42
        var symbolSize = 20;
43
        // console.log(viewData)
44
        //处理数据格式
45
        for(let i = 0;i<viewData.element.length;i++){
46
          data.push(viewData.element[i].value)
47
          if(viewData.element[i].type === 20){
48
            if(viewData.element[i].status === 1){
49
              viewData.element[i].symbol =  home
50
              viewData.element[i].symbolSize = 40
51
              viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
52
              viewData.element[i].draggable = 'true'
53
              viewData.element[i].fixed = 'true'
54
              viewData.element[i].label = labelOne
55
            }else{
56
              viewData.element[i].symbol =  error_home
57
              viewData.element[i].symbolSize = 40
58
              viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
59
              viewData.element[i].draggable = 'true'
60
              viewData.element[i].fixed = 'true'
61
              viewData.element[i].label = labelOne
62
63
            }
64
          }else if(viewData.element[i].type === 10){
65
            if(viewData.element[i].status === 1){
66
              viewData.element[i].symbol =  windows
67
              viewData.element[i].symbolSize = 40
68
              viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
69
              viewData.element[i].draggable = 'false'
70
              viewData.element[i].fixed = 'true'
71
              viewData.element[i].label = labelOne
72
            }else{
73
              viewData.element[i].symbol =  error_windows
74
              viewData.element[i].symbolSize = 40
75
              viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
76
              viewData.element[i].draggable = 'false'
77
              viewData.element[i].fixed = 'true'
78
              viewData.element[i].label = labelOne
79
80
            }
81
82
          }else if(viewData.element[i].type === 11){
83
            if(viewData.element[i].status === 1){
84
              viewData.element[i].symbol =  linux
85
              viewData.element[i].symbolSize = 40
86
              viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
87
              viewData.element[i].draggable = 'false'
88
              viewData.element[i].fixed = 'true'
89
              viewData.element[i].label = labelOne
90
            }else{
91
              viewData.element[i].symbol =  error_linux
92
              viewData.element[i].symbolSize = 40
93
              viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
94
              viewData.element[i].draggable = 'false'
95
              viewData.element[i].fixed = 'true'
96
              viewData.element[i].label = labelOne
97
98
            }
99
100
          }else if(viewData.element[i].type === 0){
101
            if(viewData.element[i].status === 1){
102
              viewData.element[i].symbol =  cluster0
103
              viewData.element[i].symbolSize = 40
104
              viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
105
              viewData.element[i].draggable = 'false'
106
              viewData.element[i].fixed = 'true'
107
              viewData.element[i].label = labelOne
108
            }else{
109
              viewData.element[i].symbol =  error_cluster0
110
              viewData.element[i].symbolSize = 40
111
              viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
112
              viewData.element[i].draggable = 'false'
113
              viewData.element[i].fixed = 'true'
114
              viewData.element[i].label = labelOne
115
116
            }
117
118
          }else if(viewData.element[i].type === 1) {
119
            if(viewData.element[i].status === 1){
120
              viewData.element[i].symbol =  cluster1
121
              viewData.element[i].symbolSize = 40
122
              viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
123
              viewData.element[i].draggable = 'false'
124
              viewData.element[i].fixed = 'true'
125
              viewData.element[i].label = labelOne
126
            }else{
127
              viewData.element[i].symbol =  error_cluster1
128
              viewData.element[i].symbolSize = 40
129
              viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
130
              viewData.element[i].draggable = 'false'
131
              viewData.element[i].fixed = 'true'
132
              viewData.element[i].label = labelOne
133
134
            }
135
136
          }else if(viewData.element[i].type === 2) {
137
            if(viewData.element[i].status === 1){
138
              viewData.element[i].symbol =  cluster2
139
              viewData.element[i].symbolSize = 40
140
              viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
141
              viewData.element[i].draggable = 'false'
142
              viewData.element[i].fixed = 'true'
143
              viewData.element[i].label = labelOne
144
            }else{
145
              viewData.element[i].symbol =  error_cluster2
146
              viewData.element[i].symbolSize = 40
147
              viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
148
              viewData.element[i].draggable = 'false'
149
              viewData.element[i].fixed = 'true'
150
              viewData.element[i].label = labelOne
151
152
            }
153
154
          }else if(viewData.element[i].type === 3) {
155
            if(viewData.element[i].status === 1){
156
              viewData.element[i].symbol =  cluster3
157
              viewData.element[i].symbolSize = 40
158
              viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
159
              viewData.element[i].draggable = 'false'
160
              viewData.element[i].fixed = 'true'
161
              viewData.element[i].label = labelOne
162
            }else{
163
              viewData.element[i].symbol =  error_cluster3
164
              viewData.element[i].symbolSize = 40
165
              viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
166
              viewData.element[i].draggable = 'false'
167
              viewData.element[i].fixed = 'true'
168
              viewData.element[i].label = labelOne
169
170
            }
171
172
          }else if(viewData.element[i].type === 4){
173
            if(viewData.element[i].status === 1){
174
              viewData.element[i].symbol =  cluster4
175
              viewData.element[i].symbolSize = 40
176
              viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
177
              viewData.element[i].draggable = 'false'
178
              viewData.element[i].fixed = 'true'
179
              viewData.element[i].label = labelOne
180
            }else{
181
              viewData.element[i].symbol =  error_cluster4
182
              viewData.element[i].symbolSize = 40
183
              viewData.element[i].itemStyle = {"normal":{"color":"#F58158"}}
184
              viewData.element[i].draggable = 'false'
185
              viewData.element[i].fixed = 'true'
186
              viewData.element[i].label = labelOne
187
188
            }
189
190
          }
191
        }
192
        var linkss = viewData.line.map((item,i)=>{
193
          return {
194
            source:item.fromName.id,
195
            target:item.toName.id,
196
197
          }
198
        })
199
        console.log(linkss)
200
        const option = {
201
          grid: {
202
            left: '6%',
203
            top: '1%',
204
            bottom:'5%',
205
          },
206
          textStyle: {
207
            color: '#f00',
208
            fontSize: 16,
209
            fontWeight: 600,
210
          },
211
          // tooltip: {
212
          //   // 表示不使用默认的『显示』『隐藏』触发规则。
213
          //   triggerOn: 'none',
214
          //   formatter: function (params) {
215
          //     return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
216
          //   }
217
          // },
218
          backgroundColor:"#013954",
219
         // backgroundColor:"#fff",
220
          animationDuration: 1500,
221
          animationEasingUpdate: 'quinticInOut',
222
          xAxis: {
223
            show: false,
224
            type: 'value',
225
            axisLine: {onZero: false}
226
          },
227
          yAxis: {
228
            show: false,
229
            type: 'value',
230
            axisLine: {onZero: false}
231
          },
232
          series: [
233
            {
234
            id:'a',
235
            type: 'graph',
236
            coordinateSystem: 'cartesian2d',
237
            legendHoverLink: false,
238
            hoverAnimation: true,
239
            nodeScaleRatio: false,
240
            roam: false,
241
            color: {
242
              type: 'linear',
243
              x: 0,
244
              y: 0,
245
              x2: 0,
246
              y2: 1,
247
              colorStops: [{
248
                offset: 0, color: 'red' // 0% 处的颜色
249
              }, {
250
                offset: 1, color: 'blue' // 100% 处的颜色
251
              }],
252
              global: false // 缺省为 false
253
            },
254
            edges:linkss,
255
            data: viewData.element,
256
          },
257
            ]
258
        };
259
        //折线点原本并没有拖拽功能,需要我们为它加上:使用 graphic 组件,在每个点上面,覆盖一个隐藏的可拖拽的圆点
260
        myChart.setOption(option,true);
261
        // onPointDragging(0)//初始化
262
        console.log(myChart.getOption())
263
        myChart.setOption({
264
          graphic: echarts.util.map(data, function (dataItem, dataIndex) {
265
            return {
266
              // 'circle' 表示这个 graphic element 的类型是圆点。
267
              type: 'circle',
268
              shape: {
269
                // 圆点的半径。
270
                r: symbolSize
271
              },
272
              position: myChart.convertToPixel('grid', dataItem),
273
              invisible: true,
274
              // 这个属性让圆点可以被拖拽。
275
              draggable: true,
276
              // 把 z 值设得比较大,表示这个圆点在最上方,能覆盖住已有的折线图的圆点。
277
              z: 100,
278
              ondrag: echarts.util.curry(onPointDragging, dataIndex),
279
              // 在 mouseover 的时候显示,在 mouseout 的时候隐藏。
280
              onmousemove: echarts.util.curry(showTooltip, dataIndex),
281
              onmouseout: echarts.util.curry(hideTooltip, dataIndex),
282
            };
283
          })
284
        });
285
        // 此函数中会根据拖拽后的新位置,改变 data 中的值,并用新的 data 值,重绘折线图,从而使折线图同步于被拖拽的隐藏圆点。
286
        function onPointDragging(dataIndex) {
287
          // 这里的 data 就是本文最初的代码块中声明的 data,在这里会被更新。
288
          // 这里的 this 就是被拖拽的圆点。this.position 就是圆点当前的位置。
289
          data[dataIndex] = myChart.convertFromPixel('grid', this.position);
290
          let initIndex =  that.viewData.element[dataIndex].value
291
          viewData.element[dataIndex].value = data[dataIndex]
292
          console.log( that, data[dataIndex])
293
          //元素位置改变后重新划线
294
          // for(let i = 0;i < viewData.line.length;i ++){
295
          //   if(viewData.line[i].fromName === viewData.element[dataIndex].id){
296
          //     viewData.line[i].coords[0] = data[dataIndex]
297
          //   }else if(viewData.line[i].toName === viewData.element[dataIndex].id){
298
          //     viewData.line[i].coords[1] = data[dataIndex]
299
          //   }
300
          // }
301
          // 用更新后的 data,重绘折线图。
302
          myChart.setOption(option);
303
        }
304
        function showTooltip(dataIndex) {
305
          myChart.dispatchAction({
306
            type: 'showTip',
307
            seriesIndex: 0,
308
            dataIndex: dataIndex
309
          });
310
        }
311
        function hideTooltip(dataIndex) {
312
          myChart.dispatchAction({
313
            type: 'hideTip'
314
          });
315
        }
316
        // 最后,为了使 dom 尺寸改变时,图中的元素能自适应得变化
317
        window.addEventListener('resize', function () {
318
          // 对每个拖拽圆点重新计算位置,并用 setOption 更新。
319
          myChart.setOption({
320
            graphic: echarts.util.map(data, function (item, dataIndex) {
321
              return {
322
                position: myChart.convertToPixel('grid', item)
323
              };
324
            })
325
          });
326
        });
327
        //监听点击事件
328
        myChart.on('click', function (params) {
329
          console.log(params)
330
          if(params.seriesType === "graph"){
331
            that.$emit('selectAsset',params.data.id)
332
          }
333
          //TODO
334
335
        });
336
        // //添加右件菜单
337
        // myChart.on("mousedown",function(e){
338
        //   if(e.event.event.button===2){
339
        //     //e中有当前节点信息
340
        //     showMenu(e,[
341
        //       {
342
        //         "name": "菜单1",
343
        //         "fn": function() {
344
        //           alert("触发-菜单1" + e.data);
345
        //           console.log(e);
346
        //         }
347
        //       }, {
348
        //         "name": "菜单2",
349
        //         "fn": function() {
350
        //           alert("触发-菜单2" + e.data);
351
        //         }
352
        //       }
353
        //     ]);
354
        //   }
355
        // })
356
        //
357
        // var style_ul = "padding:0px;margin:0px;border: 1px solid #ccc;background-color: #fff;position: absolute;left: 0px;top: 0px;z-index: 2;display: none;";
358
        // var style_li = "list-style:none;padding: 5px; cursor: pointer; padding: 5px 20px;margin:0px;";
359
        // var style_li_hover = style_li + "background-color: #00A0E9; color: #fff;";
360
        //
361
        // //右键菜单容器
362
        // var menubox = $("<div class='echartboxMenu' style='" + style_ul + "'><div style='text-align:center;background:#ccc'></div><ul style='margin:0px;padding:0px;'></ul></div>")
363
        //   .appendTo($(document.body));
364
        //
365
        // //移除浏览器右键菜单
366
        // myChart.getDom().oncontextmenu = menubox[0].oncontextmenu = function(){
367
        //   return false;
368
        // }
369
        //
370
        // //点击其他位置隐藏菜单
371
        // $(document).click(function() {
372
        //   menubox.hide()
373
        // });
374
        //
375
        // //显示菜单
376
        // var showMenu = function(e,menus){
377
        //   $("div", menubox).text(e.name);
378
        //   var menulistbox = $("ul", menubox).empty();
379
        //   $(menus).each(function(i, item) {
380
        //     var li = $("<li style='" + style_li + "'>" + item.name + "</li>")
381
        //       .mouseenter(function() {
382
        //         $(this).attr("style", style_li_hover);
383
        //       })
384
        //       .mouseleave(function() {
385
        //         $(this).attr("style", style_li);
386
        //       })
387
        //       .click(function() {
388
        //         item["fn"].call(this);
389
        //         menubox.hide();
390
        //       });
391
        //     menulistbox.append(li);
392
        //   });
393
        //   menubox.css({
394
        //     "left": event.x,
395
        //     "top": event.y
396
        //   }).show();
397
        // }
398
399
        /*窗口自适应,关键代码*/
400
        setTimeout(function (){
401
          window.onresize = function () {
402
            myChart.resize();
403
          }
404
        },200)
405
        // window.addEventListener('resize', function () {
406
        //     myChart.resize();
407
        // });
408
      })
409
    },
 
 

2、元素用graph类型的画图,连线关系用type为line的关系描述,优点:连线的样式多样化,便于动态渲染。缺点:初始化的时候不显示线条

在以上的代码部分修改

代码块

Plain Text
 
 
 
 
 
 
1
 series: [
2
            {
3
            id:'a',
4
            type: 'graph',
5
            coordinateSystem: 'cartesian2d',
6
            legendHoverLink: false,
7
            hoverAnimation: true,
8
            nodeScaleRatio: false,
9
            roam: false,
10
            lineStyle: {//去掉自带的那条线,不要删
11
              normal: {
12
                width: 0,
13
                shadowColor: 'none',
14
                color: 'transparent'
15
              },
16
            },
17
            data: viewData.element,
18
          },
19
            {
20
              type: 'lines', //大数据到块1,2,...n
21
              coordinateSystem: 'cartesian2d',
22
              z: 1,
23
              // showAllSymbol:true,
24
              effect: {
25
                show: true,
26
                smooth: true,
27
                trailLength: 0,
28
                symbol: "arrow",
29
                color: '#ffc776',
30
                symbolSize: 8,
31
                period: 6,
32
                loop: true,
33
              },
34
              lineStyle: {
35
                normal: {
36
                  curveness: 0,
37
                  color: lineColorOne,
38
                  width: 1,
39
                }
40
              },
41
              data:viewData.line,
42
            }
43
            ]
44

45
             // 此函数中会根据拖拽后的新位置,改变 data 中的值,并用新的 data 值,重绘折线图,从而使折线图同步于被拖拽的隐藏圆点。
46
        function onPointDragging(dataIndex) {
47
          // 这里的 data 就是本文最初的代码块中声明的 data,在这里会被更新。
48
          // 这里的 this 就是被拖拽的圆点。this.position 就是圆点当前的位置。
49
          data[dataIndex] = myChart.convertFromPixel('grid', this.position);
50
          let initIndex =  that.viewData.element[dataIndex].value
51
          viewData.element[dataIndex].value = data[dataIndex]
52
          console.log( that, data[dataIndex])
53
          //元素位置改变后重新划线(关键代码)
54
          for(let i = 0;i < viewData.line.length;i ++){
55
            if(viewData.line[i].fromName === viewData.element[dataIndex].id){
56
              viewData.line[i].coords[0] = data[dataIndex]
57
            }else if(viewData.line[i].toName === viewData.element[dataIndex].id){
58
              viewData.line[i].coords[1] = data[dataIndex]
59
            }
60
          }
61
          // 用更新后的 data,重绘折线图。
62
          myChart.setOption(option);
63
        }
64
 
 

ECharts实现拖拽的更多相关文章

  1. vue下使用echarts折线图及其横坐标拖拽功能

    vue页面中使用折线图,并且有时间段筛选.因此就需要用到横坐标的拖拽功能. 界面效果如下: 现在来看这个效果的实现代码: drawLine() { let that = this, lineDate ...

  2. Vue 结合 echarts 原生 html5 实现拖拽排版报表系统

    前言 不知道各位 coder 有没有碰到过许多重复的业务需求,比如排版相类似的报表,只不过是顺序稍微换了一下,就是一个新的页面,虽然基于模板思想来写的话也能减少不少代码,但是相对的不那么方便,笔者最近 ...

  3. 【拖拽可视化大屏】全流程讲解用python的pyecharts库实现拖拽可视化大屏的背后原理,简单粗暴!

    "整篇文章较长,干货很多!建议收藏后,分章节阅读." 一.设计方案 整体设计方案思维导图: 整篇文章,也将按照这个结构来讲解. 若有重点关注部分,可点击章节目录直接跳转! 二.项目 ...

  4. JavaScript动画-拖拽改变元素大小

    ▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...

  5. javascript动画系列第一篇——模拟拖拽

    × 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...

  6. javascript动画系列第四篇——拖拽改变元素大小

    × 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...

  7. Dropzone.js实现文件拖拽上传

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...

  8. jQuery可拖拽3D万花筒旋转特效

    这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...

  9. CSharpGL(21)用鼠标拾取、拖拽VBO图元内的点、线或本身

    CSharpGL(21)用鼠标拾取.拖拽VBO图元内的点.线或本身 效果图 以最常见的三角形网格(用GL_TRIANGLES方式进行渲染)为例. 在拾取模式为GeometryType.Point时,你 ...

随机推荐

  1. exsi 6.7u2 不能向winows虚拟机发送ctrl+alt+del

    1. 遇到过可以安装它的浏览器插件启动控制台登录就可以了. 2. 下载官方的客户机远程工具“VMware vSphere Client”才行. 3. 直接选择alt+del+insert 键盘即可代替 ...

  2. Spring Boot源码(二):SPI去除web.xml

    SPI广泛用于dubbo,spring boot,spring cloud alibaba等 关于SPI,可见SPI-Service Provider Interface 继续上篇文章 上面三句代码的 ...

  3. mac 非安全模式 开启

    https://github.com/callmelaoda/communicate/issues/8 open -a Google\ Chrome --args --disable-web-secu ...

  4. with open()函数中,如何在文件名设置中引用变量(python)

    name = "wangyang" age = " with open("C:/Users/mike1/Desktop/name_age.txt", ...

  5. Redis可能出现的问题

    缓存穿透 一般出现这样的问题,是因为当我们查询一条肯定不存在的数据的时候,缓存中没有,就会透过缓存来查询数据库,数据库也不存在,这样就不会将值保存在缓存中,最后还是缓存和数据库中都没有,如果一直访问这 ...

  6. list类型的应用场景 —— Redis实战经验

    list类型是简单的字符串列表,按照插入顺序排序.每个列表最多可以存储 232 - 1 个元素(40多亿) ,list类型主要有以下应用场景.. 1. 消息队列 list类型的lpop和rpush(或 ...

  7. [POI2015]PUS [线段树优化建图]

    problem 线段树优化建图,拓扑,没了. #include <bits/stdc++.h> #define ls(x) ch[x][0] #define rs(x) ch[x][1] ...

  8. Codeforce 567A - Lineland Mail

    All cities of Lineland are located on the Ox coordinate axis. Thus, each city is associated with its ...

  9. tomcat常见状态码

  10. win10子系统ubuntu内的nginx启动问题

    需用sudo启动,密码是windows密码.