1.设计师设计了下面一个很像力导向图的图形,让在页面上实现,图中的各个圆都可以点击触发事件。
2,我目前的两个思路:
(1)简单粗暴的html+css。除了“综合分”的几个圆都好弄,用button填充背景色或背景图片就可以弄。“综合分”这个可以做几个图形,然后根据分数高低设置不同的背景图,圆与圆之间的连接线可以做一个比较大的背景图来弄,剩下的就是布局的问题了,这种做法比较麻烦的就是布局,尤其是要自适应宽度,那会很麻烦。
(2)用echarts、d3等类库的力导向图来做,目前正在研究是否能够比较好的实现。
3,问题:哪位做类似需求比较多的前端同学给个建议呗,谢谢。
我最后还是用echarts来实现了,我参考echarts官网的这个simple graph demo做成了,感觉echarts还是很好用的,做出来的效果如下,虽然和设计要求的不完全一致,但是可以满足基本需求了。