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