echart旭日图_echarts之用饼图制作带labelline的旭日图(一)

前言

如果你想要用较少的代码实现比较酷炫的数据统计表，echarts是值得你考虑的一种实现方式。官网提供了很多实例供参考。并且配置项手册很详细，几乎囊括了所有的绘图需求。但是再全的配置，偶尔也会有不满足需求的时候。最近在开发过程中就遇到了一个比较头疼的问题。

先看下UI效果

dy20180512171652810.jpg

思路

拿到需求，先看echarts的配置手册，很容易想到使用旭日图来做。

但是还没等大致效果出来，坑就来了，旭日图的配置项里面没有labelline，也就是没有指向色环的那根线。

额。。。咋整

先百度看看吧，找啊找，还是没有解决方案

没办法，迷茫了好一会，只能在配置手册里瞎看。。。突然，我看到了这张图

dy20180512175000465.jpg

灵机一动，是不是可以用饼图来做旭日图呢，只需要把外面一圈不需要的数据设置成透明就行了？

码代码

服务端给的数据结构是这样的

[{

"value": 60,

"name": "移动端",

"children": [{

"value": 40,

"name": "苹果"

}, {

"value"