yclw/src/views/spectrum/reform/statistics/DayAndHourChart.vue

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

    <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 { IStatisticsDayNHour } from '../api/common'
  import emptyImg from '@/assets/icon/null.png'
  import { IPointTarget } from '../../configuration/api/common'

  @Component({ name: 'ChartItem' })
  export default class ChartItem extends Vue {
    @Prop({ type: String }) title!: string
    @Prop({ type: Object, default: () => ({}) }) data!: IStatisticsDayNHour
    @Prop({ type: Array, default: () => [] }) standards!: IPointTarget['showVos']
    @Prop({ type: String, default: 'rfallTotal' }) rainfallKey!: string
    emptyImg = emptyImg

    getCodeName(code) {
      const { targetName } = this.standards.find((item) => item.targetCode === code) || {}
      return targetName || code
    }

    get option() {
      const { datas = [], rainFallVos = [] } = this.data
      const dataset = [
        {
          id: 'rainfall',
          source: (rainFallVos || []).filter((item) => !!item[this.rainfallKey])
        },
        ...datas.map(({ checkCode, statisticalData }) => ({
          id: checkCode,
          source: statisticalData
        }))
      ]
      const series = dataset
        .map(({ id }, index) => {
          return index === 0
            ? {
                name: '降雨量',
                dimensions: ['xposition', this.rainfallKey],
                datasetIndex: index,
                type: 'line',
                symbol: 'circle',
                smooth: true,
                yAxisIndex: 1
              }
            : [
                { name: 'maxValue', displayName: '最大值' },
                { name: 'avgValue', displayName: '平均值' },
                { name: 'minValue', displayName: '最小值' }
              ].map((item, typeIndex) => {
                return {
                  name: `${this.getCodeName(id)}-${item.displayName}`,
                  dimensions: ['xposition', item],
                  datasetIndex: index,
                  type: 'line',
                  symbol: { '0': 'emptyCircle', '1': 'rect', '2': 'triangle' }[String(typeIndex)],
                  smooth: true,
                  yAxisIndex: 0
                }
              })
        })
        .flat()

      return {
        tooltip: { trigger: 'axis' },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: [
              ...new Set(
                dataset.map((item) => (item.source as { xposition: string }[]).map((item) => 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', boundaryGap: false },
          {
            type: 'value',
            boundaryGap: false,
            inverse: true,
            alignTicks: true,
            position: 'right',
            name: '降雨量',
            nameLocation: 'start'
          }
        ],
        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: 45, right: 45, bottom: 45, containLabel: true },
        toolbox: { show: true, feature: { restore: { show: true }, saveAsImage: { show: true } } },
        dataset,
        series
      }
    }
    @Watch('option')
    log(val) {
      console.log(val)
    }
  }
</script>

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