echarts 中的1/4圆环行图的使用

最近，新来的ui小哥哥各种脑洞大开，给了我这样的设计图，一眼望过去，挺简单的，就是四个四分之圆的环行图组合在一起，两边就是各自的图例数据，

再认真看一眼，发现这个图有点意思啊~~~

 

 之前做过这样的图：

 

 一个半圆，显示一个数据，但是现在这个不仅不是半圆，而且还不是显示一个数据而已，这圆应该是好处理的，毕竟弄得了半圆，自然也就能弄四分之一分圆啦，

关键在于，这上面的数据不止一个呀~~

于是，我又开始各种找找找，看看看，来来去去还是只有一个数据的，最后我又在gallery中找到了几乎一样的，真的是幸运啊！这个gallery简直就是福音！

 

附上链接：https://gallery.echartsjs.com/editor.html?c=xvIJDnlrkl

 找到这个就成功一大半了！那就考虑一下，如何下手吧！

首先，需要把这里的1/2圆配置成1/4圆，顺便调整显示角度

 

其次，需要考虑设计图中的间距用什么调整比较合理，一开始我选择使用角度调整来控制间距，但是结果是拼接起来的圆不够圆润，特别是每个图的两端都往里面缩了，大概就是下图的意思，

 

所以其实直接设置一个margin值就很不错了，不会出现这样的情况。

最后，配置一下外围一粗一细的线条，将数据渲染上去即可！