本文共 6488 字，大约阅读时间需要 21 分钟。

安装echarts

yarn add echarts

地图数据来源：

设置容器

引入文件

import echarts from "echarts";import $ from "jquery";import "echarts/map/js/china.js"; // 引入中国地图数据

详细的代码逻辑

data() {
       return {
         chart: null,    };  },  mounted() {
       this.getEcharts();  },  beforeDestroy() {
       if (!this.chart) {
         return;    }    this.chart.dispose();    this.chart = null;  },  methods: {
       getEcharts() {
         const myChart = echarts.init(this.$refs.myEchart);      // 这个是引入全国地图的数据json格式的，      var uploadedDataURL = "/data/data.json";      myChart.showLoading();      $.getJSON(uploadedDataURL, function(geoJson) {
           echarts.registerMap("china", geoJson);        myChart.hideLoading();        var data = [          {
               name: "北京",          },          {
               name: "河南",          },          {
               name: "河北",          },          {
               name: "山西",          },          {
               name: "内蒙古",          },          {
               name: "陕西",          },          {
               name: "山东",          },          {
               name: "安徽",          },          {
               name: "湖北",          },          {
               name: "浙江",          },          {
               name: "福建",          },          {
               name: "江西",          },          {
               name: "湖南",          },          {
               name: "广西",          },          {
               name: "云南",          },          {
               name: "新疆",          },          {
               name: "甘肃",          },          {
               name: "青海",          },          {
               name: "西藏",          },          {
               name: "四川",          },          {
               name: "贵州",          },          {
               name: "重庆",          },          {
               name: "宁夏",          },          {
               name: "辽宁",          },          {
               name: "广东",          },          {
               name: "海南",          },          {
               name: "吉林",          },          {
               name: "黑龙江",          },          {
               name: "江苏",          },        ];        var max = 480;        var min = 9; // todo        var maxSize4Pin = 100;        var minSize4Pin = 20;        const option = {
             backgroundColor: {
               x: 0,            y: 0,            x2: 1,            y2: 1,            colorStops: [              {
                   offset: 0,                color: "#fff", // 0% 处的颜色              },              {
                   offset: 1,                color: "#f3f3f3", // 100% 处的颜色              },            ],            globalCoord: false, // 缺省为 false          },          title: {
               subtext: "",            x: "center",            textStyle: {
                 color: "#ccc",            },          },          legend: {
               orient: "vertical",            y: "bottom",            x: "right",            data: ["pm2.5"],            textStyle: {
                 color: "#ccc",            },          },          visualMap: {
               show: false,            min: 0,            max: 500,            left: "left",            top: "bottom",            text: ["高", "低"], // 文本，默认为数值文本            calculable: true,            seriesIndex: [1],            inRange: {
   },          },          geo: {
               map: "china",            show: true,            roam: true,            itemStyle: {
                 normal: {
                   shadowColor: "#fff", // 外发光                shadowBlur: 1,              },              emphasis: {
                   // areaColor: '#fff',//悬浮区背景              },            },            // 这个隐藏珠海地图以及文字,如果需要显示，把这点代码去掉即可            regions: [              {
                   name: "南海诸岛",                itemStyle: {
                     // 隐藏地图                  normal: {
                       opacity: 0, // 为 0 时不绘制该图形                  },                },                label: {
                     show: false, // 隐藏文字                },              },            ],          },          series: [            {
                 symbolSize: 5,              label: {
                   normal: {
                     formatter: "{b}",                  position: "right",                  show: true,                },                emphasis: {
                     show: true,                },              },              itemStyle: {
                   normal: {
                     color: "#ee5010",                },              },              name: "light",              type: "scatter",              coordinateSystem: "geo",              // data: convertData,            },            {
                 type: "map",              map: "china",              geoIndex: 0,              aspectScale: 0.75, // 长宽比              showLegendSymbol: false, // 存在legend时显示              label: {
                   normal: {
                     show: false,                },                emphasis: {
                     show: false,                  textStyle: {
                       color: "#000",                  },                },              },              roam: true,              itemStyle: {
                   normal: {
                     areaColor: "#fff",                  borderColor: "#fff",                },                emphasis: {
                     areaColor: "#000",                },              },              animation: false,              data: data,            },            {
                 name: "Top 5",              type: "scatter",              coordinateSystem: "geo",              symbol: "pin",              symbolSize: [50, 50],              label: {
                   normal: {
                     show: true,                  textStyle: {
                       color: "#fff",                    fontSize: 9,                  },                  formatter(value) {
                       return value.data.value[2];                  },                },              },              itemStyle: {
                   normal: {
                     color: "#ee5010", // 标志颜色                },              },              showEffectOn: "render",              rippleEffect: {
                   brushType: "stroke",              },              hoverAnimation: true,              zlevel: 1,            },          ],        };        myChart.setOption(option);      });    },  },

转载地址：https://blog.csdn.net/weixin_46174785/article/details/111053289 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！