实习第四周，第五周

这周主要遇到的问题是 echarts图 在vue中的使用  后端发过来的是Excel文件改怎么处理

用echarts，先构建一个组件专门来构建图表DetailCharts.vue，在别的组件引用DetailCharts.vue,所有传值很关键

          <DetailCharts :record="props.row" :search-params="searchParams" />
​

这里的record是table里每一行的数据，searchParams为请求参数

后端以Excel格式发给我 将数据转换为blob（文件流）

import request from '@/utils/request'
import umiRequest from 'umi-request'
import { downloadResponse } from '@/utils'
​
// 下载
export async function downLoad(params) {
  const response = await umiRequest(
    '/callEvolution/appAnalysis/exportServerMetricList',
    {
      method: 'POST',
      data: params,
      getResponse: true
    }
  )
  return await downloadResponse(response.response)
}
​
​
'@/utils'
/** 下载后端返回的文件流 */
export async function downloadResponse(response) {
  try {
    const fileName = getFileNameFromResponse(response)
    const result = await response.blob()
    const blob = new Blob([result])
    downloadBlob(blob, fileName)
  } catch (error) {
    console.log(error)
  }
}
export function downloadBlob(blob, fileName) {
  const fileURL = window.URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = fileURL
  a.target = '_blank'
  a.style.display = 'none'
  document.body.appendChild(a)
  a.download = fileName
  a.click()
  window.URL.revokeObjectURL(fileURL)
  document.body.removeChild(a)
}
​
export function getFileNameFromResponse(response) {
  const fileNameEncode = response.headers
    .get('content-disposition')
    .split('filename=')[1]
  const fileName = decodeURIComponent(fileNameEncode)
  return fileName
}
​

学习AntV G6