在vue项目中封装eharts插件使用

封装echarts插件

1.首先安装echarts5.x版本的

npm install echarts@5 --save

2.在src下新建一个plugins文件夹，然后在这个文件夹下新建echarts.js文件

在echarts.js中引入 

    import echarts from 'echarts'

    const install = function (Vue){
       Object.defineProperties(Vue.prototype,{
         $charts:{
           get() {
             return {
               echartsDemo:function (id) {
                 var myEchart = echarts.init(document.getElementById(id))
                 var option = {
                  //  在这里配置echarts图表的属性
                       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'
                              }]
                     }
                 myEchart.setOption(option)
               }
             }
           }
         }
       })
    } 
    export default install

2.在项目中使用步骤
在main.js 中引入注册

  //main.js文件 引入echarts.js
      import Echarts from './plugins/echarts'
      Vue.use(Echarts)

3.在组件中使用封装的echarts插件

    <templete>
      <div id="demo"></div>
    </templete>

    <script>
      export default {
        data(){
          return{
          }
        },
        mounted(){
          this.$charts.echartsDemo("demo")
        }
      }
    </script>

    <style>
      #demo{
        width:500px;
        height:500px;
      }
    </style>  

效果图