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

Posted 2021-03-01 alexxql

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

一开始我就是想暴力求解，因为原则上知道每个点之间的相对距离，确定一个点的位置，比如把物流中心设为(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，我可以把每个点的大致位置生成（用限定范围的随机数）毕竟每个点在图上的距离是不是真的那样并不重要，只要看起来像就可以了，当然，这个目前只是个粗略的想法，具体如何实现，还要明天实践一下。

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