|
|
@@ -21,12 +21,20 @@
|
|
|
import emptyImg from '@/assets/icon/null.png'
|
|
|
import { IPointTarget } from '../../configuration/api/common'
|
|
|
|
|
|
- @Component({ name: 'ChartItem' })
|
|
|
- export default class ChartItem extends Vue {
|
|
|
+ const toFixed2 = (num: number | string) => Math.floor(Number(num) * 100) / 100
|
|
|
+
|
|
|
+ const toXAxis = (dateStr: string) => {
|
|
|
+ const [date, time] = String(dateStr).split(' ')
|
|
|
+ if (!time) return dateStr
|
|
|
+ return `${date} ${time.length === 1 ? '0' : ''}${time}:00`
|
|
|
+ }
|
|
|
+
|
|
|
+ @Component({ name: 'DayAndHourChart' })
|
|
|
+ export default class DayAndHourChart 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
|
|
|
+ @Prop({ type: String, default: 'rfallTotal' }) rainfallKey!: keyof IStatisticsDayNHour['rainFallVos'][0]
|
|
|
emptyImg = emptyImg
|
|
|
|
|
|
getCodeName(code) {
|
|
|
@@ -39,13 +47,27 @@
|
|
|
const dataset = [
|
|
|
{
|
|
|
id: 'rainfall',
|
|
|
- source: (rainFallVos || []).filter((item) => !!item[this.rainfallKey])
|
|
|
+ source: (rainFallVos || [])
|
|
|
+ .filter((item) => !!item[this.rainfallKey])
|
|
|
+ .map(({ xposition, [this.rainfallKey]: val }) => {
|
|
|
+ return {
|
|
|
+ xposition: toXAxis(xposition),
|
|
|
+ [this.rainfallKey]: toFixed2(val)
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
...datas.map(({ checkCode, statisticalData }) => ({
|
|
|
id: checkCode,
|
|
|
- source: statisticalData
|
|
|
+ source: statisticalData.map(({ avgValue, maxValue, minValue, xposition }) => {
|
|
|
+ return {
|
|
|
+ avgValue: toFixed2(avgValue),
|
|
|
+ maxValue: toFixed2(maxValue),
|
|
|
+ minValue: toFixed2(minValue),
|
|
|
+ xposition: toXAxis(xposition)
|
|
|
+ }
|
|
|
+ })
|
|
|
}))
|
|
|
- ]
|
|
|
+ ].map((item) => ({ ...item, source: item.source.sort((a, b) => a.xposition.localeCompare(b.xposition)) }))
|
|
|
const series = dataset
|
|
|
.map(({ id }, index) => {
|
|
|
return index === 0
|
|
|
@@ -53,9 +75,11 @@
|
|
|
name: '降雨量',
|
|
|
dimensions: ['xposition', this.rainfallKey],
|
|
|
datasetIndex: index,
|
|
|
- type: 'line',
|
|
|
- symbol: 'circle',
|
|
|
- smooth: true,
|
|
|
+ // type: 'line',
|
|
|
+ // symbol: 'circle',
|
|
|
+ // smooth: true,
|
|
|
+ type: 'bar',
|
|
|
+ barMaxWidth: 30,
|
|
|
yAxisIndex: 1
|
|
|
}
|
|
|
: [
|
|
|
@@ -87,16 +111,11 @@
|
|
|
...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)
|
|
|
- })
|
|
|
+ ].sort((a, b) => a.localeCompare(b))
|
|
|
}
|
|
|
],
|
|
|
yAxis: [
|
|
|
- { type: 'value', boundaryGap: false },
|
|
|
+ { type: 'value', boundaryGap: false, offset: 15 },
|
|
|
{
|
|
|
type: 'value',
|
|
|
boundaryGap: false,
|
|
|
@@ -104,7 +123,8 @@
|
|
|
alignTicks: true,
|
|
|
position: 'right',
|
|
|
name: '降雨量',
|
|
|
- nameLocation: 'start'
|
|
|
+ nameLocation: 'start',
|
|
|
+ offset: 15
|
|
|
}
|
|
|
],
|
|
|
dataZoom: dataset.some(({ source }) => source.length > 100) && [
|
|
|
@@ -112,7 +132,7 @@
|
|
|
{ start: 0, end: 100 }
|
|
|
],
|
|
|
legend: { show: true, type: 'scroll', width: '80%' },
|
|
|
- grid: { top: 45, left: 45, right: 45, bottom: 45, containLabel: true },
|
|
|
+ grid: { top: 45, left: 50, right: 50, bottom: 45, containLabel: true },
|
|
|
toolbox: { show: true, feature: { restore: { show: true }, saveAsImage: { show: true } } },
|
|
|
dataset,
|
|
|
series
|