旭日图

旭日图由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系

import * as echarts from "echarts";
export default {
  install: (app: any) => {
    app.config.globalProperties.$leida = (id: any) => {
      var chartDom = document.getElementById(id)!;
      if (chartDom == null) {
        return;
      }
      echarts.dispose(chartDom);
      var myChart = echarts.init(chartDom, "", { width: 800, height: 500 });
      var data = [
        {
          name: "Grandpa",
          children: [
            {
              name: "Uncle Leo",
              value: 15,
              children: [
                {
                  name: "Cousin Jack",
                  value: 2,
                },
                {
                  name: "Cousin Mary",
                  value: 5,
                  children: [
                    {
                      name: "Jackson",
                      value: 2,
                    },
                  ],
                },
                {
                  name: "Cousin Ben",
                  value: 4,
                },
              ],
            },
            {
              name: "Father",
              value: 10,
              children: [
                {
                  name: "Me",
                  value: 5,
                },
                {
                  name: "Brother Peter",
                  value: 1,
                },
              ],
            },
          ],
        },
        {
          name: "Nancy",
          children: [
            {
              name: "Uncle Nike",
              children: [
                {
                  name: "Cousin Betty",
                  value: 1,
                },
                {
                  name: "Cousin Jenny",
                  value: 2,
                },
              ],
            },
          ],
        },
      ];
      var option = {
        series: {
          type: "sunburst",
          data: data,
          radius: ["10%", "90%"],
        },
      };
      myChart.setOption(option);
    };
  },
};