刚开始学 记录一下
<template>
<div class="hello">
<div ref="chart" id="echarts" style="height: 500px; width: 600px"></div>
<button @click="remove">返回中国地图</button>
</div>
</template>
<script setup>
import * as echarts from "echarts"; //引入echarts
import china from "@/assets/json/china.json";
import fujian from "@/assets/json/fujian.json";
import anhui from "@/assets/json/anhui.json";
import aomen from "@/assets/json/aomen.json";
import beijing from "@/assets/json/beijing.json";
import chongqing from "@/assets/json/chongqing.json";
import gansu from "@/assets/json/gansu.json";
import guangdong from "@/assets/json/guangdong.json";
import guangxi from "@/assets/json/guangxi.json";
import guizhou from "@/assets/json/guizhou.json";
import hainan from "@/assets/json/hainan.json";
import hebei from "@/assets/json/hebei.json";
import heilongjiang from "@/assets/json/heilongjiang.json";
import henan from "@/assets/json/henan.json";
import hubei from "@/assets/json/hubei.json";
import hunan from "@/assets/json/hunan.json";
import jiangsu from "@/assets/json/jiangsu.json";
import jiangxi from "@/assets/json/jiangxi.json";
import jilin from "@/assets/json/jilin.json";
import liaoning from "@/assets/json/liaoning.json";
import neimenggu from "@/assets/json/neimenggu.json";
import ningxia from "@/assets/json/ningxia.json";
import qinghai from "@/assets/json/qinghai.json";
import shandong from "@/assets/json/shandong.json";
import shanghai from "@/assets/json/shanghai.json";
import shanxi2 from "@/assets/json/shanxi (2).json";
import shanxi from "@/assets/json/shanxi.json";
import sichuan from "@/assets/json/sichuan.json";
import taiwan from "@/assets/json/taiwan.json";
import tianjin from "@/assets/json/tianjin.json";
import xianggang from "@/assets/json/xianggang.json";
import xinjiang from "@/assets/json/xinjiang.json";
import xizang from "@/assets/json/xizang.json";
import yunnan from "@/assets/json/yunnan.json";
import zhejiang from "@/assets/json/zhejiang.json";
import { onMounted, reactive, ref } from "vue";
const chart = ref();
// 各省的人口数据
const mapData = [
{ name: "河北省", value: 10000 },
{ name: "山西省", value: 9000 },
{ name: "辽宁省", value: 4000 },
{ name: "吉林省", value: 5000 },
{ name: "黑龙江省", value: 6000 },
{ name: "江苏省", value: 2000 },
{ name: "浙江省", value: 800 },
{ name: "安徽省", value: 2000 },
{ name: "福建省", value: 4600 },
{ name: "江西省", value: 3200 },
{ name: "山东省", value: 200 },
{ name: "河南省", value: 200 },
{ name: "湖北省", value: 2060 },
{ name: "湖南省", value: 3000 },
{ name: "广东省", value: 2900 },
{ name: "海南省", value: 2000 },
{ name: "四川省", value: 2120 },
{ name: "贵州省", value: 2350 },
{ name: "云南省", value: 2000 },
{ name: "陕西省", value: 2890 },
{ name: "甘肃省", value: 2740 },
{ name: "青海省", value: 2660 },
{ name: "台湾省", value: 2440 },
{ name: "内蒙古自治区", value: 2350 },
{ name: "广西壮族自治区", value: 2700 },
{ name: "西藏自治区", value: 2000 },
{ name: "宁夏回族自治区", value: 2000 },
{ name: "新疆维吾尔自治区", value: 2000 },
{ name: "北京市", value: 2000 },
{ name: "天津市", value: 2000 },
{ name: "上海市", value: 2000 },
{ name: "重庆市", value: 2000 },
{ name: "香港特别行政区", value: 2000 },
{ name: "澳门特别行政区", value: 2000 },
{ name: "南海诸岛", value: 800 },
];
// 用做点击完带到init方法的数据
const provinces = {
台湾省: taiwan,
河北省: hebei,
山西省: shanxi,
辽宁省: liaoning,
吉林省: jilin,
黑龙江省: heilongjiang,
江苏省: jiangsu,
浙江省: zhejiang,
安徽省: anhui,
福建省: fujian,
江西省: jiangxi,
山东省: shandong,
河南省: henan,
湖北省: hubei,
湖南省: hunan,
广东省: guangdong,
海南省: hainan,
四川省: sichuan,
贵州省: guizhou,
云南省: yunnan,
陕西省: shanxi2,
甘肃省: gansu,
青海省: qinghai,
新疆维吾尔自治区: xinjiang,
广西省: guangxi,
内蒙古自治区: neimenggu,
宁夏回族自治区: ningxia,
西藏自治区: xizang,
北京市: beijing,
天津市: tianjin,
上海市: shanghai,
重庆市: chongqing,
香港特别行政区: xianggang,
澳门特别行政区: aomen,
};
// const mapData = [
// {name: '漳州市', value: 10100},
// {name: '南平市', value: 12000},
// {name: '三明市', value: 10300},
// {name: '龙岩市', value: 10700},
// {name: '厦门市', value: 100},
// {name: '莆田市', value: 1200},
// {name: '福州市', value: 3000},
// {name: '泉州市', value: 1900},
// {name: '宁德市', value: 1090},
// ]
const init = (name) => {
// 获取图标 初始化
var myChart = echarts.init(document.getElementById("echarts"));
// 图标指定数据
echarts.registerMap(name, name);
const option = {
// 图标标题
title: {
text: "地图",
},
// 鼠标移入显示的内容
tooltip: {
trigger: "item",
formatter: "{b}<br/>{c} (p / km2)",
},
// 数据视图
toolbox: {
show: true,
orient: "vertical",
left: "right",
top: "center",
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {},
},
},
// 用于设置地图的高量
visualMap: {
min: 800,
max: 5000,
text: ["High", "Low"],
realtime: false,
calculable: true,
inRange: {
color: ["lightskyblue", "yellow", "orangered"],
},
},
geo: [
{
// 指定图标为地图
type: "map",
// 设置数据
map: name,
zoom: 1.2, // 改变这个值的大小就可以了
// 开启缩放
roam: true,
// 设置缩放的大小
scaleLimit: {
min: 1.2,
max: 30,
},
},
],
series: [
{
type: "map",
// 跟geo关联
geoIndex: 0,
// 设置人口的数据 用于显示在地图上
data: mapData,
},
],
};
// 把option设置给myChart实例
myChart.setOption(option, true);
// 点击切换到省份
myChart.on("click", function (params) {
// 拿到点击的哪一个省份 用provinces里面对象的数据带到init方法里面用于渲染省份
init(provinces[params.name]);
});
};
// 点击回到中国地图
function remove() {
init(china);
}
// 加载完就调用的方法 vue3生命周期
onMounted(() => {
init(china);
});
</script>
<style scoped>
</style>
中国地图及各省的json 链接: https://pan.baidu.com/s/1nTip56J1jtAqRyPaaplO4Q?pwd=knju 提取码: knju