[JavaScript知识库]Echarts地图

? var provinceNameList = [

? ? "韩国",

? ? "山东省",

? ? "江苏省",

? ? "上海市",

? ? "浙江省",

? ? "福建省",

? ? "广东省"

? ];

? var provinceValueList = [

? ? {

? ? ? name: "韩国",

? ? ? gdp: "11亿元",

? ? ? rk: "654万人",

? ? ? mj: "105万平方公里"

? ? },

? ? {

? ? ? name: "山东省",

? ? ? gdp: "55亿元",

? ? ? rk: "6542万人",

? ? ? mj: "1055万平方公里"

? ? },

? ? {

? ? ? name: "江苏省",

? ? ? gdp: "88亿元",

? ? ? rk: "6250万人",

? ? ? mj: "1085万平方公里"

? ? },

? ? {

? ? ? name: "上海市",

? ? ? gdp: "99亿元",

? ? ? rk: "6020万人",

? ? ? mj: "1075万平方公里"

? ? },

? ? {

? ? ? name: "浙江省",

? ? ? gdp: "88亿元",

? ? ? rk: "6850万人",

? ? ? mj: "16525万平方公里"

? ? },

? ? {

? ? ? name: "福建省",

? ? ? gdp: "66亿元",

? ? ? rk: "6547万人",

? ? ? mj: "1152万平方公里"

? ? },

? ? {

? ? ? name: "广东省",

? ? ? gdp: "99亿元",

? ? ? rk: "6021万人",

? ? ? mj: "1452万平方公里"

? ? }

? ];

? var line =

? ? "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAABQCAYAAADBTPF9AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAcKADAAQAAAABAAAAUAAAAAAfQ361AAADlElEQVR4Ae2d6UqUYRiGxyX3XdPSco3OpYOIqBCxEJFCRAqjEJFCRAojCiPaKFqxjWyxjTasaMEKy8zOIrDrgfcIpn508zzBxftr5L7v6xvQ5puZzMrKyia4Ay2Z+Ke5API2wy/YqNkgUmeQtyVJ3BBziC6AwK2wDB2iFSI28rbDT2iPNUQXQF4nLEGbaIWIjbwu+AGtsYboAsjrhkWIPzFEHdpvpzvhOzSrdnCfG3k9SeI692OoDoDAXvgGTaod3OdGXh8sQKP7MVQHQN5u+BISVQ2SG3n9SeIa4Rq+oyNwAD5Dg+8lhNsjbxDmoV64hu/oyNsLH0Oi8HWAvKEksU64hu/oCDwA7yAkql4KyBuGt1Cr2sF9buSNwBuocT+G6gDIG4U5qFbt4D438g7Ba6hyP4bqAMgbg1dQqdrBfW7kjcOLkCh8KSBvAp5DhXAN39GRdwSeQbnvJYTbI28SnkKZcA2/0RGXA0fhcUgUvQ6SxGOcj6BUtIbv2EniCc6HUOJ7DdH2SeIU5/2QqCsxF3kn4R4Ui9bwHRtxJvEUzECR7zVE2yeJZzjtncIhUdFjkniO8zYUKnZwnxlxeXAeboZE0cshSbzAeQMKRGv4jp0kXuK8HhJFrwXE5cNluAarRGv4jp0kXuW8EhJFrwUTB/YstGdjvmgN37GTxGnOiyFR9FpAXAHYb6b2G2qeaA3fsZPEW5z2t2JIVLwcEFcI9r81Z0OiokEyJ4l3OU9DrmgN37ERVwT2Coa9khESFS8HxBWDvZZorymGRGGJDxA4BTmKHdxnRlwJzMLxkCh6OSSJdrui3fEWz0RFj4grhSdg956GRFGJZcizu78nFfNHZhZAnkm0N9McjkFEF0BeOdjb2iZEK0Rs5FXASxiPNUQXQF4l2LuEx0QrROwkcY7zYKwhugDyqsA+/mRUtELERl412AcRjcQaogsgrwbsI8GGRStEbOTVwnvYH2uILoC8OvgA+0QrRGzkrU4Sh2IN0QUQWA+fYI9ohYidJM5zDsYaogsgrwHsQ9wHRCtEbOStTRL7Yw3RBRDYCF9hl2iFiJ0kLnD2xRqiCyCvCezLvnpFK0Rs5K1PEntiDdEFENgMi7BDtELERl5Lktgda4gugMBWsC+F7hKtELGR1wZL0BlriC6AvHZYhm3/Q4W4ezkLC8jr4GGzMA0zWfyIf/aQEJjllEi0T5Gye07tW0x/Z/lj/vphfwB0b32KnijWSQAAAABJRU5ErkJggg==";

? var myChart3 = echarts.init(document.getElementById("chart3"));

? function getTipcneter(item) {

? ? let result = provinceValueList.find(

? ? ? (province) => province.name == item.name

? ? );

? ? let tipHtml = `

? ? ? ? ? ? ? ? ? <div style="position: relative;font-size: 16px;">

? ? ? ? ? ? ? ? ? ? <div style="position: absolute;display: flex;width: 80px;height: 50px;">

? ? ? ? ? ? ? ? ? ? ? <img src='${line}' style="width:80px;"/>

? ? ? ? ? ? ? ? ? ? ? <span style="position: absolute;left: -5px;top: -5px;display: 'inline-block';width: 8px;height: 8px;background: #6bf1ff;border-radius: 50%;"></span>

? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? <div style="position: absolute;left: 80px;width: 200px;height: 110px;padding: 0 8px;background-color: #0c47af;border: 1px solid #6bf1ff;border-radius: 4px;">

? ? ? ? ? ? ? ? ? ? ? <div style="height: 30px;line-height: 30px;text-align: center;color:#fff;border-bottom: 1px solid #6bf1ff;margin-bottom: 5px;">

? ? ? ? ? ? ? ? ? ? ? ? ${result.name}

? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? ? <div style="color: #ccc">GDP：<span style="color: #fff">${result.gdp}</span></div>

? ? ? ? ? ? ? ? ? ? ? <div style="color: #ccc">人口：<span style="color: #fff">${result.rk}</span></div>

? ? ? ? ? ? ? ? ? ? ? <div style="color: #ccc">面积：<span style="color: #fff">${result.mj}</span></div>

? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? `;

? ? return tipHtml;

? }

? $.get("json/map.json", (ret) => {

? ? echarts.registerMap("map", ret);

? ? var option3 = {

? ? ? backgroundColor: "#155abc",

? ? ? tooltip: {},

? ? ? label: {

? ? ? ? formatter: function (params) {

? ? ? ? ? if (!provinceNameList.includes(params.name)) {

? ? ? ? ? ? return "";

? ? ? ? ? } else {

? ? ? ? ? ? let result = provinceValueList.find(

? ? ? ? ? ? ? (item) => item.name == params.name

? ? ? ? ? ? );

? ? ? ? ? ? if (result != undefined) {

? ? ? ? ? ? ? return params.name + "\n" + result.gdp;

? ? ? ? ? ? } else {

? ? ? ? ? ? ? return params.name;

? ? ? ? ? ? }

? ? ? ? ? }

? ? ? ? }

? ? ? },

? ? ? geo: {

? ? ? ? type: "map",

? ? ? ? map: "map",

? ? ? ? roam: false,

? ? ? ? zoom: 3.5,

? ? ? ? center: [120.5, 29.4],

? ? ? ? tooltip: {

? ? ? ? ? padding: 0,

? ? ? ? ? enterable: true,

? ? ? ? ? trigger: "item",

? ? ? ? ? position: "inside",

? ? ? ? ? formatter: function (params) {

? ? ? ? ? ? if (!provinceNameList.includes(params.name)) {

? ? ? ? ? ? ? return;

? ? ? ? ? ? } else {

? ? ? ? ? ? ? var tipHtml = getTipcneter(params);

? ? ? ? ? ? ? return tipHtml;

? ? ? ? ? ? }

? ? ? ? ? }

? ? ? ? },

? ? ? ? label: {

? ? ? ? ? normal: {

? ? ? ? ? ? show: true,

? ? ? ? ? ? color: "#fff",

? ? ? ? ? ? fontSize: 16

? ? ? ? ? },

? ? ? ? ? emphasis: {

? ? ? ? ? ? show: true,

? ? ? ? ? ? color: "#fff",

? ? ? ? ? ? fontSize: 16

? ? ? ? ? }

? ? ? ? },

? ? ? ? itemStyle: {

? ? ? ? ? normal: {

? ? ? ? ? ? areaColor: "#3c7fd7",

? ? ? ? ? ? borderColor: "#1846a0",

? ? ? ? ? ? borderWidth: 1

? ? ? ? ? }

? ? ? ? },

? ? ? ? emphasis: {

? ? ? ? ? itemStyle: {

? ? ? ? ? ? areaColor: "#3c7fd7",

? ? ? ? ? ? borderColor: "#1846a0",

? ? ? ? ? ? borderWidth: 1

? ? ? ? ? ? // shadowColor: "#0e83b7",

? ? ? ? ? ? // shadowBlur: 20,

? ? ? ? ? }

? ? ? ? },

? ? ? ? regions: [

? ? ? ? ? {

? ? ? ? ? ? name: "韩国",

? ? ? ? ? ? itemStyle: {

? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? areaColor: "#c4be60"

? ? ? ? ? ? ? },

? ? ? ? ? ? ? emphasis: {

? ? ? ? ? ? ? ? areaColor: "#c4be60",

? ? ? ? ? ? ? ? borderWidth: 1,

? ? ? ? ? ? ? ? shadowColor: "#c4be60",

? ? ? ? ? ? ? ? shadowBlur: 20

? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? },

? ? ? ? ? {

? ? ? ? ? ? name: "山东省",

? ? ? ? ? ? itemStyle: {

? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? areaColor: "#7ae1fe"

? ? ? ? ? ? ? },

? ? ? ? ? ? ? emphasis: {

? ? ? ? ? ? ? ? areaColor: "#7ae1fe",

? ? ? ? ? ? ? ? borderWidth: 1,

? ? ? ? ? ? ? ? shadowColor: "#7ae1fe",

? ? ? ? ? ? ? ? shadowBlur: 20

? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? },

? ? ? ? ? {

? ? ? ? ? ? name: "江苏省",

? ? ? ? ? ? itemStyle: {

? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? areaColor: "#23e9c4"

? ? ? ? ? ? ? },

? ? ? ? ? ? ? emphasis: {

? ? ? ? ? ? ? ? areaColor: "#23e9c4",

? ? ? ? ? ? ? ? borderWidth: 1,

? ? ? ? ? ? ? ? shadowColor: "#23e9c4",

? ? ? ? ? ? ? ? shadowBlur: 20

? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? },

? ? ? ? ? {

? ? ? ? ? ? name: "上海市",

? ? ? ? ? ? itemStyle: {

? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? areaColor: "#f6de81"

? ? ? ? ? ? ? },

? ? ? ? ? ? ? emphasis: {

? ? ? ? ? ? ? ? areaColor: "#f6de81",

? ? ? ? ? ? ? ? borderWidth: 1,

? ? ? ? ? ? ? ? shadowColor: "#f6de81",

? ? ? ? ? ? ? ? shadowBlur: 20

? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? },

? ? ? ? ? {

? ? ? ? ? ? name: "浙江省",

? ? ? ? ? ? itemStyle: {

? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? areaColor: "#e7936b"

? ? ? ? ? ? ? },

? ? ? ? ? ? ? emphasis: {

? ? ? ? ? ? ? ? areaColor: "#e7936b",

? ? ? ? ? ? ? ? borderWidth: 1,

? ? ? ? ? ? ? ? shadowColor: "#e7936b",

? ? ? ? ? ? ? ? shadowBlur: 20

? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? },

? ? ? ? ? {

? ? ? ? ? ? name: "福建省",

? ? ? ? ? ? itemStyle: {

? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? areaColor: "#f28fb4"

? ? ? ? ? ? ? },

? ? ? ? ? ? ? emphasis: {

? ? ? ? ? ? ? ? areaColor: "#f28fb4",

? ? ? ? ? ? ? ? borderWidth: 1,

? ? ? ? ? ? ? ? shadowColor: "#f28fb4",

? ? ? ? ? ? ? ? shadowBlur: 20

? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? },

? ? ? ? ? {

? ? ? ? ? ? name: "广东省",

? ? ? ? ? ? itemStyle: {

? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? areaColor: "#92a9fb"

? ? ? ? ? ? ? },

? ? ? ? ? ? ? emphasis: {

? ? ? ? ? ? ? ? areaColor: "#92a9fb",

? ? ? ? ? ? ? ? borderWidth: 1,

? ? ? ? ? ? ? ? shadowColor: "#92a9fb",

? ? ? ? ? ? ? ? shadowBlur: 20

? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? }

? ? ? ? ]

? ? ? }

? ? };

? ? myChart3.setOption(option3);

? ? window.addEventListener("resize", () => {

? ? ? myChart3.resize();

? ? });

? });