${params.marker || ''} ${params.seriesName} ${ params.value === -1 || !params.value ? '-' : params.value }

`; }; // 补全日期 const getVirtulData = (data = {}, format) => { const today = new Date(); const dayTime = 3600 * 24 * 1000; const thatday = today - dayTime * 365; const result = JSON.parse(JSON.stringify(data)); for (let time = thatday; time < today; time += dayTime) { const key = format(new Date(time), 'Y-m-d'); if (!result[key]) result[key] = { aqi: -1, aqidate: key, data_type: 'history', primary: '', }; } return result; }; const formatDate = (dateObj = null, fmt = 'Y-m-d', empty = '-') => { const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']; const months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']; const lz = (n) => { const num = n.toString(); if (num.length === 1) { return `0${num}`; } return num; }; let t = dateObj; // typeof dateObj !== 'string'是为了判断万一传过来的是y-m-d h:i:s格式，会直接执行最后一个else if，格式化为日期格式 if (dateObj === null || (Number.isNaN(dateObj) && typeof dateObj !== 'string')) { if (typeof empty === 'string') { return empty; } t = new Date(); } else if (typeof dateObj === 'number') { if (dateObj === 0) { return empty; } t = new Date(dateObj * 1000); } else if (typeof dateObj === 'string') { if (parseInt(dateObj) == dateObj) { // eslint-disable-line t = new Date(dateObj * 1000); } else { if (dateObj.includes('T')) { t = new Date(dateObj); } else { t = new Date(dateObj.replace(/-/g, '/')); } } } if (!(t instanceof Date)) { throw new Error('被处理的只能是Date对象'); } if (Number.isNaN(t.getTime())) { if (typeof dateObj === 'string') { return dateObj; } throw new Error('非法日期对象'); } const date = t.getDate(); const year = t.getFullYear(); const hours = t.getHours(); const day = t.getDay(); const dayName = days[day]; const min = t.getMinutes(); const sec = t.getSeconds(); const month = t.getMonth(); const am = hours < 12 ? 'am' : 'pm'; const ms = t.getTime() % 1000; let hours12 = hours % 12; hours12 = hours12 || 12; const fd = new Date(t.getFullYear(), 0, 1); const dayOfYear = Math.round((t - fd) / 8.64e7); const weekNum = Math.ceil(((t - fd) / 8.64e7 + fd.getDay() - 1) / 7); const a = { d: lz(date), D: dayName.substr(0, 3), l: dayName, w: day, j: date, z: dayOfYear, W: weekNum, M: months[month].substr(0, 3), F: months[month], Y: year, a: am, A: am.toUpperCase(), y: `${year}`.substr(2, 2), c: t.toISOString(), m: lz(month + 1), U: Math.round(t / 1000), g: hours12, G: lz(hours12), h: hours, H: lz(hours), i: lz(min), s: lz(sec), e: ms, }; const v = []; Object.keys(a).forEach((k) => { v.push(`(\\\\)?${k}`); }); return fmt.replace(new RegExp(v.join('|'), 'g'), (k) => { if (a[k]) { return a[k]; } return k.replace('\\', ''); }); }; $.getJSON(uploadedDataURL, (apiData) => { const data = getVirtulData(apiData.history, formatDate); const titleText = '最近12个月空气质量分布'; const visualMapPieces = AQI_LEVELS.map(({ min, max, color }) => ({ min, max, color })); const { seriesDatas } = transformData(data, true); const getPrimary = (key) => getPrimaryLabel((data[key] || {}).primary) || ''; const myOption = { title: { text: titleText, left: 'center', }, tooltip: { position: 'top', formatter: (params) => { const primary = getPrimary(params.value[0]); return `${params.value[0]}
${getTooltipRow({ ...params, value: params.value[1] })}${getTooltipRow({ seriesName: '首要污染物', value: primary, })}`; }, }, legend: { show: true, icon: 'circle', bottom: 0, }, calendar: { // range: [startDay, endDay], range: new Date().getFullYear(), top: 60, left: 60, right: 15, bottom: 40, height: 150, cellSize: [14, 14], itemStyle: { borderWidth: 4, borderColor: '#fff', }, yearLabel: { show: false, }, splitLine: { show: false, }, monthLabel: { nameMap: 'cn', }, dayLabel: { nameMap: ['日', '一', '二', '三', '四', '五', '六'], firstDay: 1, left: 10, }, }, visualMap: { show: false, type: 'piecewise', pieces: [{ max: 0, min: -10, color: '#efefef', name: '空值' }, ...visualMapPieces], }, series: seriesDatas.map(({ name, data, color }) => ({ type: 'heatmap', coordinateSystem: 'calendar', name, data, color, label: { show: true, fontSize: 10, formatter: (params) => getPrimary(params.value[0]), }, })), }; myChart.setOption(myOption); });