早起的Echarts3版本提供了地图的JSON包,但是由于自身版本的迭代,这一模块在最新的4.0和5.0中消失了.下面附上中国地图的CDN文件, 但注意的是,使用Echarts地图必须用过 CDN 的方式先引入 echarts.js 在引入 china.js

代码如下在 index.html 中,为了防止第三方CDN挂掉,建议将项目中用到的所有第三方文件下载到本地项目中

<script src="./static/echarts.min.js"></script>
<script src="./static/china.js"></script>

构建地图

注意点: 因为使用的是CDN的引入方式 echarts的实例会绑定在window上, 所以在调用的时候使用 window.echarts 调用

<!-- 地图 -->
<template>
  <div class="mapstyle" id="mapEcharts"></div>
</template>
​
<script>
export default {
  data () {
    return {
      myChart:"",
      option:{
        tooltip: {
            padding: 0,
            enterable: true,
            transitionDuration: 1,
            textStyle: {
                color: '#000',
                decoration: 'none',
            },
            formatter:(params)=>{
              if(params.data){
                return ""
              }else{
                return ''
              }
              
            }
        },
        grid:{
          top:"0px",
          left:"0px"
        },
        geo: {
            show: true,
            map: "china",
            aspectScale:0.75,
            zoom:1.2,
            label: {
                normal: {
                    show: false,
                },
                emphasis: {
                    show: false,
                },
            },
            roam: false,
            itemStyle: {
                normal: {
                    areaColor: 'rgba(255,255,255,0)',
                    borderColor: '#1180c7',
                },
                emphasis: {
                    areaColor: '#4499d0',
                },
            },
        },
        series: [
          {
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [],
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: '#fff',
              },
            },
          },
          {
            type: 'map',
            map: "china",
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff',
                },
              },
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#3B5077',
              },
              emphasis: {
                areaColor: '#2B91B7',
              },
            },
            animation: false,
            data: [],
          },
          {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 6,
          },
          {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            symbolSize: function (val) {
              return val[2] / 10;
            },
            data: [],
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke',
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'left',
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: 'yellow',
                shadowBlur: 10,
                shadowColor: 'yellow',
              },
            },
            zlevel: 1,
          },
        ],
      }
    
    };
  },
​
  components:{},
​
  computed:{},
​
  mounted(){
    window.addEventListener("resize", () => { 
      this.myChart.resize()
    })
    this.render_map()
  },
​
  methods:{
    // 渲染echarts
    async render_map(){
      let response = await this.$axios({
        methods:'get',
        url:``
      })
      let res = response.data.map_data;
      let dataA = []
      let dataB = []
      res.forEach((item,index)=>{
        dataA[index] = {
          name:item.province,
          value:[item.longi,item.lati,item.provincenum]
        }
        dataB[index] = {
          name:item.province,
          value:item.provincenum
        }
      })
      this.option.series[0].data = dataA
      this.option.series[2].data = dataB
      this.option.series[3].data = dataA
      this.myChart = window.echarts.init(document.getElementById('mapEcharts'));
      this.myChart.setOption(this.option);
    }
  }
}
​
</script>
<style scoped>
.mapstyle {
  width:100%;
  height: 100%;
}
</style>