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();

    });

  });