Vue3 矩形树图 - 技术栈

效果图：
html 复制代码
<template>
  <v-chart ref="vChartRef" :option="option"></v-chart>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { TreemapChart } from "echarts/charts";
import { TooltipComponent, VisualMapComponent } from "echarts/components";
import cloneDeep from "lodash/cloneDeep";

use([CanvasRenderer, TreemapChart, TooltipComponent, VisualMapComponent]);

const vChartRef = ref<typeof VChart>();

const seriesItem = ref<any>({
  name: "treemap",
  type: "treemap",
  leafDepth: 1,
  roam: false,
  animationDuration: 1000,
  animationEasing: 'quinticInOut',
  breadcrumb: {
    show: true,
    height: 22,
    textStyle: {
      color: '#666',
      fontSize: 12
    }
  },
  nodeClick: 'zoomToNode',
  zoomToNodeRatio: 0.32 * 0.32,
//   levels: [ // 层级设置
//     {
//       itemStyle: {
//         borderColor: '#ddd',
//         borderWidth: 2,
//         gapWidth: 2
//       },
//       upperLabel: {
//         show: true,
//         height: 30,
//         textStyle: {
//           color: '#333',
//           fontSize: 14
//         }
//       }
//     },
//     {
//       itemStyle: {
//         borderColor: '#aaa',
//         gapWidth: 1,
//         borderColorSaturation: 0.1
//       }
//     }
//   ],
  upperLabel: {
    show: true,
    height: 30,
    textStyle: {
      color: '#fff',
      fontSize: 12
    }
  },
  label: {
    show: true,
    textStyle: {
      color: '#fff',
      fontSize: 14,
      fontWeight: 'bold'
    }
  },
  itemStyle: {
    borderColor: '#fff',
    // borderWidth: 2,
    // gapWidth: 2
  },
  data: <any>[],
});

const chartData = ref<any>([
  {
    name: "东涌镇",
    value: 20,
  },
  {
    name: "万顷沙镇",
    value: 20,
  },
  {
    name: "龙穴街道",
    value: 30,
  },
  {
    name: "珠江街道",
    value: 40,
  },
  {
    name: "横沥镇",
    value: 50,
  },
  {
    name: "大岗镇",
    value: 60,
  },
  {
    name: "黄阁镇",
    value: 70,
  },
  {
    name: "榄核镇",
    value: 80,
  },
]);
const getSeries = () => {
  let series: any = [];
  const values = chartData.value;
  //系列模板
  let item = cloneDeep(seriesItem.value);
  item.data = values;
  series.push(item);
  return series;
};
const option = reactive({
  tooltip: {
    trigger: 'item',
    formatter: (info: any) => {
      return `${info.name}<br/>值: ${info.value}`;
    }
  },
  visualMap: {
    type: 'continuous',
    min: 0,
    max: 100,
    inRange: {
    //   color: ['#FF6B35', '#F7931E', '#FFD200', '#AFD339', '#59BA47', '#00A896', '#028090', '#05668D']
    },
    calculable: true,
    show: false
  },
  series: getSeries(),
});
</script>