<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: {
? ? ? ? // 觸發(fā)類型, 數(shù)據(jù)項圖形觸發(fā)
? ? ? ? trigger: "item",
? ? ? ? backgroundColor: "#fff",
? ? ? ? textStyle: {
? ? ? ? ? color: "#000",
? ? ? ? },
? ? ? ? /* 可以使用formatter再加上div實現(xiàn)自定義的提示組件 */
? ? ? ? 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, //是否開啟鼠標(biāo)縮放和平移漫游
? ? ? ? ? geoIndex: 0, // 不可缺少，否則無tooltip 指示效果
? ? ? ? ? label: {
? ? ? ? ? ? normal: {
? ? ? ? ? ? ? show: true, //顯示省份標(biāo)簽
? ? ? ? ? ? ? textStyle: { color: "#fff" }, //省份標(biāo)簽字體顏色
? ? ? ? ? ? },
? ? ? ? ? ? emphasis: {
? ? ? ? ? ? ? //對應(yīng)的鼠標(biāo)懸浮效果
? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? textStyle: { color: "#fff" },
? ? ? ? ? ? },
? ? ? ? ? },
? ? ? ? ? itemStyle: {
? ? ? ? ? ? normal: {
? ? ? ? ? ? ? borderWidth: 1.95, //區(qū)域邊框?qū)挾?/p>
? ? ? ? ? ? ? borderColor: "#0550c3", //區(qū)域邊框顏色
? ? ? ? ? ? ? areaColor: "#000", //區(qū)域顏色
? ? ? ? ? ? },
? ? ? ? ? ? emphasis: {
? ? ? ? ? ? ? borderWidth: 1.95, //鼠標(biāo)滑過區(qū)域，區(qū)域邊框?qū)挾?/p>
? ? ? ? ? ? ? borderColor: "#fff", //鼠標(biāo)滑過區(qū)域，區(qū)域邊框顏色
? ? ? ? ? ? ? areaColor: "#ff6511", //鼠標(biāo)滑過區(qū)域背景色
? ? ? ? ? ? },
? ? ? ? ? },
? ? ? ? ? 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: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "天津",
? ? ? ? ? ? ? url: "https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "重慶",
? ? ? ? ? ? ? url: "https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "河北",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "山東",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "陜西",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "山西",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "遼寧",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "吉林",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "黑龍江",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "寧夏",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "江蘇",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "河南",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "安徽",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "浙江",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "湖南",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "湖北",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "甘肅",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "青海",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "西藏",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "新疆",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "內(nèi)蒙古",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "貴州",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "四川",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "江西",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "福建",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "廣東",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "廣西",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "云南",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "海南",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "香港",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "澳門",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "臺灣",
? ? ? ? ? ? ? url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
? ? ? ? ? ? ? value: "好鄰居！可玩的地兒多的數(shù)不過來！",
? ? ? ? ? ? },
? ? ? ? ? ],
? ? ? ? },
? ? ? ],
? ? });
? ? window.ChinaMap = ChinaMap;
? },
};
