旭日图 图例

---

前言

kbk之前要实现一个旭日图+图例得效果

echarts旭日图图例该要如何展示右侧这样的图例呢？试过了加上配置legend 和 visualMap,加上visualMap以后，旭日图里的颜色值丢失了

图例这个和平常需要的得图例不一致，就研究了一下，效果功出来啦

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、效果图

示例：

二、代码示例

   var data = [
        {
          name: 'AAA',
          itemStyle: {
            color: '#ff6600'
          },
          value:13,
          children: [
            {
              name: 'aa123',
              value: 2,
              itemStyle: {
                color: '#ff6600'
              },
              visualMap: false
            },
            {
              name: 'aa123456',
              value: 1,
              itemStyle: {
                color: '#ff6600'
              },
              visualMap: false
            },
            {
              name: 'aa123123',
              value: 3,
              itemStyle: {
                color: '#ff6600'
              },
              visualMap: false
            }, {
              name: 'aaa345345',
              value: 4,
              itemStyle: {
                color: '#ff6600'
              },
              visualMap: false
            }, {
              name: 'aaa678678',
              value: 3,
              itemStyle: {
                color: '#ff6600'
              },
              visualMap: false
            },
          ]
        },
        {
          name: 'BBB',
          itemStyle: {
            color: '#53aeff'
          },
          value:16,
          children: [
            {
              name: 'bb12345678',
              value: 5,
              itemStyle: {
                color: '#53aeff'
              },
              visualMap: false
            },
            {
              name: 'bb12345678',
              value: 1,
              itemStyle: {
                color: '#53aeff'
              },
              visualMap: false
            },
            {
              name: 'bb12345678',
              value: 3,
              itemStyle: {
                color: '#53aeff'
              },
              visualMap: false
            }, {
              name: 'bb12345678',
              value: 4,
              itemStyle: {
                color: '#53aeff'
              },
              visualMap: false
            }, {
              name: 'bb12345678',
              value: 3,
              itemStyle: {
                color: '#53aeff'
              },
              visualMap: false
            },
          ]
        }
      ];
      var option = {
        grid: {
          left: '12%',
          right: '3%',
        },
        visualMap: {
          // min max color text
          left: '45%',
          bottom: 0,
          orient: 'horizontal',
          splitNumber: 2,
          min: 12,
          max: 17,
          inRange: {
            color: ['#53aeff', '#ff6600'].reverse()
          },
          text: ['AAA', 'BBB'].reverse(),
        },
        series: {
          type: 'sunburst',
          data: data,
          radius: [0, '70%'],
          label: {
            rotate: 'radial',
            formatter: function (params) {
              if (params.value < 0.3) {
                return ' '
              } else {
                return params.name.slice(0, 3) + '...'
              }
            }
          },
          emphasis: {
            label: {
              show: true,
              formatter: function (params) {
                console.log(params)
                return params.name
              }
            },
            focus: 'none'
          },
          levels: [{},
          {
            r0: '15%',
            r: '35%',
            itemStyle: {
              borderWidth: 2,
            },
          },
          {
            r0: '35%',
            r: '70%',
            label: {
              align: 'right'
            }
          },]
        }
      };

---


注意点：
不是很完善，可以借鉴

1. visualMap 该属性中的   min max  inRange.color  和 text 需要注意
 进行判断来着 （数据中的value）