<template>
<div class="china-map">
<div ref="ChinaMap" class="china"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { chinaJSON } from "./utils/chinaMap.js";
export default {
name: "ChinaMap",
mounted() {
/* 在echarts中注入中国地图 */
echarts.registerMap("china1", chinaJSON);
let ChinaMap = echarts.init(this.$refs.ChinaMap);
ChinaMap.setOption({
title: {
text: "中国轮廓地图",
top: "3%",
left: "center",
textStyle: {
fontSize: 20,
fontWeight: 600,
color: "#fff",
},
},
tooltip: {
// 触发类型, 数据项图形触发
trigger: "item",
backgroundColor: "#fff",
textStyle: {
color: "#000",
},
/* 可以使用formatter再加上div实现自定义的提示组件 */
formatter: function (val) {
return (
val.data.name +
'<div>' +
'<h2><img src="' +val.data.url +'" height="120px"></h2>' +
"<p>" +val.data.value +"</p>" +
"</div>"
);
},
},
series: [
{
type: "map",
/* 这里的map值需要和registerMap注册的名字相一致 */
map: "china1",
roam: true, //是否开启鼠标缩放和平移漫游
geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
label: {
normal: {
show: true, //显示省份标签
textStyle: { color: "#fff" }, //省份标签字体颜色
},
emphasis: {
//对应的鼠标悬浮效果
show: true,
textStyle: { color: "#fff" },
},
},
itemStyle: {
normal: {
borderWidth: 1.95, //区域边框宽度
borderColor: "#0550c3", //区域边框颜色
areaColor: "#000", //区域颜色
},
emphasis: {
borderWidth: 1.95, //鼠标滑过区域，区域边框宽度
borderColor: "#fff", //鼠标滑过区域，区域边框颜色
areaColor: "#ff6511", //鼠标滑过区域背景色
},
},
data: [
{
name: "北京",
url: "https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg",
value: "中国帝都",
},
{
name: "上海",
url: "https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "天津",
url: "https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "重庆",
url: "https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "河北",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "山东",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "陕西",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "山西",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "辽宁",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "吉林",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "黑龙江",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "宁夏",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "江苏",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "河南",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "安徽",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "浙江",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "湖南",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "湖北",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "甘肃",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "青海",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "西藏",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "新疆",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "内蒙古",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "贵州",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "四川",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "江西",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "福建",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "广东",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "广西",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "云南",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "海南",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "香港",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "澳门",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
{
name: "台湾",
url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
value: "好邻居！可玩的地儿多的数不过来！",
},
],
},
],
});
window.ChinaMap = ChinaMap;
},
};
