Vue3使用Echarts实现自定义地图（使用阿里云数据可视化平台）

Vue3使用Echarts实现自定义地图

1.获取地图JSON文件

推荐使用 阿里云数据可视化平台

选择你想要使用地图区域并下载JSON文件

2.把地图JSON文件引入Vue3项目中

放在src/assets中

引入你想要使用地图的组件中

3.使用Echarts创建地图

准备地图容器

<template>
<div id="user_region">
div>
template>

Echarts代码如下

//创建用户地域分布
const createRegion = () => {let mapChartInstance = null;// 获取地图容器  let mapChart = document.getElementById("user_region");mapChartInstance = markRaw(echarts.init(mapChart, undefined, { devicePixelRatio: 2, renderer: "svg" }));// 注册地图echarts.registerMap("China", China); mapChartInstance.setOption({title: {text: "用户地域分布",left: 10,top: 10,textStyle: {color: "#000",fontSize: 16,},},visualMap: {show: true,min: 0,max: 10000,type: "piecewise",right: 50,bottom: 20,inRange: {//控制颜色深浅opacity: 0.35, },pieces: [// 自定义每一段的范围，以及每一段的文字{ gte: 50, color: "#17459e" }, { gte: 20, lte: 50, color: "#3886e1" },{ gte: 10, lte: 20, color: "#73b3f3" },{ gte: 1, lte: 10, color: "#c0ddf9" },{ lte: 1, color: "#ebedf0" },],},series: [{name: "中华人民共和国",type: "map",map: 'China',geoIndex: 0,//假数据data: [{name: "江苏省",value: 100,},{name: "北京市",value: 86,},{name: "上海市",value: 68,},{name: "重庆市",value: 123,},{name: "河北省",value: 34,},{name: "河南省",value: 32,},{name: "云南省",value: 160,},{name: "辽宁省",value: 43,},{name: "黑龙江省",value: 181,},{name: "湖南省",value: 24,},{name: "安徽省",value: 33,},{name: "山东省",value: 54,},{name: "新疆省",value: 118,},{name: "浙江省",value: 44,},{name: "江西省",value: 220,},{name: "湖北省",value: 21,},{name: "广西省",value: 30,},{name: "甘肃省",value: 12,},{name: "山西省",value: 32,},{name: "内蒙古省",value: 35,},{name: "陕西省",value: 25,},{name: "吉林省",value: 45,},{name: "福建省",value: 28,},{name: "贵州省",value: 18,},{name: "广东省",value: 37,},{name: "青海省",value: 62,},{name: "西藏省",value: 43,},{name: "四川省",value: 33,},{name: "宁夏省",value: 8,},{name: "海南省",value: 19,},{name: "台湾省",value: 190,},{name: "香港省",value: 11,},{name: "澳门省",value: 10,}, {name: "内蒙古自治区",value: 200}, {name: "天津市",value: 230,}, {name: "广西壮族自治区",value: 30,}, {name: "新疆维吾尔自治区",value: 100,}, {name: "宁夏回族自治区",value: 500,}, {name: "西藏自治区",value: 70}],label: {show: true}},],tooltip: {// 自定义弹窗// 鼠标引入省份,不断触发.params 对象.当前省份的信息.formatter: function (params) {//console.log(params);return params.seriesName + "
" + params.name + ":" + params.value + "人";},},geo: {// 使用地图map: "China", label: {//显示地域标签  show: false, //标签字体颜色  color: "#ffffff", },layoutCenter: ["50%", "50%"],//地图尺寸layoutSize: "120%",// 缩放  aspectScale: 1,itemStyle: {//区域边框宽度  borderWidth: 0.5,//区域边框颜色  borderColor: "#d1d1d1", //区域颜色  areaColor: "#eeeeee",},emphasis: {// 鼠标悬浮效果itemStyle: {borderWidth: 0.5,borderColor: "#33ddff",areaColor: "#26627f",},label: {//对应的鼠标悬浮效果show: true,color: "#ffffff",},},},});
};

然后把这个初始化地图的Echarts函数放onMounted周期中

效果图如下

注意事项：

1. 初始化代码需要在onMounted中执行
2. 地图容器必须有具体高度
3. series内的属性值必须和定义的地图名称相对应，包括data中的数据，否是不会显现出来你想要的数据的（举个栗子：假如模拟数据：data
   […{ name: “江苏” value : 100 }…] 而地图json文件中 城市名称 则是 江苏省
   这样数据value是不会显示出来的）
4. 如果想把地图变成响应式的话，需要在watch中监听修改后的数据，获取到最新的数据后，通过echarts中的setOption()方法，把最初的option数据添加进去，再把变了的数据也放进去，这样就可以实现响应式了，地图会随着数据的变化而进行变化。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！