bimgis_sx/src/views/spectrum/reform/statistics/ChartItem.vue

<template>
  <div class="cart-item">
    <slot name="title" />
    <v-chart :option="option" :init-options="{ height: 400 }" autoresize style="width: 100%; height: 100%" />
    <!-- <el-empty :image="emptyImg" v-show="!option.dataset.some((item) => item.source && item.source.length > 0)">
      <template v-slot:description>&nbsp;</template>
    </el-empty> -->
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
  import { IStatisticsData } from '../api/common'
  import emptyImg from '@/assets/icon/null.png'
  import { IPointTarget } from '../../configuration/api/common'
  import moment from 'moment'

  @Component({ name: 'ChartItem' })
  export default class ChartItem extends Vue {
    @Prop({ type: String }) title!: string
    @Prop({ type: String }) itemKey!: keyof IStatisticsData['siteAndIndicateVo']
    @Prop({ type: Array, default: () => [] }) data!: IStatisticsData[]
    @Prop({ type: Array, default: () => [] }) standards!: IPointTarget['showVos']
    @Watch('data', { immediate: true })
    log(val) {
      this.count++
      console.log(this.count, this.itemKey, val, moment().format('YYYY-MM-DD HH:mm:ss'))
    }
    emptyImg = emptyImg
    count = 0
    getCodeName(code) {
      const { targetName } = this.standards.find((item) => item.targetCode === code) || {}
      return targetName || code
    }

    get option() {
      const dataset = this.data.map(({ checkCode, siteAndIndicateVo: { [this.itemKey]: items } }: IStatisticsData) => ({
        id: checkCode,
        source: items || []
      }))
      const series = this.data
        .map(({ checkCode }, index) => {
          return [
            { name: 'maxValue', displayName: '最大值' },
            { name: 'avgValue', displayName: '平均值' },
            { name: 'minValue', displayName: '最小值' }
          ].map((item, typeIndex) => {
            return {
              name: `${this.getCodeName(checkCode)}-${item.displayName}`,
              type: 'line',
              symbol: { '0': 'emptyCircle', '1': 'rect', '2': 'triangle' }[String(typeIndex)],
              smooth: true,
              dimensions: ['xposition', item],
              datasetIndex: index
            }
          })
        })
        .flat()
      return {
        tooltip: { trigger: 'axis', valueFormatter: (value) => Math.floor(Number(value) * 100) / 100 },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: [
              ...new Set(dataset.map((item) => item.source.map((item: { xposition: string }) => item.xposition)).flat())
            ].sort((a, b) => {
              const reg = /(?<=\d{4}年)(\d)(?=月)/
              const left = a.replace(reg, `0$1`)
              const right = b.replace(reg, `0$1`)

              return left.localeCompare(right)
            })
          }
        ],
        yAxis: [{ type: 'value', min: ({ min }) => min }],
        dataZoom: dataset.some(({ source }) => source.length > 100) && [
          { type: 'inside', start: 0, end: 100 },
          { start: 0, end: 100 }
        ],
        legend: { show: true, type: 'scroll', width: '80%' },
        grid: { top: 45, left: 0, right: 45, bottom: 30, containLabel: true },
        toolbox: {
          show: true,
          feature: { saveAsImage: { show: true } },
          right: 0
        },
        dataset,
        series
      }
    }
  }
</script>

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