Vue中使用echarts的折线图且X轴为动态时间轴

1.如何在Vue中引入echarts？

我这里是通过安装命令：

yarn add echarts --save

注意：还有一种使用方法：

yarn add  echarts vue-echarts

不过本人不太喜欢第二种，所以这里主要说第一种.

2.开始使用

第一步：我们在相应文件夹下建一个JS文件夹（我记得vue好像有一个就近维护原则）

在JS文件下创建一个myCharts.js文件。

import echarts from 'echarts'
const install = function(Vue) {
  Object.defineProperties(Vue.prototype, {
    $chart: {
      get() {
        return {
          line_chart: function(id) {
            this.chart = echarts.init(document.getElementById(id))
            this.chart.clear()
            let data_0 = []
            let data_1 = []
            let data_2 = []
            let data_3 = []
            let data_4 = []
            let time = []
            let starTime = 90 * 1000   //这个是当前时间向前取值,我选择十秒为一个间隔，最后一个时间节点刚好，所以不用减去
            let times = new Date((+new Date() - starTime))   //x轴开始的时间
            // console.log(times)

            function initDate(value) {   //时间格式化
              if (value < 9) {
                return '0' + value
              } else {
                return value
              }
            }
            for (let i = 0; i < 10; i++) {  //x轴上显示多少个刻度
              let hours = initDate(times.getHours())
              if (Number(hours) > 23) {
                hours = Number(hours) - 24
              }
              let minutes = initDate((times.getMinutes()))
              if (Number(minutes) > 59) {
                // minutes = minutes - 60
                minutes = initDate(Number(minutes )- 60)
                hours = Number(hours) + 1
              }
              let seconds = initDate((times.getSeconds() + (i * 10)))