echarts 多条线动态刷新

谁借莪１个温暖的怀抱￠ 2021-09-02 09:00 432阅读 0赞

### 目录 ###

*  功能演示
 *   *  功能说明
     *  功能代码
     *  实现思路
     *   *   *  关于简称
             *  整个功能流程图
             *  获取数据层流程
             *  展示层流程
     *  传输数据格式
     *  注意事项
     *  存在问题

# 功能演示 #

![在这里插入图片描述][20200914101314198.gif_pic_center]

## 功能说明 ##

功能如题所示，根据左侧复选框的值渲染右侧图表，如果到达采集点数（例如100个点）就删除最前面的数据，将加载过来的数据插到数组最后面。

## 功能代码 ##

RealTimeDataVisual.vue

<template>
      <div class="realTimeData">
        <Row :gutter="20">
          <Col :span="12" class="leftBox">
            <Button type="primary" @click="stopInterval">停止仿真</Button>
            <vxe-table
              highlight-hover-column
              :auto-resize="true"
              :stripe="true"
              resizable
              ref="xTree"
              :data="varTreeData"
              class="margin_top_12"
              :tree-config="{ children: 'children' }"
            >
              <vxe-table-column
                field="name"
                title="Name"
                :filters="[{ data: '' }]"
                :filter-render="{
                  name: 'Input',
                  isFooter: false,
                  props: {
                    size: 'small'
                  }
                }"
                :filter-method="filterNameMethod"
                :filter-multiple="true"
                tree-node
                show-overflow="title"
              >
              </vxe-table-column>
    
              <vxe-table-column field="plot" title="Plot" :width="45">
                <template v-slot="{ row }">
                  <div v-if="row.causality != 'parameter'">
                    <CheckboxGroup v-model="fruit">
                      <Checkbox :label="row.name">
                        <span></span>
                      </Checkbox>
                    </CheckboxGroup>
                  </div>
                </template>
              </vxe-table-column>
              <vxe-table-column field="causality" title="Causality" show-overflow="causality"> </vxe-table-column>
              <vxe-table-column field="value" title="Value" show-overflow="value">
                <template v-slot="{ row }">
                  <div v-if="row.causality == 'parameter'">
                    {
       { row.value }}
                  </div>
                </template></vxe-table-column
              >
              <vxe-table-column field="unit" title="Unit" show-overflow="unit"> </vxe-table-column>
              <vxe-table-column field="description" title="Description" show-overflow="title"> </vxe-table-column>
            </vxe-table>
          </Col>
          <Col :span="12">
            <time-chart
              ref="childChart"
              :seriesData="seriesData"
              :legend="legend"
              :xAxisData="xAxisData"
              :infoPoints="infoPoints"
              :tsPoints="tsPoints"
              :removeItemName="removeItemName"
              @resetRemoveItemName="resetRemoveItemName"
            ></time-chart>
          </Col>
        </Row>
      </div>
    </template>
    <script>
    import TimeChart from '@/components/charts/time1';
    export default {
      name: 'realTimeData',
      components: {
        TimeChart
      },
      data() {
        return {
          serverCode: this.$route.params.serverCode,
          serverStatus: this.$route.params.serverStatus,
          maxSizePerNode: this.$route.params.maxSizePerNode,
          serviceStartTime: this.$route.params.serverStartTime,
          varTreeData: [],
          tsPoints: [],
          infoPoints: [],
          seriesData: [],
          xAxisData: [],
          fruit: [],
          legend: [],
          removeItemName: '',
          querytime: this.$moment().subtract(30, 'seconds')
        };
      },
      created() {
        this.filterCanQueryTSDataPoints();
      },
      methods: {
        resetRemoveItemName() {
          this.removeItemName = '';
        },
        /**
         @desc 表格名称过滤
         */
        filterNameMethod({ option, row }) {
          console.log(option.data);
          return row.name.indexOf(option.data) > -1;
        },
        /**
         * @desc 获取可以查询时序数据的测点
         * @params code 实例code
         * */
        async filterCanQueryTSDataPoints(code = this.serverCode, status = this.serverStatus) {
          let self = this;
          if (status != 1) {
            this.$Message.error('请先上线此实例！');
            return false;
          }
          let { data: filterTsData } = await this.$http.get(`/mockup/api/v1/mockupService/bound_nodes_info/${code}`);
          if (filterTsData.code === 0) {
            this.varTreeData = filterTsData.result;
            let _canQueryTSDataPoints = filterTsData.result.filter((item) => {
              return item.location == 'ts' && this.fruit.indexOf(item.name) > -1 && item.name != this.removeItemName;
            });
            let _canQueryInfoDataPoints = filterTsData.result.filter((item) => {
              return item.location == 'info' && this.fruit.indexOf(item.name) > -1 && item.name != this.removeItemName;
            });
            this.tsPoints = _canQueryTSDataPoints.map((item) => {
              return {
                name: item.name,
                causality: item.causality,
                browsePath: item.bind_uri
              };
            });
            this.infoPoints = _canQueryInfoDataPoints.map((item) => {
              return {
                name: item.name,
                causality: item.causality,
                browsePath: item.bind_uri
              };
            });
          } else {
            this.$Message.error(data.msg);
            return false;
          }
        },
        /**
         * @desc 查询数据
         * */
        queryData(infoPoints = this.infoPoints, tsPoints = this.tsPoints) {
          this.seriesData.length = 0;
          this.legend.length = 0;
          let self = this;
          let loopData = [];
          let legend = [];
    
          Promise.all([this.queryCurrentData(tsPoints), this.queryInfoPointsData(infoPoints)]).then((res) => {
            loopData.length = 0;
            legend.length = 0;
            let querytime = this.$moment().subtract(30, 'seconds');
            let t = self.$moment().format('YYYY-MM-DD HH:mm:ss.SSS');
            if (res[0]) {
              let { data: tsData } = res[0];
              // let t = self.$moment().format('YYYY-MM-DD HH:mm:ss.SSS');
              if (tsData.code == '0x00000000') {
                if (tsData.result.length > 0) {
                  tsData.result.forEach((item, index) => {
                    let _data = [];
                    if (item.t) {
                      item.t = this.$moment(item.t);
                    }
                    let diff = item.t.diff(querytime, 'seconds');
                    if (!item || !item.t || diff < 0) {
                      // this.xAxisData.push(t);
                      // _data.push([t, '']);
                      // loopData.push({
                      //   name: tsPoints[index].name,
                      //   type: 'line',
                      //   showSymbol: false,
                      //   hoverAnimation: false,
                      //   data: _data
                      // });
                    } else {
                      t = self.$moment(item.t).format('YYYY-MM-DD HH:mm:ss.SSS');
                      let v = item.v;
                      _data.push([t, v]);
                      loopData.push({
                        name: tsPoints[index].name,
                        type: 'line',
                        showSymbol: false,
                        hoverAnimation: false,
                        data: _data
                      });
                      // this.xAxisData.push(t);
                    }
                    legend.push(tsPoints[index].name);
                  });
                }
              }
            }
            if (res[1]) {
              let { data: infoData } = res[1];
              if (infoData.code === '0x00000000') {
                infoData.result.forEach((item, index) => {
                  let _data = [];
                  if (item == null) {
                    // this.xAxisData.push(t);
                    //  _data.push([t, '']);
                    //  loopData.push({
                    //    name: infoPoints[index].name,
                    //    type: 'line',
                    //    showSymbol: false,
                    //    hoverAnimation: false,
                    //   data: _data
                    //  });
                  } else {
                    let v = item.Value;
                    _data.push([t, v]);
                    loopData.push({
                      name: infoPoints[index].name,
                      type: 'line',
                      showSymbol: false,
                      hoverAnimation: false,
                      data: _data
                    });
                    // this.xAxisData.push(t);
                  }
                  legend.push(infoPoints[index].name);
                });
              }
            }
            // this.xAxisData.push(t);
            this.legend = legend;
            debugger;
            this.seriesData = loopData;
          });
        },
        /***
         * @desc 仿真历史监视
         */
        queryCurrentData(tsPoints = this.tsPoints) {
          if (!tsPoints.length) {
            return false;
          }
          let _uris = tsPoints.map((item) => {
            return item.browsePath;
          });
          return this.$http.post(`/aggquery/v2/query/v2/queryCurrentRawValueByUri`, _uris);
        },
        /**
         * @desc 获取参数值
         * */
        queryInfoPointsData(infoPoints = this.infoPoints) {
          if (!infoPoints.length) {
            return false;
          }
          let _uris = infoPoints.map((item) => {
            return item.browsePath;
          });
          return this.$http.post(`/model/v2/model/queryNodesByUri`, {
            uris: _uris
          });
        },
        stopInterval() {
          clearInterval(this.timer);
        }
      },
      deactivated() {
        clearInterval(this.timer);
      },
      destroyed() {
        clearInterval(this.timer);
      },
      watch: {
        fruit: function(newval, oldval) {
          const _oldval = new Set(oldval);
          const _newval = new Set(newval);
          const someArr = [...new Set([..._oldval].filter((x) => _newval.has(x)))];
          oldval.forEach((item) => {
            if (someArr.indexOf(item) === -1) {
              this.removeItemName = item;
            }
          });
          this.filterCanQueryTSDataPoints();
        },
        tsPoints: function(newval, oldval) {
          let self = this;
          clearInterval(this.timer);
          if (!oldval) {
            return;
          }
          this.timer = setInterval(function() {
            self.queryData(self.infoPoints, self.tsPoints);
          }, 2000);
        },
        infoPoints: function(newval, oldval) {
          clearInterval(this.timer);
          if (!oldval) {
            return;
          }
          let self = this;
          this.timer = setInterval(function() {
            self.queryData(self.infoPoints, self.tsPoints);
          }, 2000);
        }
      }
    };
    </script>
    <style scoped>
    .leftBox {
      height: 600px;
      overflow-y: scroll;
    }
    </style>

Time1.vue

<template>
      <div>
        <div class="charts charts-line" ref="dom"></div>
      </div>
    </template>
    <script>
    import echarts from 'echarts';
    import tdTheme from './theme.json';
    import { on, off } from './tools';
    echarts.registerTheme('tdTheme', tdTheme);
    export default {
      name: 'ChartsTime',
      props: {
        xAxisData: {
          type: Array
        },
        legend: {
          type: Array
        },
        seriesData: {
          type: Array
        },
        infoPoints: {
          type: Array
        },
        tsPoints: {
          type: Array
        },
        removeItemName: {
          type: String
        }
      },
      data() {
        return {
          loopData: [],
          dom: null,
          xAxis: [],
          yAxis: [],
          newLegend: [],
          oldLegend: [],
          maxSizePerNode: 100
        };
      },
      methods: {
        resize() {
          this.dom.resize();
        },
        renderChart() {
          /*eslint-disable */
          let option = {
            tooltip: {
              trigger: 'axis',
              position: function(pt) {
                return [pt[0], '10%'];
              }
            },
            legend: {
              type: 'scroll',
              data: this.legend
            },
            xAxis: {
              type: 'category',
              data: this.xAxisData
            },
            yAxis: {
              type: 'value',
              boundaryGap: [0, '100%'],
              splitLine: {
                show: false
              },
              max: 10,
              min: -10
            },
            series: null
          };
          this.dom = echarts.init(this.$refs.dom, 'tdTheme');
          on(window, 'resize', this.resize);
    
          //  获取的实时数据进行分类
          this.seriesData.forEach((item, index) => {
            if (this.removeItemName) {
              console.log(this.removeItemName);
              let _temp = this.yAxis.findIndex((item) => {
                return item.name === this.removeItemName;
              });
              if (_temp != -1) {
                this.yAxis.splice(_temp, 1);
              }
            }
            let tmp = this.yAxis.findIndex((yItem) => {
              return yItem.name === item.name;
            });
            // 如果
            if (tmp == -1) {
              this.yAxis.push(item);
            } else if (this.yAxis[tmp].data.length < this.maxSizePerNode) {
              // if (this.yAxis[tmp].data.length < this.maxSizePerNode) {
              this.yAxis[tmp].data.push(item.data[0]);
            } else {
              this.yAxis[tmp].data.shift();
              this.yAxis[tmp].data.push(item.data[0]);
            }
          });
          let xTime = [];
          this.yAxis.forEach((item) => {
            return item.data.forEach((dItem, dIndex) => {
              xTime.push(dItem[0]);
            });
          });
          let _xAxisData = Array.from(new Set(xTime));
          option.xAxis.data = _xAxisData;
          option.series = this.yAxis;
          console.log('---------------------------------------------------------');
          console.log(JSON.stringify(option));
          this.dom.setOption(option, true);
          this.$emit('resetRemoveItemName', '');
        }
      },
      watch: {
        legend: function(newval) {
          if (!this.legend.length) {
            this.yAxis.length = 0;
          }
        },
        seriesData: function(newval, oldval) {
          if (newval.length > 0) {
            this.renderChart();
          }
        }
      },
      deactivated() {},
      beforeDestroy() {
        off(window, 'resize', this.resize);
      }
    };
    </script>
    <style>
    .charts.charts-line {
      padding: 12px;
      min-height: 400px;
    }
    </style>

## 实现思路 ##

RealTimeDataVisule.vue文件主要用来获取数据，我这边的业务是获取实时数据，每次就一个点，  
Time1.vue 文件主要用来展示数据。

#### 关于简称 ####

左侧复选框勾选的内容我们称为指标，以下简称**指标**  
右侧图标中点的最大个数，我们成为采集点数，以下简称为**最大采集点数**  
请求接口返回的数据，以下简称为**接口返回数据**，因为是实时数据展示，接口一般只返回和指标数量相同的数据，（如果复选框勾选两个指标，去查询实时数据的接口，接口返回的内容为两个）

#### 整个功能流程图 ####

#### 获取数据层流程 ####

![获取数据层流程图逻辑][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0g1X1F1ZWVuU3R5bGUxMg_size_16_color_FFFFFF_t_70_pic_center]

#### 展示层流程 ####

![展示层流程图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0g1X1F1ZWVuU3R5bGUxMg_size_16_color_FFFFFF_t_70_pic_center 1]

## 传输数据格式 ##

{"tooltip":{"trigger":"axis"},"legend":{"type":"scroll","data":["int_in"]},"xAxis":{"type":"category","data":["2020-09-14 10:09:09.840","2020-09-14 10:09:11.965","2020-09-14 10:09:14.178","2020-09-14 10:09:16.398","2020-09-14 10:09:17.520","2020-09-14 10:09:20.144","2020-09-14 10:09:22.749","2020-09-14 10:09:24.155","2020-09-14 10:09:26.604","2020-09-14 10:09:28.826","2020-09-14 10:09:29.950","2020-09-14 10:09:32.190","2020-09-14 10:09:34.428","2020-09-14 10:09:36.546","2020-09-14 10:09:39.752","2020-09-14 10:09:41.987","2020-09-14 10:09:44.226","2020-09-14 10:09:45.346","2020-09-14 10:09:47.628","2020-09-14 10:09:49.918","2020-09-14 10:09:53.227","2020-09-14 10:09:55.478","2020-09-14 10:09:56.589","2020-09-14 10:09:58.817","2020-09-14 10:10:00.905","2020-09-14 10:10:03.137","2020-09-14 10:10:05.385","2020-09-14 10:10:07.647","2020-09-14 10:10:09.908","2020-09-14 10:10:12.142","2020-09-14 10:10:14.385","2020-09-14 10:10:16.605","2020-09-14 10:10:18.872"]},"yAxis":{"type":"value","boundaryGap":[0,"100%"],"splitLine":{"show":false},"max":10,"min":-10},"series":[{"name":"int_in","type":"line","showSymbol":false,"hoverAnimation":false,"data":[["2020-09-14 10:09:09.840",3],["2020-09-14 10:09:11.965",5],["2020-09-14 10:09:14.178",4],["2020-09-14 10:09:16.398",3],["2020-09-14 10:09:17.520",2],["2020-09-14 10:09:20.144",1],["2020-09-14 10:09:22.749",0],["2020-09-14 10:09:24.155",0],["2020-09-14 10:09:26.604",0],["2020-09-14 10:09:28.826",0],["2020-09-14 10:09:29.950",0],["2020-09-14 10:09:32.190",5],["2020-09-14 10:09:34.428",3],["2020-09-14 10:09:36.546",5],["2020-09-14 10:09:39.752",4],["2020-09-14 10:09:41.987",3],["2020-09-14 10:09:44.226",2],["2020-09-14 10:09:45.346",1],["2020-09-14 10:09:47.628",0],["2020-09-14 10:09:49.918",0],["2020-09-14 10:09:53.227",0],["2020-09-14 10:09:55.478",5],["2020-09-14 10:09:56.589",5],["2020-09-14 10:09:58.817",3],["2020-09-14 10:10:00.905",5],["2020-09-14 10:10:03.137",4],["2020-09-14 10:10:05.385",3],["2020-09-14 10:10:07.647",2],["2020-09-14 10:10:09.908",1],["2020-09-14 10:10:12.142",0],["2020-09-14 10:10:14.385",0],["2020-09-14 10:10:16.605",0],["2020-09-14 10:10:18.872",5]]}]}

## 注意事项 ##

1、图表一定要重绘  
2、X轴一定要去重处理，不要单独传输数据，可能渲染重复

## 存在问题 ##

如果指标断开又重新仿真，如果不清空历史数据的话，X轴会出现数据堆积。。。目前的处理是把征条线给清除掉，再给X轴去重处理的，忘各位浏览博客的大神门指导一下，给点思路。

[20200914101314198.gif_pic_center]: /images/20210813/4a5e2735db3d43ac94a94ed57e0a0590.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0g1X1F1ZWVuU3R5bGUxMg_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/ba63ee96a5f944ef87a1b142c3b2e63d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0g1X1F1ZWVuU3R5bGUxMg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/d0e9b770fec64b1fa2c449ddace5f549.png