Go directly to the code:
<template>
<div id="jqfbid" style="height: 100%; width: 100%"></div>
</template>
<script>
// 引入34个省份文件
import myecharts from "echarts";
import anhui from "echarts/map/json/province/anhui.json";
import aomen from "echarts/map/json/province/aomen.json";
import beijing from "echarts/map/json/province/beijing.json";
import chongqing from "echarts/map/json/province/chongqing.json";
import fujian from "echarts/map/json/province/fujian.json";
import gansu from "echarts/map/json/province/gansu.json";
import guangdong from "echarts/map/json/province/guangdong.json";
import guangxi from "echarts/map/json/province/guangxi.json";
import guizhou from "echarts/map/json/province/guizhou.json";
import hainan from "echarts/map/json/province/hainan.json";
import hebei from "echarts/map/json/province/hebei.json";
import heilongjiang from "echarts/map/json/province/heilongjiang.json";
import henan from "echarts/map/json/province/henan.json";
import hubei from "echarts/map/json/province/hubei.json";
import hunan from "echarts/map/json/province/hunan.json";
import jiangsu from "echarts/map/json/province/jiangsu.json";
import jiangxi from "echarts/map/json/province/jiangxi.json";
import jilin from "echarts/map/json/province/jilin.json";
import liaoning from "echarts/map/json/province/liaoning.json";
import neimenggu from "echarts/map/json/province/neimenggu.json";
import ningxia from "echarts/map/json/province/ningxia.json";
import qinghai from "echarts/map/json/province/qinghai.json";
import shandong from "echarts/map/json/province/shandong.json";
import shanghai from "echarts/map/json/province/shanghai.json";
import shanxi from "echarts/map/json/province/shanxi.json";
import shanxi1 from "echarts/map/json/province/shanxi1.json";
import sichuan from "echarts/map/json/province/sichuan.json";
import taiwan from "echarts/map/json/province/taiwan.json";
import tianjin from "echarts/map/json/province/tianjin.json";
import xianggang from "echarts/map/json/province/xianggang.json";
import xinjiang from "echarts/map/json/province/xinjiang.json";
import xizang from "echarts/map/json/province/xizang.json";
import yunnan from "echarts/map/json/province/yunnan.json";
import zhejiang from "echarts/map/json/province/zhejiang.json";
export default {
name: "echart-map",
data() {
var jsonMap = {
安徽: anhui,
澳门: aomen,
北京: beijing,
重庆: chongqing,
福建: fujian,
甘肃: gansu,
广东: guangdong,
广西: guangxi,
贵州: guizhou,
海南: hainan,
河北: hebei,
黑龙江: heilongjiang,
河南: henan,
湖北: hubei,
湖南: hunan,
江苏: jiangsu,
江西: jiangxi,
吉林: jilin,
辽宁: liaoning,
内蒙古: neimenggu,
宁夏: ningxia,
青海: qinghai,
山东: shandong,
上海: shanghai,
山西: shanxi,
陕西: shanxi1,
四川: sichuan,
台湾: taiwan,
天津: tianjin,
香港: xianggang,
新疆: xinjiang,
西藏: xizang,
云南: yunnan,
浙江: zhejiang,
};
//循环遍历注册地图
for (let index in jsonMap) {
myecharts.registerMap(index, jsonMap[index]);
}
return {
};
},
props:{
userRankList:{
type:Array
},
provinceName:{
type:String,
default:(()=>{
})
}
},
watch:{
userRankList:{
handler:function (newVlaue,oldVlaue) {
this.chinaConfigure(this.userRankList);
}
},
'provinceName':function (newVlaue,oldVlaue) {
this.chinaConfigure(this.userRankList);
}
},
mounted() {
this.chinaConfigure(this.userRankList);
},
methods: {
chinaConfigure(data) {
let myChart = myecharts.init(document.getElementById("jqfbid")); //这里是为了获得容器所在位置
myChart.clear()
window.onresize = myChart.resize;
let maxV=100;
if(data && data.length>0){
maxV = data[0].value//获取最大的值，
}
myChart.setOption({
// 进行相关配置
tooltip: {
show: true, //鼠标移入是否触发数据
trigger: "item", //出发方式
renderMode: "html",
// extraCssText: 'background: #000000; opacity:0.4;',
// formatter: '{a} <br/>{b}: {c}',
formatter: function (params) {
if (params.data == undefined || params.data.type) {
return;
}
let tips =
'<div style="padding:10px;background:radial-gradient(circle at center center,rgba(25,25,112,0),rgba(25,25,112,0)),linear-gradient(#24DDE2,#24DDE2) 0 0,linear-gradient(#24DDE2,#24DDE2) 0 0,linear-gradient(#24DDE2,#24DDE2) 100% 0,linear-gradient(#24DDE2,#24DDE2) 100% 0,linear-gradient(#24DDE2,#24DDE2) 0 100%,linear-gradient(#24DDE2,#24DDE2) 0 100%,linear-gradient(#24DDE2,#24DDE2) 100% 100%,linear-gradient(#24DDE2,#24DDE2) 100% 100%;background-size:calc(100% - 2px) calc(100% - 2px),2px 10px,10px 2px,2px 10px,10px 2px,2px 10px,10px 2px,2px 10px,10px 2px,100% 2px,100% 2px,2px 100%,2px 100%;background-color: rgba(0,0,0,.25);background-repeat: no-repeat;">' +
'<span style="color:#FFD202;font-size:16px">' +
params.name +
"</span>" +
"<br/>" +
'<span style="color:#FFF;font-size:16px">' +
params.data.count;
"</span>" +
("</div>");
return tips;
},
},
visualMap: {
show: false,
min: 0,
max: maxV,
color: [
"#05F5E8",
"rgba(5,245,232,0.85)",
"rgba(5,245,232,0.60)",
"rgba(5,245,232,0.35)",
"rgba(5,245,232,0.10)",
],
left: "left",
top: "bottom",
text: ["高", "低"], // 文本，默认为数值文本
calculable: true,
},
geo: {
// 这个是重点配置区
map: this.provinceName, // 根据名字显示中国地图，省或市地图，
roam: true,
label: {
normal: {
show: true, // 是否显示对应地名
textStyle: {
color: "#fff",
fontSize: "12",
},
},
},
itemStyle: {
normal: {
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
// color: '#1b65a0' // 0% 处的颜色
color: "#0a4c8b",
},
{
offset: 1,
// color: '#1b65a0' // 100% 处的颜色
color: "#0a4c8b",
},
],
},
borderColor: "#23DEFC",
borderWidth: 1,
shadowColor: "rgba(10,76,139,1)",
shadowOffsetY: 0,
shadowBlur: 30,
},
},
emphasis: {
areaColor: "#F3B329", //鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
series: [
{
type: "scatter",
coordinateSystem: "geo", // 对应上方配置
},
{
name: "启动次数", // 浮动框的标题
type: "map",
geoIndex: 0,
data: data
},
],
});
},
},
};
</script>