在Vue中使用ECharts，按时间实现动态折线图，动态柱状图的功能

在Vue中使用ECharts，按时间实现动态折线图，动态柱状图的功能

先用vue创建项目，引入ECharts,并且写一个基础的折线图，直接上代码

<template>
  <div id="main" style="width: 60%;height:500px;" ref="main">
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: 'HelloWorld',
  mounted() {
    this.test()
  },
  methods: {
    test() {
      // 官方示例 var myChart = echarts.init(document.getElementById('main'));  
      const myChart = echarts.init(this.$refs.main); // 我们可以这样写
      // 
      const time = (function () { // 立即执行函数
        let now = new Date();  // 获得当前的时间
        let res = []; // 存放时间的数组
        let len = 5; // 要存几个时间？
        while (len--) {
          res.unshift(now.toLocaleTimeString().replace(/^\D*/, '')); // 转换时间，大家可以打印出来看一下
          now = new Date(+now - 2000) // 延迟几秒存储一次？
        }
        return res;
      })();
      const dataOne = [11,4,7,8,13]
      const dataTwo = [9,7,7,13,15]
      //配置项，可以去查一下官方文档
      let options = {
        title: {
          text: '动态',
          textStyle: {
            color: 'black'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
        },
        legend: {},
        xAxis: {
          type: 'category',
          data: time, // 把时间组成的数组接过来，放在x轴上
          boundaryGap: true
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: dataOne,
            type: 'line',
            name: '测试一',
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            }
          },
          {
            data: dataTwo,
            name: '测试二',
            type: 'line',
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            }
          }
        ]
      }
      myChart.setOption(options)
    }
  }
}
</script>

<style scoped lang="scss">
</style>

 现在就可以看到了

 但这只是静态的，现在让它动起来

动起来，就在定时器中不断改变X轴，及测试一，测试二的data即可，上代码 

<template>
  <div id="main" style="width: 100%;height:600px;" ref="main">
  </div>
</template>

<script>
import * as echarts from "echarts";
// import axios from "axios";
export default {
  name: 'homePage',
  mounted() {
    this.test()
  },
  methods: {
    test() {
      // 官方示例 var myChart = echarts.init(document.getElementById('main'));  
      const myChart = echarts.init(this.$refs.main); // 我们可以这样写
      // 
      const time = (function () { // 立即执行函数
        let now = new Date();  // 获得当前的时间
        let res = []; // 存放时间的数组
        let len = 5; // 要存几个时间？
        while (len--) {
          res.unshift(now.toLocaleTimeString().replace(/^\D*/, '')); // 转换时间，大家可以打印出来看一下
          now = new Date(+now - 2000) // 延迟几秒存储一次？
        }
        return res;
      })();
      const dataOne = (function () { // 5个随机数，大家可随意定义
        let res = [];
        let len = 5;
        while (len--) {
          res.push(Math.round(Math.random() * 1000));
        }
        return res;
      })();
      const dataTwo = (function () { // 5个随机数
        let res = [];
        let len = 5;
        while (len--) {
          res.push(Math.round(Math.random() * 1000));
        }
        return res;
      })();
      //配置项，可以去查一下官方文档
      let options = {
        title: {
          text: '动态',
          textStyle: {
            color: 'black'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
        },
        legend: {},
        xAxis: {
          type: 'category',
          data: time, // 把时间组成的数组接过来，放在x轴上
          boundaryGap: true
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: dataOne,
            type: 'line',
            name: '测试一',
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            }
          },
          {
            data: dataTwo,
            name: '测试二',
            type: 'line',
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            }
          }
        ]
      }
      setInterval(function () {
        let nowTime = new Date().toLocaleTimeString().replace(/^\D*/, '');
        time.shift()
        time.push(nowTime)
        dataOne.shift()
        dataOne.push(Math.round(Math.random() * 1000))
        dataTwo.shift()
        dataTwo.push(Math.round(Math.random() * 1000))
        console.log(dataOne)
        //很多朋友可能要接后端接口,把数据替换下来既可以了
        // axios.get('你的url').then(res => {
        //   console.log(res)
        // })
        myChart.setOption({
          xAxis: [
            {
              data: time
            }
          ],
          series: [
            {
              data: dataOne
            },
            {
              data: dataTwo
            }
          ]
        })
      }, 2000)
      myChart.setOption(options)
    }
  }
}
</script>

<style scoped lang="scss">
</style>

柱状图只需把  series中的line改为bar即可，但是可以看一下官方文档，会发现toolbox，

具体可直接搜索查看，在我们的options中加上

let options = {
        title: {
          text: '动态',
          textStyle: {
            color: 'black'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
        },
        legend: {},
        //----------------------------我在这！！！
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            magicType: { type: ['bar', 'line','stack'] },
            restore: {},
            saveAsImage: {}
          }
        }, 
        // --------------------------------
        xAxis: {
          type: 'category',
          data: time, // 把时间组成的数组接过来，放在x轴上
          boundaryGap: true
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: dataOne,
            type: 'line',
            name: '测试一',
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            }
          },
          {
            data: dataTwo,
            name: '测试二',
            type: 'line',
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            }
          }
        ]
      }

 大家自己点点看吧！