與main.js同級，創(chuàng)建utils文件夾武福，文件夾中創(chuàng)建myCharts.js文件

//引入基本模板
var echarts = require('echarts/lib/echarts')

// 引入折線圖等組件
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/radar')

// 引入提示框和title組件议双，圖例
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/legendScroll')//圖例翻譯滾動

const install = function (Vue) {
  Object.defineProperties(Vue.prototype, {
    $chart: {
      get() {
        return {
          //畫一條簡單的線
          line: function (id, xAxisData, seriesData) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();

            const optionData = {
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
              }]
            };
            this.chart.setOption(optionData);
            this.chart.resize();
          },
          bar: function (id, xAxisData, seriesData) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();

            const optionData = {
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'bar',
                smooth: true
              }]
            };
            this.chart.setOption(optionData);
            this.chart.resize();
          },
        }
      }
    }
  })
}

export default {
  install
}

main.js引入和掛載

import myCharts from './utils/myCharts.js';
Vue.use(myCharts);

頁面中使用

<el-tabs class="my-tabs" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="月度視頻學習時長" name="1">
        <el-card shadow="hover">
            <div id="mStudyTime" style="width: 100%; height: 300px;"></div>
        </el-card>
    </el-tab-pane>
    <el-tab-pane label="合格率" name="2">
        <el-card shadow="hover">
            <div id="passRate" style="width: 100%; height: 300px;"></div>
        </el-card>
    </el-tab-pane>
</el-tabs>

export default {
    data() {
        return {
            activeName: '1',
            chartVisible: true
        };
    },
    mounted() {
        this.$chart.bar('mStudyTime');
        this.$chart.line('passRate');
        // 圖標自適應(yīng)（監(jiān)聽多個圖表）
        window.addEventListener('resize', () => {
            this.$chart.bar('mStudyTime');
            this.$chart.line('passRate');
        });
    },
    methods: {
        handleClick() {
            if (this.activeName == '1') {
                this.$nextTick(() => {
                    this.$chart.bar('mStudyTime');
                });
            }
            if (this.activeName == '2') {
                this.$nextTick(() => {
                    this.$chart.line('passRate');
                });
            }
        }
    }
};