echarts旭日图，如何正确的展示图例？

Question

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

var data = [
  {
    name: '#01',
    itemStyle: {
      color: '#da0d68'
    },
    children: [
      {
        name: '第1-5d',
        value: 1,
        itemStyle: {
          color: '#975e6d'
        },
        label:{
          position:'outside'
        }
      },
       {
        name: '第6-10d',
        value: 1,
        itemStyle: {
          color: '#975e6d'
        },
        label:{
          position:'outside'
        }
      },
       {
        name: '第11-15d',
        value: 1,
        itemStyle: {
          color: '#975e6d'
        },
        label:{
          position:'outside'
        }
      },
    ]
  },
  {
    name: '#02',
    itemStyle: {
      color: '#187a2f'
    },
    children: [
      {
        name: '第1-5d',
        value: 1,
        itemStyle: {
          color: '#a2b029'
        },
        label:{
          position:'outside'
        }
      },
      {
        name: '第6-10d',
        value: 1,
        itemStyle: {
          color: '#718933'
        },
        label:{
          position:'outside'
        }
      },
      {
        name: '第11-15d',
        value: 1,
        itemStyle: {
          color: '#5e9a80'
        },
        label:{
          position:'outside'
        }
      }
    ]
  },
];
option = {
  backgroundColor: '#031f2d',
  
visualMap: {
      left:50,      
      top:170,
      dimension: 2,
      // orient: 'horizontal',
      padding:5,
      textGap: 4,
      color:['pink','yellow'],
      categories: ['#01','#02']
  },
  title:[
    {
      text:'2345',
      textStyle: {
          fontSize:25,
          color: 'rgba(255,255,255,0.85)'
      },
      top: '47%',
      left: 'center'
    },
    {
      text:'MV',
      textStyle: {
          fontSize:14,
          color: 'rgba(255,255,255,0.85)'
      },
      top: '51%',
      left: 'center',
    }
  ],
    //   title: {
    //     text: '2345',
    //     subtext: 'MV',
    //     textAlign: center,
    //     x: 'center',
    //     y: 'center',
    //     textStyle: {
    //         fontSize:30,
    //         fontWeight:'',
    //         color: ['#333']
    //     },
    //     subtextStyle: {
    //         color: '#666',
    //         fontSize: 16
    //     },
    // },
  // visualMap:{
  //     right: 50,
  //     top: 170,
  //     dimension: 2,
  //     padding: 5,
  //     textGap: 4,
  //     seriesIndex: 0,
  //     color: ['#da0d68'],
  //     categories: ['#01'],
  // },
  series: {
    type: 'sunburst',
    data: data,
    radius: [0, '95%'],
    emphasis: {
      focus: 'ancestor'
    },
    levels: [
      {},
      {
        r0: '15%',
        r: '35%',
        itemStyle: {
          borderWidth: 2
        },
        label: {
          // rotate: 'tangential'
        }
      },
      {
        r0: '35%',
        r: '70%',
        label: {
          align: 'right'
        }
      },
      // {
      //   r0: '70%',
      //   r: '72%',
      //   label: {
      //     position: 'outside',
      //     padding: 3,
      //     silent: false
      //   },
      //   itemStyle: {
      //     borderWidth: 3
      //   }
      // }
    ]
  }
};

效果图：

Answer 1

单纯只增加了 visualMap，没有什么问题啊，你看看是不是你的 min 和 max 设置的有问题。

options = {
  visualMap: {
    type: 'piecewise',
    min: 0,
    max: 10,
    left: 'right',
    top: 'center',
    calculable: true,
    realtime: false,
    splitNumber: 8,
    inRange: {
      color: [
        '#fee99d',
        '#e34a33'
      ]
    }
  },
}