echarts的使用——绘制地图（包括省份 城市）

echarts图表自适应屏幕大小

let myChart = echarts.init(this.$refs.myEchart); //获得容器所在位置
window.addEventListener("resize", myChart.resize); //大小自适应

1、下载echarts

cnpm install echarts --save-dev

2、在main.js中全局引入

//引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、准备js或json文件

echarts默认只提供世界地图、中国地图和省份地图，如果需要城市地图则需要下载json文件，转换为js
下载地址如下：
链接：https://download.csdn.net/download/weixin_39150852/12267613

4、定义map组件

5、使用组件

//导入组件
import Map from '../components/Map'
    export default {
      name: 'index',
      components: {
        Map
      }
｝
//调用组件

6、json文件转换为js文件

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
    }
}(this, function (exports, echarts) {
    var log = function (msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    }
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }
    if (!echarts.registerMap) {
        log('ECharts Map is not loaded')
        return;
    }
	echarts.registerMap('地区名':{json文件的内容})
}));