echarts 旭日图 自定义图例的实现

echarts官网中的旭日图示例中，我们发现没有做好的图例，所以我们可以自定义图例

实现的效果如下：

具体实现效果是通过visualMap来实现的，废话不多说，直接上代码：

setPersistentChart = function() {
    const data=[
      {
        "name": "内审未发现",
        "values": "1",
        "draftNumbers": 4
      },
      {
        "name": "内审已发现",
        "values": "0.9",
        "draftNumbers": 5,
        "children": [
          {
            "name": "内审已发现但未督促整改",
            "values": "0.90",
            "draftNumbers": 2
          },
          {
            "name": "内审已督促整改",
            "values": "0.8",
            "draftNumbers": 1,
            "children": [
              {
                "name": "内审已持续跟踪",
                "values": "0.7",
                "draftNumbers": 1
              },
              {
                "name": "内审已督促整改但未持续跟踪",
                "values": "0.80",
                "draftNumbers": 0
              }
            ]
          }
        ]
      }
    ]
    // 获取 chart 元素
    const chartDom = self.$refs.persistentChart;
    // 初始化 echarts
    const myChart = echarts.init(chartDom);
    const colors =['rgb(34,177,76)','rgb(255,242,0)','rgb(112,146,190)','rgb(255,127,39)','rgb(0,162,232)','rgb(221,45,75)'];
    let colorIndex = 0;
    const convertData = function(data) {
      return data.map(item => ({
        name: item.name,
        value: item.draftNumbers,
        children: item.children ? convertData(item.children) : null,
        values: item.values,
        itemStyle: {
          color: colors[colorIndex++%colors.length] // 你可以在这里设置颜色，可以是数组或函数等
        }
      }));
    };
    const convertedData = convertData(detail);
    const getAllNodeInfo = function(data) {
      let nodes = [];
      // 遍历当前节点的信息，并添加到数组中，如果你的图例需要排除图上不存在的，则可以添加一个判断条件 让循环里面item.value >0 就可以了
      data.forEach(item => {
        nodes.push({
          name: item.name,
          color: item.itemStyle.color,  // 获取颜色信息
        });
        // 如果当前节点有孩子节点，则递归调用该函数
        if (item.children) {
          nodes = nodes.concat(getAllNodeInfo(item.children));
        }
      });
      return nodes;
    };
    const categoryArray = getAllNodeInfo(convertedData);
    const categoryMap = {};
    categoryArray.forEach(item => {
      categoryMap[item.name] = item.color;
    });
    const option = {
      title: {
        text: '旭日图',
        left: 'center',
        textStyle: {
          color: '#1a1b4e',
          fontStyle: 'normal',
          fontSize: 24
        },
      },
      visualMap: {
        left: 'right',
        top: 'center',
        dimension: 2,
        seriesIndex: 2,
        padding: 5,
        textGap: 4,
        selectedMode: false,//禁止了点击，因为现在的图列与图是无法联动的
        color: Object.values(categoryMap).reverse(),
        categories: Object.keys(categoryMap),// 设置图例的名称
      },
      series: [{
        type: 'sunburst',
        roam: false,
        nodeClick: true,//禁用了数据下钻的效果，如果需要数据下钻请删除roam和nodeClick
        itemStyle: {
          normal: {
            label: {
              show: true,
              formatter: "{b}"
            },
          },
        },
        label: {
          normal: {
            show: true,
            formatter: function(params) {
              return  params.value + '条(' + (params.value / detail.reduce((acc, cur) => acc + cur.draftNumbers, 0) * 100).toFixed(2) +'%)';
            },
            fontSize: 8,
            position: 'insideRight',  // 调整为 inside 或 insideRight
          }
        },
        data: convertedData,
        radius: [0, '75%'],
        sort: null,
      }]
    };
    myChart.setOption(option);
  };

主要的问题就在于如何图例如何与图的颜色，名称相对应：我这里定义了一个颜色数组，然后给每一个类型都赋值不同的颜色，后面通过getAllNodeInfo()方法去获取了所有节点的一个名称和颜色；最后通过color和categories将名称和颜色一一对应起来，为什么要用到reverse()是因为拿到的图例颜色数组，由于和name属性是反着的，所以一定要将数组reverse一下。这样就可以实现我们上面的效果啦！