大屏可视化

项目切图

如何适配屏幕

• 算法

1. Wp 为页面有效宽度，Hp 为页面有效高度
2. 页面左右居中，上下居中，四周留白即可
3. 然后在 head 里用 JS 设置 1rem = Wp / 100

像素不能用怎么办

• 用 rem

1. 假设某 div 在设计稿中长 100px，设计稿宽度 1920px，
2. 那么该 div 在页面中长为 100/1920 X 100rem
3. 最后可以写一个 px() 函数来计算 100px 对应的 rem

      const clientWidth = document.documentElement.clientWidth
      const clientHeight = document.documentElement.clientHeight
      window.pageWidth = clientWidth / clientHeight > 16 / 9 ? clientHeight * (16 / 9) : clientWidth
      const pageHeight = pageWidth / (16 / 9)
      const string = `<style>
          html{
            font-size: ${pageWidth / 100}px
          }
        </style>`
      document.write(string)

// px 函数
export const px = (n) => (n / 2420) * (window as any).pageWidth

如何做边框三层渐变效果

section {
      border: 1px solid #0764bc;
      border-radius: 4px;
      position: relative;
      box-shadow: 0 0 2px 0 #0e325f, inset 0 0 2px 0 #0e325f;
      background: #0c1139;
      &::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        border-radius: 4px;
        box-shadow: 17px 0 0 -16px #0e325f,
                    -17px 0 0 -16px #0e325f, 
                    0 17px 0 -16px #0e325f, 
                    0 -17px 0 -16px #0e325f,
                    9px 0 0 -8px #0d4483, 
                    -9px 0 0 -8px #0d4483, 
                    0 9px 0 -8px #0d4483, 
                    0 -9px 0 -8px #0d4483;
      }
    }

用到的知识点

布局方法

整体用 grid 布局，内部用 flex 布局

echarts

第一个 chart

import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
import { createEchartsOptions } from '../shared/create-echarts-options'

export const Chart1 = () => {
  const divRef = useRef(null)
  const myChart = useRef(null)
  const data = [
    { name: '关城区', number: 10 },
    { name: '关城区', number: 20 },
    { name: '关城区', number: 26 },
    { name: '关城区', number: 31 },
    { name: '关城区', number: 11 },
    { name: '关城区', number: 15 },
    { name: '关城区', number: 19 },
    { name: '关城区', number: 10 },
    { name: '关城区', number: 6 },
  ]
  const x = (data) => {
    myChart.current.setOption(
      createEchartsOptions({
        xAxis: {
          data: data.map((i) => i.name),
          axisTick: { show: false },
          axisLine: {
            lineStyle: { color: '#083B70' },
          },
          axisLabel: {
            formatter(val) {
              if (val.length > 2) {
                const array = val.split('')
                array.splice(2, 0, '\n')
                return array.join('')
              } else {
                return val
              }
            },
          },
        },
        yAxis: {
          splitLine: { show: false },
          axisLine: {
            show: true,
            lineStyle: { color: '#083B70' },
          },
        },
        series: [
          {
            type: 'bar',
            data: data.map((i) => i.number),
          },
        ],
      })
    )
  }
  useEffect(() => {
    setInterval(() => {
      const newData = [
        { name: '关城区', number: Math.random() * 10 },
        { name: '七里河区', number: Math.random() * 10 },
        { name: '西固区', number: Math.random() * 10 },
        { name: '安宁区', number: Math.random() * 10 },
        { name: '红古区', number: Math.random() * 10 },
        { name: '永登区', number: Math.random() * 10 },
        { name: '皋兰区', number: Math.random() * 10 },
        { name: '榆中区', number: Math.random() * 10 },
        { name: '兰州新区', number: Math.random() * 10 },
      ]
      x(newData)
    }, 1000)
  }, [])
  useEffect(() => {
    myChart.current = echarts.init(divRef.current)
    x(data)
  }, [])
  return (
    <div className="bordered 管辖统计">
      <h2>案发派出所管辖统计</h2>
      <div ref={divRef} className="chart"></div>
    </div>
  )
}

优点：开发效率高

缺点：可定制性一般

实时更新数据

重新设置 echarts 的 options 即可

问题

问题 1

解决方法：在 tsconifg.json 文件中加入

{
  "compilerOptions": {
    "lib": ["dom"]
  }
}