ECharts 实现世界地图

效果图

源代码（仅供参考）

<template>
  <div class="echarts">
    <div
      class="className"
      id="id"
      style="width: 100%; height: 450px"
      ref="myEchart"
    ></div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import echarts from "echarts";
// 引用世界地图js 
import "@/js/world_new.js";
import Component from "vue-class-component";

@Component
export default class World extends Vue {
  name = "echarts";

  initChart() {
    let myChart = echarts.init(this.$refs.myEchart);
    window.onresize = echarts.init(this.$refs.myEchart).resize;
    // 把配置和数据放这里
    myChart.setOption({
      backgroundColor: "#02AFDB",
      title: {
        left: "40%",
        top: "0px",
        textStyle: {
          color: "#fff",
          opacity: 0.7,
        },
      },
      dataRange: {
        show: false,
        min: 0,
        max: 1000000,
        text: ["High", "Low"],
        realtime: true,
        calculable: true,
        color: ["orangered", "yellow", "lightskyblue"],
      },
      tooltip: {
        formatter: function (params: any, ticket: any, callback: any) {
          // params.seriesName + "<br />" + params.name + "：" + params.value
          return params.name + "：" + params.value;
        }, //数据格式化
      },
      geo: {
        map: "world",
        label: {
          emphasis: {
            show: false,
          },
        },
        roam: false,
        silent: true,
        itemStyle: {
          normal: {
            areaColor: "#37376e",
            borderColor: "#000",
          },
          emphasis: {
            areaColor: "#2a333d",
          },
        },
      },
      series: [
        {
          type: "map",
          mapType: "world",
          // zoom: 1.2,
          mapLocation: {
            y: 100,
          },
          
          nameMap //nameMap映射
          data //数据国家名字
          
          symbolSize: 12,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            emphasis: {
              borderColor: "#fff",
              borderWidth: 1,
            },
          },
        },
      ],
    });
  }

  mounted() {
    this.initChart();
  }
}
</script>

重要

1，需要下载世界地图所需要的js文件 下载链接
2，data 数据国家名字 && nameMap 映射可参考这里