VUE——添加组件模块（图表）

Posted 2021-03-22 acmyun

Vue是由一个个小模块组成的，模块可以让页面简介还可以复用：

1、不固定数据数量传到子组件

父组件：

<chartVue v-for="(item, index) in chartList" :key="index" :dtu-id="item.dtuId" :name="item.name" :dtu-fatcor="item.dtuFatcor" :data="item.data" :data-type="item.dataType" style="width:1000px;height:400px;" />

<script>

     import echarts from ‘echarts‘

     import chartVue from ‘@/views/history/chart‘

     import { flatMap, toArray } from ‘rxjs/operators‘

   export default{
        components:{ chartVue },
        data(){
            chartList: [],        
        },
        //方法
        methods: {
             // from方法解析数组
             from(factor(id)).pipe(
                 flatMap(value=>{
                      this.chartList = []
                      if(value.code == 200){ 
                           return from(value.data)
                       }
                  }),
                  toArray(),
                  map(val =>{
                       this.chartList = val
                       return val
                  })
              ).subscibe() 
        }
    }
</script>                                    

子组件（ref接收的值是不固定的）：

<template>
  <div ref="chart" class="app-container" />
</template>

<script>
import echart from ‘echarts‘
import moment from ‘moment‘
export default {
  name: ‘Chart‘,
  props: [
     ‘dtuId‘,
     ‘dtuFatcor‘,
     ‘name‘,
     ‘data‘,
     ‘dataType‘
  ],
    mounted() {
     // 获取历史数据时间
     var that = this
     var chart = echart.init(this.$refs.chart)
     var xdata = []
     var ydata = []
     this.data.forEach(val => {
         xdata.push(moment(val.createdTime).format(‘YYYY-MM-DD HH:mm:ss‘))
         if (this.dataType === ‘2011‘) {
             ydata.push(val.factorData)
         } else {
             ydata.push(val.factorAvgData)
         }
     })
     chart.setOption({
      title: {
        text: that.name
      },
      tooltip: {
        trigger: ‘axis‘
      },
      legend: {
        data: that.name
      },
      toolbox: {
        show: true,
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: ‘category‘,
        boundaryGap: false,
        data: xdata
      },
      yAxis: {
        type: ‘value‘
        // axisLabel: {
        //   formatter: "{value} °C"
        // }
      },
      series: [
        {
          name: that.name,
          type: ‘line‘,
          data: ydata,
          markPoint: {
            data: [
              { type: ‘max‘, name: ‘最大值‘ },
              { type: ‘min‘, name: ‘最小值‘ }
            ]
          },
          markLine: {
            data: [{ type: ‘average‘, name: ‘平均值‘ }]
          }
        }
      ]
    })
  }
}
</script>