vue + echarts 动态折线图（每秒刷新）

效果展示：

1.先在data中定义option

nowOptions: {

        visualMap: [

          {

            show: false,

            type: 'continuous',

            seriesIndex: 0,

            min: 0,

            max: 400,

          },

        ],

        title: {

          left: 'left',

          text: '电量消耗实时统计',

        },

        tooltip: {

          trigger: 'axis',

          formatter: function(params) {

            params = params[0]

            vardate =new Date(params.name)

            return (

              date.getDate() +              '/' +              (date.getMonth() + 1) +              '/' +              date.getFullYear() +              ' : ' +              params.value[1]

            )

          },

          axisPointer: {

            animation: false,

          },

        },

        grid: {

          top: '15%',

          bottom: '10%',

        },

        xAxis: {

          type: 'time',

          splitLine: {

            show: false,

          },

          triggerEvent: true,

        },

        yAxis: {

          type: 'value',

          boundaryGap: [0, '100%'],

          max: 100,

          splitLine: {

            show: false,

          },

        },

        series: [

          {

            type: 'line',

            showSymbol: false,

            hoverAnimation: false,

            data: [],

          },

        ],

      },

2.生成折线图

（1）初始化数据

nowChart() {

      let that =thisvardata = []

      varnow = +new Date()

      varvalue = Math.random() * 1000for(vari = 0; i < 60; i++) {

        now =newDate(+now +this.oneDay)

        data.push(this.randomData(now, value))

      }

      // 基于准备好的dom，初始化echarts实例varmyChart = echarts.init(document.getElementById('nowEcharts'))

      // 绘制图表vartemp = 59      let options = Object.assign(that.nowOptions, {})

      options.series.forEach((item) => {

        item.data = data

        item.markPoint = {

          data: [

            [

              {

                symbol: 'none',

                x: '95%',

              },

              {

                symbol: 'circle',

                name: '实时数据',

                value: data[temp].value[1],

                xAxis: data[temp].value[0],

              },

            ],

          ],

        }

      })

      myChart.setOption(options)

      // 1秒定时器setInterval(() => {

        for(vari = 0; i < 1; i++) {

          data.shift()

          now =newDate(+now +this.oneDay)

          data.push(this.randomData(now, value))

        }

        myChart.setOption(options)

      }, 1000)

    },

（2）生成随机数

randomData(now, value) {

      value = Math.random() * 100varvalueName =        now.getFullYear() +        '/' +        (now.getMonth() + 1) +        '/' +        now.getDate() +        ' ' +        (now.getHours() >= 10 ? now.getHours() : '0' + now.getHours()) +        ':' +        (now.getMinutes() >= 10 ? now.getMinutes() : '0' + now.getMinutes()) +        ':' +        (now.getSeconds() >= 10 ? now.getSeconds() : '0' + now.getSeconds())

      return {

        name: now.toString(),

        value: [valueName, Math.round(value)],

      }

    },