管理端开发日记⑦：报表快照与运营指标

1
const activePeriod = ref('day')
2

3
watch(activePeriod, () => loadReport())

1
function applyReportData(data = {}) {
2
  summary.value = normalizeSummary(data.summary)
3
  compare.value = normalizeCompare(data.compare)
4
  platformData.value = normalizePlatform(data.platform)
5
  trendData.value = normalizeTrend(data.trend)
6
  nextTick(renderCharts)
7
}

1
let requestVersion = 0
2

3
async function loadReport() {
4
  const currentVersion = ++requestVersion
5
  const response = await fetchReport(activePeriod.value)
6
  if (currentVersion !== requestVersion) return
7
  applyReportData(response.data)
8
}

1
const charts = []
2

3
function initChart(el, option) {
4
  const chart = echarts.init(el, null, { renderer: 'canvas' })
5
  chart.setOption(option)
6
  charts.push(chart)
7
  return chart
8
}
9

10
function resizeCharts() {
11
  charts.forEach(chart => chart.resize())
12
}

1
itemStyle: {
2
  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
3
    { offset: 0, color: '#4b8cff' },
4
    { offset: 1, color: '#1769e8' }
5
  ]),
6
  borderRadius: [6, 6, 0, 0]
7
}

1
function trendTone(value, lowerIsBetter = false) {
2
  const rising = Number(value) > 0
3
  const positive = lowerIsBetter ? !rising : rising
4
  return positive ? 'positive' : 'negative'
5
}