中国地图（两部搞定）

1  map.vue

<template>
  <div class="centent" ref="echarts"></div>
</template>

<script>
// 引入echarts
import echarts from "echarts";
// 引入地图
import "echarts/lib/chart/map";
// 引入js
import "echarts/map/js/china.js";
export default {
  components: {},
  data() {
    // 这里存放数据
    return {};
  },

  mounted() {
    this.init();
  },
  // 方法集合
  methods: {
    init() {
      let myChart = echarts.init(this.$refs.echarts);
      let option = {
        tooltip: {
          // 鼠标移到图里面的浮动提示框
          formatter(params) {
            let htmlStr = `
                          <div style='font-size:18px;'> ${params.name}</div>
                        `;
            return htmlStr;
          },
        },
        // geo配置详解： https://echarts.baidu.com/option.html#geo
        geo: {
          map: "china",
          show: true,
          roam: true,
          top: 0,
          label: {
            emphasis: {
              show: false,
            },
          },
          // 地图的背景色
          itemStyle: {
            normal: {
              areaColor: "#091632",
              borderColor: "#9adcfa",
              shadowColor: "#09184F",
              shadowBlur: 20,
            },
          },
        },
        series: [
          // 地图部分
          {
            type: "map",
            map: "china",
            geoIndex: 1,
            aspectScale: 0.75, // 长宽比
            showLegendSymbol: true, // 存在legend时显示
            top: 0,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            //是否开启鼠标缩放和平移漫游
            roam: false,
            //默认样式
            itemStyle: {
              normal: {
                areaColor: "#031525",
                borderColor: "#3B5077",
                borderWidth: 1,
              },
              emphasis: {
                areaColor: "#0f2c70",
              },
            },
            data: [
              {
                name: "黑龙江",
                //自定义省的颜色
                itemStyle: {
                  normal: {
                    areaColor: "#F50508",
                    borderColor: "#1773c3", // 区域边框
                    shadowColor: "#1773c3", // 阴影
                    shadowBlur: 20,
                  },
                },
              },
            ],
            zlevel: 0,
          },
          // 气泡
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            //要有对应的经纬度才显示，先经度再维度
            data: [{ name: "长春", value: [125.35, 43.88] }],
            showEffectOn: "render",
            rippleEffect: {
              scale: 4, // 波纹的最大缩放比例
              brushType: "stroke",
            },
            hoverAnimation: true,
            label: {
              normal: {
                show: true,
                formatter: "{b}",
                position: "right",
                fontWeight: 500,
                fontSize: 14,
              },
            },
            itemStyle: {
              normal: {
                color: "#32cd32",
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            emphasis: {
              itemStyle: {
                color: "#f4e925", // 高亮颜色
              },
            },
            zlevel: 1,
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.centent {
  width: 1000px;
  height: 1000px;
  margin-top: 100px;
}
</style>

2main.js

import * as echarts from "echarts";
Vue.prototype.$echarts = echarts; // 将echarts引入与到vue的原型中，方便使用