关于vue.js:Vue-echarts插件使用随笔一图表

Vue 应用 echarts 图表实例

第一步：装置：npm i -S echarts
第二步：创立一个plugins文件夹，创立echarts.js并配置

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

第三步 ：全局引入并应用,所有的插件都须要use()

import Echarts from './plugin/echarts'  Vue.use(Echarts);

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

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

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

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