需求：實(shí)現(xiàn)一個(gè)可視化編輯器，用戶可以添加節(jié)點(diǎn)，并對(duì)節(jié)點(diǎn)進(jìn)行拖拽編輯，線條要用折線而不是用自帶的直線

實(shí)現(xiàn)期間碰到很多問(wèn)題，特意記錄下來(lái)，留待將來(lái)碰到這些問(wèn)題的同學(xué)，省去些解決問(wèn)題的時(shí)間

問(wèn)題1：節(jié)點(diǎn)的data如下，不使用直角坐標(biāo)系一切正常，但使用直角坐標(biāo)系時(shí)，節(jié)點(diǎn)怎么不見(jiàn)了？

series: [{type: 'graph',data: [{ name: '1', x: 0, y: 0}, { name: '2', x: 10, y: 10 }]
}]

解決方法：開(kāi)啟坐標(biāo)系后，坐標(biāo)要以數(shù)組的方式存到value中

series: [{type: 'graph',coordinateSystem: 'cartesian2d',data: [{ name: '1', value: [0, 0] }, { name: '2', value: [10, 10] }]
}]

問(wèn)題2：怎么拖拽節(jié)點(diǎn)？并且獲得節(jié)點(diǎn)拖拽的偏移量呢？

1、在配置項(xiàng)中允許節(jié)點(diǎn)拖拽：draggable: true

series: [{type: 'graph',draggable: true,
}]

2、監(jiān)聽(tīng)鼠標(biāo)按下和松開(kāi)的事件，按下時(shí)獲得拖拽動(dòng)作的初始坐標(biāo)，松開(kāi)時(shí)獲得拖拽動(dòng)作的結(jié)束坐標(biāo)，比較后獲得節(jié)點(diǎn)的偏移量

let dragCoords = null
myChart.on('mousedown', (e) =>{dragCoords = [e.event?.offsetX, e.event?.offsetY]
});
myChart.on('mouseup', (e) =>{const { offsetX, offsetY } =  e.eventconsole.log('初始坐標(biāo)：': dragCoords , '結(jié)束坐標(biāo)：', [offsetX, offsetY] )
});

問(wèn)題3：直接將坐標(biāo)與偏移量進(jìn)行加減，計(jì)算出來(lái)的坐標(biāo)再賦值給節(jié)點(diǎn)，重新渲染后的節(jié)點(diǎn)位置與拖拽結(jié)束的位置不一樣

原因： 出現(xiàn)這個(gè)問(wèn)題，是因?yàn)樽鴺?biāo)的數(shù)值與px的數(shù)值，它們只是一個(gè)正比例關(guān)系。

解決方法：
計(jì)算坐標(biāo)軸的長(zhǎng)度與屏幕可視區(qū)域?qū)捀叩谋壤?#xff0c;根據(jù)比例將節(jié)點(diǎn)在屏幕的偏移量轉(zhuǎn)為在坐標(biāo)系的偏移量。

舉例： x軸刻度為1000，渲染在屏幕是500px，那么拖拽節(jié)點(diǎn)向右移動(dòng)100px，節(jié)點(diǎn)的x坐標(biāo)應(yīng)該增加200

option: {xAxis: { show: true, type: 'value', min: -500, max: 500 },yAxis: { show: true, type: 'value', min: -1000, max: 0, },grid: {left: 0, right: 0, top: 50, bottom: 50,},
}

根據(jù)以上配置?？梢缘玫?#xff1a;
x軸長(zhǎng)度 = document.body.clientWidth，
y軸長(zhǎng)度 = document.body.clientHeight-50-50

當(dāng)然，如果需求允許，設(shè)置grid.width=1000; grid.height=1000; 這樣是最方便的，直接將坐標(biāo)的數(shù)值與偏移量相加減，就可以得到新的坐標(biāo)

  function updatePosition ( e: any) {if(!e.data.name || !dragCoords) returnconst [startX, startY] = dragCoords // 拖拽動(dòng)作的初始位置const { offsetX, offsetY } =  e.event // 拖拽動(dòng)作的結(jié)束位置const [ x, y ] = clip.value // 節(jié)點(diǎn)在坐標(biāo)系內(nèi)的坐標(biāo)const { clientWidth, clientHeight } = document.body // 屏幕寬高。// x軸、y軸的刻度都1000// 根據(jù)option.grid的配置，x軸長(zhǎng)度=clientWidth; y軸長(zhǎng)度 = clientHeight - 50 - 50;// 將屏幕的偏移量數(shù)值，轉(zhuǎn)為在坐標(biāo)系中的偏移量數(shù)值const xCoord = x + (offsetX - startX) * 1000 / clientWidthconst yCoord = y - (offsetY - startY) * 1000 / (clientHeight-100)console.log('節(jié)點(diǎn)的新坐標(biāo)：', [xCoord , yCoord ]);}

問(wèn)題4：怎么用折線表示節(jié)點(diǎn)的關(guān)系呢？

type: 'lines' 的圖表可以通過(guò)多線條畫(huà)出折線

    series: [{type: 'graph',symbolSize: 40,coordinateSystem: 'cartesian2d',draggable: true,lineStyle: { width: 2, color: '#000' },label: { show: true, formatter: (e: any) => e.data.title },edgeSymbol: ['', 'arrow'],data: toRef(() => graphData.value.data),// links: toRef(() => graphData.value.links),}, {type: 'lines',coordinateSystem: 'cartesian2d',polyline: true, // 允許多線條lineStyle: { color: '#000', width: 2, join: 'miter' },data: [ [[0,2],[0,-56],[0,-56],[0,-114]],[[0,-114],[0,-230],[-170,-230],[-170,-346]]],}]