<!-- 饼图 -->
<template><el-card><template #header> 地级市分类图 </template><div :id="id" :class="className" :style="{ height, width }"></div></el-card>
</template><script setup lang="ts">
import * as echarts from "echarts";
import mapGDjson from "@/views/dashboard/components/gd.json";const props = defineProps({id: {type: String,default: "pieChart",},className: {type: String,default: "",},width: {type: String,default: "200px",required: true,},height: {type: String,default: "200px",required: true,},
});
const options = {backgroundColor: "#fff",title: {text: "广东地图",// subtext: "",sublink:"http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12",},tooltip: {trigger: "item",formatter: "{b}<br/>{c} (p / km2)",},toolbox: {// show: flase,// orient: "vertical",// left: "right",// top: "center",// feature: {//   dataView: { readOnly: false },//   restore: {},//   saveAsImage: {},// },},// visualMap: {//   min: 800,//   max: 50000,//   text: ["High", "Low"],//   realtime: false,//   calculable: true,//   inRange: {//     color: ["lightskyblue", "yellow", "orangered"],//   },// },series: [{name: "广东地图",type: "map",map: "map_area",center: [114.085947, 22.547],zoom: 10,label: {show: true,},itemStyle: {normal: {areaColor: "#b5b8ba", //默认区块颜色#eeeborderColor: "#ffffff", //区块描边颜色borderWidth: 2, //区块描边颜色宽度},emphasis: {areaColor: "#45ad00", //鼠标划过区块的颜色},},data: [// {//   value: 440300,//   name: "深圳市",//   itemStyle: { normal: { areaColor: "#409eff" } },// },// { name: "湾仔", value: 15477.48 },// { name: "东区", value: 31686.1 },// { name: "南区", value: 6992.6 },{name: "福田区",adcode: 440304,itemStyle: { normal: { areaColor: "#409eff" } },},{name: "罗湖区",adcode: 440303,itemStyle: { normal: { areaColor: "#409eff" } },},{name: "南山区",adcode: 440305,itemStyle: { normal: { areaColor: "#409eff" } },},{name: "宝安区",adcode: 440306,itemStyle: { normal: { areaColor: "#409eff" } },},{name: "龙岗区",adcode: 440307,itemStyle: { normal: { areaColor: "#409eff" } },},{name: "盐田区",adcode: 440308,itemStyle: { normal: { areaColor: "#409eff" } },},{name: "龙华区",adcode: 440309,itemStyle: { normal: { areaColor: "#409eff" } },},{name: "坪山区",adcode: 440310,itemStyle: { normal: { areaColor: "#409eff" } },},{name: "光明区",adcode: 440311,itemStyle: { normal: { areaColor: "#409eff" } },},],// 自定义名称映射nameMap: {// "Central and Western": "中西区",// Eastern: "东区",// Islands: "离岛",// "Kowloon City": "九龙城",// "Kwai Tsing": "葵青",// "Kwun Tong": "观塘",// North: "北区",// "Sai Kung": "西贡",// "Sha Tin": "沙田",// "Sham Shui Po": "深水埗",// Southern: "南区",// "Tai Po": "大埔",// "Tsuen Wan": "荃湾",// "Tuen Mun": "屯门",// "Wan Chai": "湾仔",// "Wong Tai Sin": "黄大仙",// "Yau Tsim Mong": "油尖旺",// "Yuen Long": "元朗",},},],
};const chart = ref<any>("");onMounted(() => {chart.value = markRaw(echarts.init(document.getElementById(props.id) as HTMLDivElement));echarts.registerMap("map_area", mapGDjson);chart.value.setOption(options);window.addEventListener("resize", () => {chart.value.resize();});
});onActivated(() => {if (chart.value) {chart.value.resize();}
});
</script>

**

gd.json数据：（由于太多，就不粘贴进来了）

https://geo.datav.aliyun.com/areas_v3/bound/440300_full.json