Vue3 旭日图 - 技术栈

效果图：
html 复制代码
<template>
    <div class="go-SunriseChart">
      <v-chart ref="vChartRef" :option="option" style="width: 100%; height: 400px;"></v-chart>
    </div>
  </template>
  
  <script setup lang="ts">
  import {
    ref,
    onMounted
  } from "vue";
  import VChart from "vue-echarts";
  import { use } from "echarts/core";
  import { CanvasRenderer } from "echarts/renderers";
  import { SunburstChart } from "echarts/charts";
  import {
    DatasetComponent,
    GridComponent,
    TooltipComponent,
    LegendComponent,
    TitleComponent,
  } from "echarts/components";
  
  use([
    DatasetComponent,
    GridComponent,
    TitleComponent,
    CanvasRenderer,
    SunburstChart,
    TooltipComponent,
    LegendComponent,
  ]);
  
  // 获取图表实例
  const vChartRef = ref();
  
  let colorList = [
    "#0674F1",
    "#029CD4",
    "#2BA471",
    "#F5BA18",
    "#E37318",
    "#E37318",
    "#E37318",
    "#E37318",
  ];
  let levelList = ["ff", "e5", "cc", "b2", "99", "7f", "66"];
  
  const setColor = (arr?: any, level?: any, mainColor?: any) => {
    let levelNum = level ? level + 1 : 1;
    for (let i = 0; i < arr.length; i++) {
      arr[i].itemStyle = {
        color: levelNum === 1 ? colorList[i] : mainColor + levelList[levelNum],
      };
      if (arr[i].children && arr[i].children.length > 0) {
        setColor(
          arr[i].children,
          levelNum,
          levelNum === 1 ? colorList[i] : mainColor
        );
      }
    }
  };
//   数据
  const dataJson = ref<any>([
    {
      name: "入户核实",
      value: 11,
      children: [
        {
          name: "救助",
          value: 7,
        },
      ],
    },
    {
      name: "未处理",
      value: 3,
    },
    {
      name: "电话问询",
      value: 3,
      children: [
        {
          name: "救助",
          value: 1,
        },
      ],
    },
  ]);
  
  // 设置颜色
  setColor(dataJson.value);
  
  const option = ref<any>({
    // title: {
    //   text: '旭日图示例',
    //   left: 'center'
    // },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      show: true,
      bottom: 10
    },
    series: {
      type: "sunburst",
      data: dataJson.value,
      radius: ["40%", "90%"],
      itemStyle: {
        borderRadius: 0,
        borderWidth: 0,
      },
      label: {
        show: true,
        rotate: 0,
        position: "inside",
        formatter: `{b}: {c}人`,
        fontSize: 10,
        fontFamily: "Arial",
        textShadowColor: "transparent",
        shadowColor: "transparent",
      },
      emphasis: {
        label: {
          color: "#fff",
          show: true,
          rotate: 0,
          position: "inside",
          fontSize: 10,
          fontFamily: "Arial",
        },
        focus: 'ancestor'
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
    },
  });
  
  // 确保组件挂载后正确渲染
  onMounted(() => {
    if (vChartRef.value) {
      // 可以在这里执行额外的图表操作
    }
  });
  </script>
  
  <style scoped>
  .go-SunriseChart {
    background-color: #000;
    width: 100%;
    height: 400px;
  }
  </style>