图表

1.Chart.js

// chart.vue
<template>
  <div>
    <canvas ref="myChart"></canvas>
  </div>
</template>

<script>
// 引入Chart.js图表
import Chart from 'chart.js'

export default {
  data () {
    return {
        myChart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initLine()
    })
  },
  methods: {
    initLine() {
      this.myChart = new Chart(this.$refs.myChart, option)
    }
  }
}
</script>

2.echarts.js

// echarts.vue
<template>
  <div>
    <div ref="myChart"></div>
  </div>
</template>

<script>
// 引入echarts图表
import echarts from 'echarts'

export default {
  data () {
    return {
        myChart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initLine()
    })
  },
  methods: {
    initLine() {
      this.myChart = echarts.init(this.$refs.myChart)
      // 为echarts对象加载数据 
      this.myChart.setOption(option)
    }
  }
}
</script>