echarts的graph类型图表可视化相关

由于项目需要,我们要做一个物流站点的可视化,现在问题就是我这边拿到的数据是每个点之间的相对距离,就是知道每个点之间的距离(这个距离还不一定是直线距离)。

一开始我就是想暴力求解,因为原则上知道每个点之间的相对距离,确定一个点的位置,比如把物流中心设为(0,0)后,其他点的位置应该都可以知道。(只要不断画圆就可以了)

  1. 这个方法有优点,就是每个点的位置很精确,相对距离是精确的,图示明了
  2. 这个方法问题有几点,如果点较多,那么计算量很大
  3. 没有想到合适的算法来实现这个操作
  4. 每个点之间的距离给的不一定是直线距离,画圆只能确定其最远距离

所以在和同事讨论后,由于题目要求是计算到各个点的配送路线,所以我只需要知道这条配送路线上的每个点的相对距离就可以了

  1. 所以这个问题现在化简了,我只需要把一条配送路线上的点标识出来就可以了
  2. 上面的3,4问题还是没有解决

由于ddl到了,所以我一边参照 echarts 官方文档和实例来做,看到 echarts 的graph里有个 type:"force",这个力引导布局不需要指明data(或者nodes)里每个点的绝对坐标就可以生成一幅图

  1. 这让我用手头的数据可以直接生成一幅图
  2. 但问题明显,每次生成的图不一样(但这个其实不是那么影响)
  3. 由于随机,要调整 force 里的参数 repulsion 和 gravity,我调整了几次都没法不让所有线搅在一起,运气好就是清晰的路线图,运气不好就是糊成一坨(也许改变每条线的颜色可以缓解?)

所以最后我还是想把所有点的坐标 指明 ,注意我想的是 指明 而不是 计算 ,也许可以用一些小trick,我可以把每个点的大致位置生成(用限定范围的随机数)毕竟每个点在图上的距离是不是真的那样并不重要,只要看起来像就可以了,当然,这个目前只是个粗略的想法,具体如何实现,还要明天实践一下。

在写这篇日记的时候我突然对界面布局有了个不错的,主意,和同事交流了。

猜你喜欢

转载自www.cnblogs.com/alexxql/p/12677031.html