关于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}