开发vue组件 echarts

1.创建一个js文件放置开发的组件

import * as echarts from 'echarts';

const install=function(Vue,options){

    // 添加示例方法
    //  Vue.prototype.demo=function(){
          
    //  }
  //Object.defineProperties(obj,props)
    //方法直接在一个对象上定义新的属性或修改再有的属性，并返回该对象
    Object.defineProperties(Vue.prototype,{
        $myChart:{
             get(){
                return{
                    // 1.折线图
                     line(id){
                        var chartDom = document.getElementById(id);
                        var myChart = echarts.init(chartDom);
                        var option;
                        option = {
                          xAxis: {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                          },
                          yAxis: {
                            type: 'value'
                          },
                          series: [
                            {
                              data: [150, 230, 224, 218, 135, 147, 260],
                              type: 'line'
                            }
                          ]
                        };
                        
                        option && myChart.setOption(option);
                        
                     },
                     fun(){

                     }
                }
             }
        }
          
    })
}  
export default install

2.在main中使用创建到的组件

//使用开发的插件
import echarts from './unilt/echarts'
Vue.use(echarts)

3.在组件中直接使用vue原型上的方法 (使用的时候要传递参数)

<template>

    <div>
        <div id="main" style="width: 100%; height: 3rem;">
        </div>
    </div>
</template>

<script>
 export default{
      data(){
         return{
            
         }
      },
      mounted(){
         console.log('this', this);
         this.$myChart.line('main')
      }
 }
 
</script>
<style>



</style>