【Vue.js 2.0】 echarts 5.0 版本绘制中国地图 (可缩放)

1. npm 下载 echarts 最新版本

• npm install echarts --save

2. 全局使用 main.js 入口文件中引入：

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts  // 挂载到Vue实例上，方便全局使用

3.在assets文件夹下新建data.json； 将中国地图需要用到的静态数据 ！

• 离线地图下载地址DataV.GeoAtlas地理小工具系列

4.新建 map.vue 组件 

<template>
    <div>
        <div ref="chinaMap" style="width: 1000px; height: 1000px; margin: 0 auto"></div>
    </div>
</template>

<script>

import dataJson from "../assets/data";

export default {
    methods: {
        map_demo() {
          let myChart = this.$echarts.init(this.$refs.chinaMap);
          console.log(myChart);
          let uploadDataUrl = dataJson;
          // 注册地图
          this.$echarts.registerMap("china", uploadDataUrl);
          let option = {
            geo: {
                map: 'china',
                type:'map',
                itemStyle: {
                    normal:{
                        areaColor: 'rgba(27, 73, 135, 0.3)',
                        borderColor: 'rgba(58, 128, 177, 0.4)',

                        // 基础的背景阴影调节 
                        // borderWidth:1,
                        // shadowBlur:2,
                        // shadowColor:'#0e2f50',
                        // shadowOffsetX:5,
                        // shadowOffsetY:10,
                    },
                },
                zoom: 1,          // 地图放大
                aspectScale: 0.8, //地图宽高比例
                roam:true,        //地图缩放、平移
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: "rgba(246, 91, 39, 0.5)",
                        },
                    }
                },
                // 滚轮缩放的极限控制
                scaleLimit: { 
                    min: 0.5, //缩放最小大小
                    max: 6, //缩放最大大小
                }
            }

          };
          myChart.setOption(option);
        },
    },

    // 此时，页面上的元素，已经被渲染完毕了！
    mounted() {
        //注意: dom 节点渲染结束后渲染echarts
        this.map_demo()
    }
}
</script>

5.效果！