Vue3 矩形树图

效果图：

<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>