echarts地图详解
获取地图坐标json数据
<template>
<div id="china-map" style="width:500px;height:500px"></div>
</template>
<script>
import * as echarts from 'echarts';
// 坐标json
import chinaJson from "@/assets/china.json"
export default {
name: 'ChinaMap',
data() {
return {
mapData:[
{ name: '北京', value: 120, value2: 1230, warn: 10, problem: 12 },
{ name: '天津', value: 1230, value2: 10, warn: 10, problem: 12 },
{ name: '河北', value: 1230, value2: 10, warn: 10, problem: 12 },
{ name: '山西', value: 11140, value2: 10, warn: 10, problem: 12 },
{ name: '内蒙古', value: 11120, value2: 20 },
{ name: '辽宁', value: 1110, value2: 320 },
{ name: '吉林', value: 1110, value2: 420 },
{ name: '黑龙江', value: 1230, value2: 230 },
{ name: '上海', value: 5312, value2: 0 },
{ name: '江苏', value: 1230, value2: 0 },
{ name: '浙江', value: 9440, value2: 1230 },
{ name: '安徽', value: 8550, value2: 0 },
{ name: '福建', value: 1660, value2: 0 },
{ name: '江西', value: 33770, value2: 0 },
{ name: '山东', value: 8880, value2: 0 },
{ name: '河南', value: 4480, value2: 340 },
{ name: '湖北', value: 21190, value2: 0 },
{ name: '湖南', value: 12800, value2: 340 },
{ name: '广东', value: 87110, value2: 10 },
{ name: '广西', value: 17220, value2:20 },
{ name: '海南', value: 87330, value2: 0 },
{ name: '重庆', value: 66440, value2: 220 },
{ name: '四川', value: 45550, value2: 220 },
{ name: '贵州', value: 33660, value2: 330 },
{ name: '云南', value: 98770, value2: 440 },
{ name: '西藏', value: 6880, value2: 440 },
{ name: '陕西', value: 33990, value2: 550 },
{ name: '甘肃', value: 31310, value2: 550 },
{ name: '青海', value: 44410, value2: 440 },
{ name: '宁夏', value: 44120, value2: 6660 },
{ name: '新疆', value: 55320, value2: 660 },
{ name: '台湾', value: 44430, value2: 4430 },
{ name: '香港', value: 3540, value2: 3330 },
{ name: '澳门', value: 2640, value2: 4440 },
{ name: '南海诸岛', value: 1750, value2: 5550 },
],
distributionColor:[
{
gte: 50000,
color: "#103076",
},
{
gte: 40000,
lt: 50000,
color: "#133782",
},
{
gte: 30000,
lt: 40000,
color: "#124D99",
},
{
gte: 20000,
lt: 30000,
color: "#1067B3",
},
{
gte: 10000,
lt: 20000,
color: "#0C86CC",
},
{
gte: 5000,
lt: 10000,
color: "#07AAE6",
},
{
gte: 0,
lt: 5000,
color: "#05D4FF",
},
]
}
},
mounted() {
this.init()
})
},
methods: {
init(){
let that = this
var chartDom = document.getElementById('china-map');
var myChart = echarts.init(chartDom);
echarts.registerMap('china', chinaJson );
let option = {
tooltip: {
backgroundColor: 'rgba(51,11,131,0.76)',
formatter(params, ticket, callback) {
let value = params.value;
let datas = option.series.data;
if (Array.isArray(value)) {
// 鼠标移到涟漪点上不显示浮层
return "";
}
if (value === undefined) {
// 鼠标移到路线上不显示浮层
return "";
}
if (isNaN(value)) {
value = 0;
}
// htmlStr 是鼠标经过时显示的弹窗内容和样式
let htmlStr = `
<div style='display: flex;align-items: center;justify-content: space-between;'>
<div>
<span style='font-weight: 500;font-size: 12px;color: #FFFFFF;margin-right:20px;'>设备数量</span>
</div>
<span style='font-weight: 400;font-size: 14px;color: #FFDA4C;font-family: OptimizedTitleBlack;'>${value + params["data"].value2}</span>
</div>
<div style='display: flex;align-items: center;justify-content: space-between;'>
<span style='font-weight: 500;font-size: 12px;color: #FFFFFF;margin-right:20px;'>运行中设备数量</span>
<span style='font-weight: 400;font-size: 14px;color: #3BF243;font-family: OptimizedTitleBlack;'>${value}</span>
</div>
<div style='display: flex;align-items: center;justify-content: space-between;'>
<span style='font-weight: 500;font-size: 12px;color: #FFFFFF;margin-right:20px;'>即将到期设备数量</span>
<span style='font-weight: 400;font-size: 14px;color: #FF858F;font-family: OptimizedTitleBlack;'>${ params["data"].value2}</span>
</div>
`;
return htmlStr;
}
},
visualMap: {
show: false,
left: 20,
bottom: 40,
showLabel: true,
pieces: that.distributionColor,
},
// geo 区域的颜色也可以被 map series 所控制
geo: {
show: true, //是否显示最外层边框
map: 'china',
label: {
show: false
},
roam: false,//是否开启鼠标缩放，会出现两个地图
zoom: 1.7, // 地图初始化缩放等级
center: [104.05, 35.22], //当前视角的中心点
itemStyle: {
normal: {
shadowColor: "rgba(0,160,233,0.5)",
shadowBlur: 2,
shadowOffsetY: 1,
shadowOffsetX: 1,
focus: "none",
label: {
show: true,
},
borderWidth: 2, //地图最外层边框border
borderColor:'rgba(0,160,233)',//地图最外层边框border颜色
},
emphasis: {
show: false,
// areaColor: '#01215c'
}
}
},
series: [
{
name: '中国地图分布',
type: 'map',
roam: false,
selectedMode: false, // 禁止点击事件
zoom: 1.7,
center: [104.05, 35.22],
map: 'china',
emphasis: {
label: {
color: 'rgba(255, 255, 255, .8)'
},
itemStyle: {
areaColor: null, // 或者其他你想要的黄色，如 #FFFF00
borderWidth: 2,
borderColor: '#FFC806',
}
},
// 点击事件处理器
events: {
'click': function (params) {
console.log('地图被点击', params);
// 在这里处理点击事件，例如弹出窗口或更新数据等
}
},
itemStyle: {
normal: {
borderColor: "#444",
borderWidth: 0.5,
}
},
// select:{ //选中状态的颜色的更改
// label: {
// color: '#fff'
// },
// itemStyle:{
// areaColor:"#05D4FF",
// borderWidth: 2,
// borderColor: '#FFC806',
// },
// },
label: {
show: true,
color: 'rgba(255, 255, 255, .8)',
},
data: this.mapData,
// 自定义名称映射
nameMap: {
'北京市': '北京',
'天津市': '天津',
'河北省': '河北',
'山西省': '山西',
'内蒙古自治区': '内蒙古',
'辽宁省': '辽宁',
'吉林省': '吉林',
'黑龙江省': '黑龙江',
'上海市': '上海',
'江苏省': '江苏',
'浙江省': '浙江',
'安徽省': '安徽',
'福建省': '福建',
'江西省': '江西',
'山东省': '山东',
'河南省': '河南',
'湖北省': '湖北',
'湖南省': '湖南',
'广东省': '广东',
'广西壮族自治区': '广西',
'海南省': '海南',
'重庆市': '重庆',
'四川省': '四川',
'贵州省': '贵州',
'云南省': '云南',
'西藏自治区': '西藏',
'陕西省': '陕西',
'甘肃省': '甘肃',
'青海省': '青海',
'宁夏回族自治区': '宁夏',
'新疆维吾尔自治区': '新疆',
'台湾省': '台湾',
'香港特别行政区': '香港',
'澳门特别行政区': '澳门',
'南海诸岛': '南海诸岛'
}
}
]
};
myChart.setOption(option);
myChart.resize()
myChart.on('click', function (params) {
if (params.componentType === 'series' && params.seriesType === 'map') {
console.log('地图被点击', params);
}
});
}
}
}
</script>