使用Echarts 实现动态的折线图

发布于 2022-07-29  83 次阅读


<template>
  <div id="Flow" ref="flow"></div>
</template>

<script>
// 先引入Vue-echarts
import * as echarts from "echarts";

export default {
  // 当前页面的名字,用于路由跳转以及keep-live缓存
  name: 'pagename',
  // 接收父组件传来的数据
  props: {},
  // mixin混入后注册使用
  mixins: [],
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      timer: null,
      // 折线图实例
      myChart: {},
      time: {},
      dataOne: {},
      dataTwo: {},
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  // 过滤
  filters: {},
  //方法集合
  methods: {
    getdataall () {

    },
    // echarts 图形
    init () {
      let vm = this;

      const time = (() => {
        let now = new Date();
        let res = [];
        let len = 16;
        while (len--) {
          res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
          now = new Date(+now - 2000);
        }
        return res;
      })();
      const dataOne = (() => {
        let res = [];
        let len = 16;
        while (len--) {
          res.push(0);
        }
        return res;
      })();
      const dataTwo = (() => {
        let res = [];
        let len = 16;
        while (len--) {
          res.push(0);
        }
        return res;
      })();
      // 使用刚指定的配置项和数据显示图表。
      let option = {
        animation: true,
        backgroundColor: 'rgba(0,0,0,0)',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
          // 处理过的显示值
          // formatter: function (params, ticket, callback) {
          //   let htmlStr = '';
          //   let valMap = {};
          //   for (let i = 0; i < params.length; i++) {
          //     let param = params[i];
          //     let xName = param.name; //x轴的名称
          //     let seriesName = param.seriesName; //图例名称
          //     let value = param.value; //y轴值
          //     let color = param.color; //图例颜色
          //     let last = ''; //单位
          //     //过滤无效值
          //     if (value == '-') {
          //       continue;
          //     }
          //     //过滤重叠值
          //     if (valMap[seriesName] == value) {
          //       continue;
          //     }
          //     if (i === 0) {
          //       htmlStr += xName + '<br/>'; //x轴的名称
          //     }
          //     if (value === 0) {
          //       last = value + ' ' + 'B/s';
          //       htmlStr += '<div>';
          //       //为了保证和原来的效果一样,这里自己实现了一个点的效果
          //       htmlStr +=
          //         '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
          //         color +
          //         ';"></span>';
          //       //圆点后面显示的文本
          //       htmlStr += `${seriesName} <span style="margin-left:20px"></span> <b>${last}</b>`;
          //       htmlStr += '</div>';
          //       valMap[seriesName] = value;
          //     } else {
          //       let k = 1024;
          //       let sizes = [
          //         'B/s',
          //         'KB/s',
          //         'MB/s',
          //         'GB',
          //         'TB',
          //         'PB',
          //         'EB',
          //         'ZB',
          //         'YB'
          //       ];
          //       let is = Math.floor(Math.log(value) / Math.log(k));
          //       last = (value / Math.pow(k, is)).toPrecision(3) + ' ' + sizes[is];
          //       htmlStr += '<div>';
          //       //为了保证和原来的效果一样,这里自己实现了一个点的效果
          //       htmlStr +=
          //         '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
          //         color +
          //         ';"></span>';
          //       //圆点后面显示的文本
          //       htmlStr += `${seriesName} <span style="margin-left:20px"></span> <b>${last}</b>`;
          //       htmlStr += '</div>';
          //       valMap[seriesName] = value;
          //     }
          //   }
          //   return htmlStr;
          // }
        },
        legend: {},
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: time,
            axisTick: {
              show: false
            },
            axisPointer: {
              show: true,
              type: 'line',
              lineStyle: {
                type: 'dashed'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            boundaryGap: [0, '100%'],
            // 刻度处理后的值
            // axisLabel: {//坐标轴刻度标签的相关设置。
            //   formatter: function (value, index) {
            //     let last = '';
            //     if (parseFloat(value) === 0) return '0 B/s';
            //     if (value < 1) {
            //       last = value + ' ' + 'B/s';
            //       return last;
            //     } else {
            //       let k = 1024;
            //       let sizes = ['B/s', 'KB/s', 'MB/s', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
            //       let is = Math.floor(Math.log(value) / Math.log(k));
            //       last = (value / Math.pow(k, is)).toFixed(2) + ' ' + sizes[is];
            //       return last;
            //     }
            //   }
            // },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
            // 鼠标移上去显示处理过的值
            // axisPointer: {
            //   show: true,
            //   type: 'line',
            //   lineStyle: {
            //     type: 'dashed'
            //   },
            //   label: {
            //     formatter: function (value, index) {
            //       let last = '';
            //       if (parseFloat(value.value) === 0) return '0 B/s';
            //       if (value.value < 1) {
            //         last = value.value + ' ' + 'B/s';
            //         return last;
            //       } else {
            //         let k = 1024;
            //         let sizes = [
            //           'B/s',
            //           'KB/s',
            //           'MB/s',
            //           'GB',
            //           'TB',
            //           'PB',
            //           'EB',
            //           'ZB',
            //           'YB'
            //         ];
            //         let is = Math.floor(Math.log(value.value) / Math.log(k));
            //         last =
            //           (value.value / Math.pow(k, is)).toFixed(2) + ' ' + sizes[is];
            //         return last;
            //       }
            //     }
            //   }
            // }
          }
        ],
        series: [
          {
            name: '上行速度',
            type: 'line',
            showSymbol: false,
            symbol: 'none',
            itemStyle: {
              normal: {
                color: '#0cca8e'
              }
            },
            data: dataOne
          },
          {
            name: '下行速度',
            type: 'line',
            showSymbol: false,
            symbol: 'none',
            itemStyle: {
              normal: {
                color: '#feba47'
              }
            },
            data: dataTwo
          }
        ]
      }

      setInterval(function () {
        let nowTime = new Date().toLocaleTimeString().replace(/^\D*/, '');
        time.push(nowTime);
        dataOne.shift();
        dataOne.push(Math.round(Math.random() * 10000));
        dataTwo.shift();
        dataTwo.push(Math.round(Math.random() * 10000));
        time.shift();
        myChart.setOption({
          xAxis: [
            {
              data: time
            }
          ],
          series: [
            {
              data: dataOne
            },
            {
              data: dataTwo
            }
          ]
        });
      }, 2100);

      vm.myChart.setOption(option,)
    },

  },
  //生命周期 - 创建完成(可以访问当前this实例)
  created () { },
  //生命周期 - 挂载完成(可以访问DOM元素)
  mounted () {
    // 初始化渲染折线图
    this.myChart = echarts.init(this.$refs.flow);
    this.init();
    this.getdataall();
  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () {
    // 离开就清除定时器
    // clearInterval(this.timer);
    // this.timer = null;
  }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能,这个函数会触发
}

</script>

<style lang='scss' scoped>
#Flow {
  min-height: 300px;
}
</style>