关于vue.js:Vueecharts插件随笔二地图

Vue 应用 echarts 地图实例

第一步：装置：npm i -S echarts
装置 echarts 依赖后，关上 node_modules 下边的 map 文件夹里边的 js。js 文件下有：

china.js--> 中国地图
world.js--> 世界地图
province 文件夹 ---> 各个省份地图

第二步 : 在全局 main.js 引入地图资源

import Echarts from './plugin/echarts'
    Vue.use(Echarts);
import "../node_modules/echarts/map/js/china.js"

第三步：在 echarts.js 文件中增加 chinaMap 相干配置

import echarts from 'echarts'
    const install = function (Vue){
           // 将 echarts 挂载到 vue 原型上
            Object.defineProperties(Vue.prototype,{
        $charts: {get(){
                     return{
                  // 编写视图
                  chinaMap : function(id){this.chart = echarts.init(document.getElementById("chinamap"));
                this.chart.clear();
                // 配置地图信息
                var option = {......// 实例代码},
                this.chart.setOption(option)
                   }
            }
               }
                    }
             })
    }    
    export default install;

第四步：在 views 文件夹下创立视图组件 Map.vue

<div class="map>
           地图 <div id="chinaMap"></div>
</div>
mounted(){this.$charts.chinaMap("chinaMap");
}
 #chinamap{
     width:100%;
     height:400px;
}

第五步 : 引入 App.vue，让他显示进去

<Map/>

import Map from './views/Map'
components:{Map}