ECharts:Graph图表拖拽节点

需求:实现一个可视化编辑器,用户可以添加节点,并对节点进行拖拽编辑,线条要用折线而不是用自带的直线

实现期间碰到很多问题,特意记录下来,留待将来碰到这些问题的同学,省去些解决问题的时间

问题1:节点的data如下,不使用直角坐标系一切正常,但使用直角坐标系时,节点怎么不见了?

js 复制代码
series: [{
    type: 'graph',
	data: [
		{ name: '1', x: 0, y: 0}, 
	    { name: '2', x: 10, y: 10 }
	]
}]

解决方法:开启坐标系后,坐标要以数组的方式存到value中

js 复制代码
series: [{
    type: 'graph',
	coordinateSystem: 'cartesian2d',
	data: [
		{ name: '1', value: [0, 0] }, 
	    { name: '2', value: [10, 10] }
	]
}]

问题2:怎么拖拽节点?并且获得节点拖拽的偏移量呢?

1、在配置项中允许节点拖拽:draggable: true

js 复制代码
series: [{
    type: 'graph',
    draggable: true,
}]

2、监听鼠标按下和松开的事件,按下时获得拖拽动作的初始坐标,松开时获得拖拽动作的结束坐标,比较后获得节点的偏移量

js 复制代码
let dragCoords = null
myChart.on('mousedown', (e) =>{
	dragCoords = [e.event?.offsetX, e.event?.offsetY]
});
myChart.on('mouseup', (e) =>{
    const { offsetX, offsetY } =  e.event
    console.log('初始坐标:': dragCoords , '结束坐标:', [offsetX, offsetY] )
});

问题3:直接将坐标与偏移量进行加减,计算出来的坐标再赋值给节点,重新渲染后的节点位置与拖拽结束的位置不一样

原因: 出现这个问题,是因为坐标的数值与px的数值,它们只是一个正比例关系。

解决方法: 计算坐标轴的长度与屏幕可视区域宽高的比例,根据比例将节点在屏幕的偏移量转为在坐标系的偏移量。

举例: x轴刻度为1000,渲染在屏幕是500px,那么拖拽节点向右移动100px,节点的x坐标应该增加200

js 复制代码
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,
    },
}

根据以上配置。可以得到: x轴长度 = document.body.clientWidthy轴长度 = document.body.clientHeight-50-50

当然,如果需求允许,设置grid.width=1000; grid.height=1000; 这样是最方便的,直接将坐标的数值与偏移量相加减,就可以得到新的坐标

js 复制代码
  function updatePosition ( e: any) {
    if(!e.data.name || !dragCoords) return
    const [startX, startY] = dragCoords // 拖拽动作的初始位置
    const { offsetX, offsetY } =  e.event // 拖拽动作的结束位置
    const [ x, y ] = clip.value // 节点在坐标系内的坐标
    const { clientWidth, clientHeight } = document.body // 屏幕宽高。
    // x轴、y轴的刻度都1000
    // 根据option.grid的配置,x轴长度=clientWidth; y轴长度 = clientHeight - 50 - 50;
    // 将屏幕的偏移量数值,转为在坐标系中的偏移量数值
    const xCoord = x + (offsetX - startX) * 1000 / clientWidth
    const yCoord = y - (offsetY - startY) * 1000 / (clientHeight-100)
    console.log('节点的新坐标:', [xCoord , yCoord ]);
  }

问题4:怎么用折线表示节点的关系呢?

type: 'lines' 的图表可以通过多线条画出折线

js 复制代码
    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]]
      ],
    }]
相关推荐
晓得迷路了9 小时前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
徊忆羽菲1 天前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
DataGear3 天前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
Endeavour_T3 天前
ECharts图表怎么做自适应?
前端·echarts
Kier13 天前
🔋 Vue + ECharts 实现分段折线图教学实战:电池趋势图案例
前端·javascript·echarts
@十八子德月生15 天前
第十章——8天Python从入门到精通【itheima】-99~101-Python基础综合案例-数据可视化(案例介绍=JSON格式+pyecharts简介)
大数据·python·信息可视化·pycharm·echarts·数据可视化
天上掉下来个程小白15 天前
Apache ECharts-02.入门案例
前端·spring boot·apache·echarts·苍穹外卖
GIS好难学17 天前
Echarts数据可视化开发教程+120套开源数据可视化大屏H5模板
前端·信息可视化·echarts
小浪努力学前端18 天前
React + ECharts:给tooltip里的按钮绑定事件,我踩过的那些坑
前端·react.js·echarts
elon_z21 天前
【项目实训#08】HarmonyOS知识图谱前端可视化实现
前端·echarts·知识图谱·harmonyos