1、使用的框架和插件

Vue
Element-UI
vue-echarts

2、使用

模板部分

<template>
  <div class="box">
    <div class="header">
      <el-select v-model="value" placeholder="请选择" @change="changePing">
        <el-option
          v-for="item in pingNum"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button @click="timerStart">开始</el-button>
      <el-button @click="pasueEchart">停止</el-button>
    </div>
    <div class="content">
      <template v-for="(item, index) in option">
        <v-chart
          :style="{height: height, width: width}"
          :key="index"
          :options="item"
          :autoresize="true"
        ></v-chart>
      </template>
    </div>
  </div>
</template>

js部分

import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/legend'
// import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/tooltip'

export default {
  name: 'Index',
  components: {
    'v-chart': ECharts
  },
  data() {
    return {
      height: '33%',
      width: '100%',
      value: 3,
      pingNum: [
        {
          label: '三屏',
          value: 3
        },
        {
          label: '四屏',
          value: 4
        },
        {
          label: '六屏',
          value: 6
        }
      ],
      option: [
        {
          animation: false,
          legend: {},
          tooltip: {},
          dataset: {
            // 提供一份数据。
            dimensions: [
              '年份', '序号', '数量'
            ],
            source: [
              // {年份: 2000, 序号: 0, 数量: 0},
              // {年份: 2001, 序号: 1, 数量: 100},
              // {年份: 2002, 序号: 2, 数量: 200}
            ]
          },
          // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
          xAxis: {type: 'category'},
          // 声明一个 Y 轴，数值轴。
          yAxis: {},
          // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
          series: [
            {
              name: '序号',
              type: 'line',
              showSymbol: false
            }, {
              name: '数量',
              type: 'line',
              showSymbol: false
            }
          ]
        },
        {
          animation: false,
          legend: {},
          tooltip: {},
          dataset: {
            // 提供一份数据。
            dimensions: [
              '年份', '数量'
            ],
            source: [
              // {年份: 2000, 序号: 0, 数量: 0},
              // {年份: 2001, 序号: 1, 数量: 100},
              // {年份: 2002, 序号: 2, 数量: 200}
            ]
          },
          // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
          xAxis: {type: 'category'},
          // 声明一个 Y 轴，数值轴。
          yAxis: {},
          // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
          series: [
           {
              name: '数量',
              type: 'line',
              showSymbol: false
            }
          ]
        },
        {
          animation: false,
          legend: {},
          tooltip: {},
          dataset: {
            // 提供一份数据。
            dimensions: [
              '年份', '序号'
            ],
            source: [
              // {年份: 2000, 序号: 0, 数量: 0},
              // {年份: 2001, 序号: 1, 数量: 100},
              // {年份: 2002, 序号: 2, 数量: 200}
            ]
          },
          // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
          xAxis: {type: 'category'},
          // 声明一个 Y 轴，数值轴。
          yAxis: {},
          // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
          series: [
            {
              name: '序号',
              type: 'line',
              showSymbol: false
            }
          ]
        },
        {
          animation: false,
          legend: {},
          tooltip: {},
          dataset: {
            // 提供一份数据。
            dimensions: [
              '年份', '序号', '数量'
            ],
            source: [
              // {年份: 2000, 序号: 0, 数量: 0},
              // {年份: 2001, 序号: 1, 数量: 100},
              // {年份: 2002, 序号: 2, 数量: 200}
            ]
          },
          // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
          xAxis: {type: 'category'},
          // 声明一个 Y 轴，数值轴。
          yAxis: {},
          // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
          series: [
            {
              name: '序号',
              type: 'line',
              showSymbol: false
            }, {
              name: '数量',
              type: 'line',
              showSymbol: false
            }
          ]
        }
      ],
      timer: '',
      num: 0,
      // 为true是定时器开，定时器关
      flag: false
    }
  },
  mounted() {
    // this.timer = setInterval(this.addData, 10)
  },
  methods: {
    changePing(e) {
      console.log(e)
      if (e === 3) {
        this.height = '33%'
        this.width = '100%'
      } else if (e === 4) {
        this.height = '50%'
        this.width = '50%'
      } else if (e === 6) {
        this.height = '33%'
        this.width = '50%'
      }
    },
    timerStart () {
      clearInterval(this.timer)
      this.timer = setInterval(this.addData, 10)
    },
    addData() {
      this.num++
      this.option.forEach(item => {
        let o = { 序号: this.num, 数量: 100 * this.num, 年份: 2000 + this.num}
        item.dataset.source.push(o)
        if (item.dataset.source.length > 500) {
          item.dataset.source.shift()
        }
      })

      // this.option[0].xAxis.data.push((2003 + this.num).toString())
      // this.option[0].series.forEach(item => {
      //   item.data.push(this.num)
      // })
    },
    pasueEchart() {
      clearInterval(this.timer)
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}

效果图

GIF.gif