简介

跟着大数据的蓬勃发展，各行业对数据价值的注重程度添加。大屏可视化也已经在各个企业中应用。本节介绍怎么从 0 到 1 完成一个简略大屏项目。

建立项目

  • 快速建立项目，运用脚手架create-react-app创建。
  • 建立项目，具体流程 根底-建立react项目教程。
npx create-react-app 项目名
  • 进入项目根目录，添加可视化东西。
  • DataV，提供了许多边框和一些大屏需求的组件。
npm i @jiaminghi/data-view-react
  • echarts，图表制作东西，你能想到的它基本都有。
npm i echarts

从0到1完成大屏可视化

  • 一个简略的项目就建立完成了。这个示例项目中我把多余的文件都删除了。

大屏适配

  • 大屏项目需求在不同分辨率下进行展现，所以在开发前就需求承认选用什么办法进行适配。
  • 这儿首要介绍 3、4两种办法，常用办法：
  1. px 转 vhvw 或 % 比。
  • 依据规划图的 px 尺度，把宽高分层100份。在开发时，一切的长度单位都按这份份额来编写。
  1. 媒体查询 @media。
  • 依据规划图，在不同分辨率下写出对应的款式。需求写大量的款式，定制化要求不多就不要考虑。
@media only screen and (max-width: 1000px) {
  .div-class { width: 720px; } 
}
@media only screen and (max-width: 1920px) { 
  .div-class { width: 1200px; } 
}
  1. px 转 rem。
  • CSS中规定 1rem 的大小便是根元素<html>的font-size的值。
  • 当运用了其他组件，其内部设置的都是px。需求在添加一个依据font-size的值核算当前份额下设置的长度转换为对应的px值。
  • 监听onresize办法，实时核算当前分辨率下font-size的值。开发时全程运用rem布局。
// 核算 fontSize
function setFontSize() {
  let designWidth = 1920 
  let designHeight = 1080 
  var fontSize =
    document.documentElement.clientWidth / document.documentElement.clientHeight 
    < designWidth / designHeight
      ? (document.documentElement.clientWidth / designWidth) * 100
      : (document.documentElement.clientHeight / designHeight) * 100
  document.querySelector('html').style.fontSize = fontSize + 'px'
}
// 防抖 在必定时间内 只执行最终一次
const debounce = (fn, delay) => {
  let timer
  return function () {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn()
    }, delay)
  }
}

.App {
  height: 100vh;
  width: 100vw;
  font-size: 16px;
}
.box-x {
  width: 4rem;
  height: 2rem;
}
  • 运用。
  useEffect(() => {
    setFontSize()
    const cancalDebounce = debounce(setFontSize, 100)
    // 监听
    window.addEventListener('resize', cancalDebounce)
    return () => {
      // 移除
      window.removeEventListener('resize', cancalDebounce)
    }
  }, [])

从0到1完成大屏可视化

  1. transform特点的 scale 办法。
  • 核算缩放比，对整个元素进行缩放。
// 缩放比
function scale() {
  let designWidth = 1920
  let designHeight = 1080
  let scale =
    document.documentElement.clientWidth / document.documentElement.clientHeight 
    < designWidth / designHeight
      ? document.documentElement.clientWidth / designWidth
      : document.documentElement.clientHeight / designHeight
  return scale
}

.App {
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
}
.box-x {
  width: 400px;
  height: 200px;
}
  • 运用
  const [state, setState] = useState({ scale: 1 })
  useEffect(() => {
    setState({
      scale: scale()
    })
    window.onresize = function () {
      setState({
        scale: scale()
      })
    }
    return () => {
      // 铲除
      window.onresize = null
    }
  }, [])

<div
  className="App"
  style={{
    transform: `scale(${state.scale}) translate(-50%,-50%)`
  }}
>...</div>

从0到1完成大屏可视化

小结

适配计划除了本节介绍的还有有许多。现在没有完美的计划，或多或少都有一点问题。比如等比缩放，当份额不对时会呈现留白。百分比核算，当份额不对时会呈现拉伸。开发中都是依据客户需求进行一步步优化，以求达到完美。

布局

  • 在拿到规划图后，通过规划图的布局来对页面进行层级划分，一般状况都是两层，布景层、图表层。当需求运用地图时，布景层就变成地图层。
  • 在开发时，每个图表都应该是一个独自的组件。这样能削减代码的耦合和多人开发时的抵触。
  • 这儿运用的是第4种适配计划，由于没有规划图就随意开发了。

  • 运用等比缩放计划，一切布局按规划稿开发就行。
  • 需求留意CSS命名需求必定规矩，避免不同组件中的款式抵触。
// App.js
import { useState, useEffect } from 'react'
import { scale } from './util'
import { Box1, Box2, Box3, Box4, Box5, Head } from './content'
import './App.css'
function App() {
  const [state, setState] = useState({ scale: 1 })
  useEffect(() => {
    setState({
      scale: scale()
    })
    window.onresize = function () {
      setState({
        scale: scale()
      })
    }
    return () => {
      // 铲除
      window.onresize = null
    }
  }, [])
  return (
    <div
      className="App"
      style={{
        transform: `scale(${state.scale}) translate(-50%,-50%)`
      }}
    >
      <Head></Head>
      <Box1 />
      <Box2 />
      <Box3 />
      <Box4 />
      <Box5 />
    </div>
  )
}
export default App

从0到1完成大屏可视化

  • 代码比较多，这儿就展现下目录。
  • 图表层的内容，都是存放在content目录下的。

制作图表

  • 可视化开发东西许多，挑选合适自己项目的就行了。
  • 本节选用的是echarts图表库，先简略的介绍一下它。

运用echarts

  • echarts 官网
  • 可随意切换 Canvas、SVG 两种烘托办法。
  • 企业中常用的图表都支持。
  • 是高级图表库，通过装备信息制作图表。
  • 能配合百度地图进行可视化开发。
// content/Box1/Box.jsx
import { useEffect } from 'react'
import { BorderBox1 } from '@jiaminghi/data-view-react'
import * as echarts from 'echarts'
import './box.css'
function Box() {
  useEffect(() => {
    const chartDom = document.getElementById('box1-main')
    const myChart = echarts.init(chartDom)
    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center',
        textStyle: {
          color: '#fff'
        }
      },
      series: [
        {
          name: '职位',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: '后端' },
            { value: 735, name: '前端' },
            { value: 580, name: 'IOS' },
            { value: 484, name: '安卓' },
            { value: 300, name: '大数据' }
          ]
        }
      ]
    }
    option && myChart.setOption(option)
  }, [])
  return (
    <div className="box-1">
      <BorderBox1>
        <div id="box1-main" style={{ width: '590px', height: '500px' }}></div>
      </BorderBox1>
    </div>
  )
}
export default Box
  • echarts的运用就这么简略，装备好option特点就会主动制作图表。
  • 想深入了解的多去看看示例，echarts 示例。

从0到1完成大屏可视化

  • 在每一个组件中完善图表，一个简略的大屏可视化项目就完成了。

总结

大屏可视化项目最重要的是尺度适配，后续出问题多的都是适配没做好。当然做的时分也需求仔细，关注规划搞的色彩、尺度、图表款式等。一些小的差异在放大后也会影响美观。

  • 代码地址

我正在参与技术社区创作者签约计划招募活动，点击链接报名投稿。