前端数据可视化实现

最近需要做可视化数据展示界面，写一点心得。

1 git上找一些样例，进行修改。

2 技术采用 vue+ datav+ echart。

3 技术难点：屏幕自适应。

和平常写web界面还是有区别的，毕竟定好屏幕，是不能再上下拖动的了。

技术要点是，js里监听页面resize，先将最外层div定位在距离左上50%的位置；然后按当前屏幕的宽高，再动画回到左上位置；基础宽高变了 ，他就得拿到最新的宽高，去把外层div的大小进行按比例缩放；缩放完成后，再按50%，50%动画回左上位置。

calcRate () {
  const appRef = this.$refs["appRef"]
  if (!appRef) return 
  // 当前宽高比
  const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
  if (appRef) {
    if (currentRate > baseProportion) {
      // 表示更宽
      scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
      scale.height = (window.innerHeight / baseHeight).toFixed(5)
      appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
    } else {
      // 表示更高
      scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
      scale.width = (window.innerWidth / baseWidth).toFixed(5)
      appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
    }
  }
},
resize () {
  clearTimeout(this.drawTiming)
  this.drawTiming = setTimeout(() => {
    this.calcRate()
  }, 200)
}

4 我找的demo是这样的，自己做出来的就不展示了，哈哈。