前期准备

大屏适配公式

需求：已有设计稿，要求在固定比例下适配任意大屏
方案：
image.png
主要是针对页面有效宽度，方可求页面有效高度

适配原理

根据 网页尺寸 计算html的font-size大小

适配一个div

以上是整体适配大屏
以下是举例如何适配一个div：因为要适配任意屏幕，所以不能写像素单位，应使用rem单位
image.png
结论：已知div在设计稿中的尺寸，可得div在页面中的尺寸

结合scss函数使用rem

  1. @function px($n) {
  2.   @return $n / 2420 * 100rem;
  3. }
  1. @import "../shared/_helper";
  2. .home {
  3.   header {
  4.     height: px(101);
  5.     background-size: cover;
  6.   }
  7. }

CSS补充

使用Flex和Grid布局

image.png

flex布局：

思路：
在父元素上加display:flex 和 flex-direction:column;
在子元素上加 flex:1 让子元素高度占满父元素
image.png

grid布局：

适用于一个页面出现“网格状”分布内容的情况，每个格子为一个box分区，而box中可以使用flex布局
思路：
image.png

  • grid-template划分区

    1. main{
    2. display: grid; 
    3. grid-template:
    4. "box1 box2 box4 box5" 755fr
    5. "box3 box3 box4 box5" 363fr / 366fr 361fr 811fr 747fr;
    6. }

    image.png
    上图中第二行和第三行重复bcc可删除其中一行，只需注意高度改为80px，宽度不变

  • grid-column-gap: px(28);用来设置元素列之间的间隔 ，同理，也有grid-row-gap

  • fr单位表示等分
  • grid-area两个概念，一是分区别名，二是row-start / column-start/row-end>/ column-end简写，此项目用于别名
    1. main {
    2. > .section1 {
    3. grid-area: box1;     //box1在main中声明过的分区，此处赋值给section1
    4. display: flex;
    5. flex-direction: column;
    6. justify-content: space-between;
    7.   }
    8. }

box-shadow边框妙用

可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开
box-shadow此处用于边框渐变效果：结合伪类元素，如下图效果所示：
image.png

text-shadow为文字添加阴影，如下图效果所示：
image.png
pointer-events: none 该元素永远不会成为鼠标事件的target

Echart使用

去除图表周围空白的部分

可以通过 grid 属性来控制直角坐标系内绘图网格四周边框位置

  1. grid: {
  2.   x: px(40),
  3.   y: px(40),
  4.   x2: px(40),
  5.   y2: px(40),
  6.   containLabel: true  //grid 区域是否包含坐标轴的刻度标签,默认false不包含，最好包含
  7. },

x轴label过长需换行

补充：
\n是javascript的转义字符将输出一个换行符

是html的标签表示文本另起一行

  1. //方法一，直接使用字符串方法
  2. axisLabel:{
  3. formatter(val){
  4.             if(val.length > 2){
  5.               const reallyVal = val.substring(0,3) +'\n' + val.substring(3,val.length);
  6.               return reallyVal
  7.             }else{
  8.               return val
  9.             }
  10.   ....
  11.   }
  13. //方法二，转数组再转字符串
  14. axisLabel:{
  15. formatter(val){
  16.             if(val.length > 2){
  17.              const array = val.split('')
  18.               array.splice(2,0,'\n');   //注意splice是改变原数组，返回的是 被修改的内容
  19.               return array.join('')
  20.             }else{
  21.               return val
  22.             }
  23.   ....
  24.   }

抽离出公共baseEchartOptions文件

  1. export const baseChartOptions = {
  2.   textStyle: {
  3.     fontSize: px(12),
  4.     color: '#79839E'
  5.   },
  6.   title:{show:false},
  7.   legend:{show:false},
  8.   grid: {
  9.     x: px(40),
  10.     y: px(40),
  11.     x2: px(40),
  12.     y2: px(40),
  13.   },
  15. }
  1. import bseChartOptions from '..'
  2. myChart.setOption({
  3. ...baseChartOptions,
  4. ...
  5. })

柱形图渐变色实现

  1. series: [
  2.         {
  3.           name: '破案排名1',
  4.           type: 'bar',
  5.           data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
  6.           itemStyle: {
  7.             color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
  8.               { offset: 0, color: '#2034f9' },
  9.               { offset: 1, color: '#01a2ff' }
  10.             ])
  11.           },
  12.         },
  13.       {
  14.         name:'xxx',
  15.         ...
  16.       },
  17.         ...
  18.       ]

自定义原生表格

  1. <table>
  3.   <thead>
  4.     <tr>
  5.       <th>年份</th><th>破案数</th><th>抓获嫌疑人</th><th>并串案件</th><th>现勘录入</th>
  6.     </tr>
  7.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td>2015</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td>
  12.     </tr>
  13.     <tr>
  14.       <td>2016</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td>
  15.     </tr>
  16.     <tr>
  17.       <td>2017</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td>
  18.     </tr>
  19.   </tbody>
  21.       </table>

记忆：
thead和tbody中：tr是一行
thead中：th是一列
tbody中：td是一列
合并单元格使用 rowSpan={4}或colSpan={4}

  1. {
  2.   > table {
  3.     margin-top: px(38);
  4.     border-collapse: collapse;
  5.     th, td {
  6.       border: 1px solid #1a3671;
  7.     }
  8.     thead {
  9.       th {
  10.         height: px(70);
  11.         box-shadow: inset 0 0 px(60) 0 #1f3d85;
  12.       }
  13.     }
  14.     tbody {
  15.       td {height: px(50); width: px(84);
  16.         background: #1c2456;
  17.       }
  19.     }
  20.   }
  21.     }

自定义2D地图

补充：

series（系列）是指：一组数值以及他们映射成的图。

“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。

所以，一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。

其中series.type很关键，表示该例是地图还是饼图或者是柱状图，series.data:图表所用数据，实际项目中可以通过http获取数据，再赋值给series.data

步骤：

引入地图数据：可在github下载地图资源，使用json资源的文件，下载本地后放入项目对应文件
chart文件中导入并配置：

  1. //导入地图json数据
  2. import china from '../geo/china.json';
  4. //实例化echarts对象
  5. let myChart = echarts.init(divRef.current);
  7. //加载地图json数据，并注册到echars中
  8. echarts.registerMap('CN', china);
  10. //配置series系列项，举例：
  11. series: [
  12.         {
  13.           type: 'map',
  14.           mapType: 'CN', // 自定义扩展图表类型
  15.           data: [
  16.             {name: '甘肃省', value: 1},
  17.           ],
  18.           label: {show: false, color: 'white'},
  19.           itemStyle: {
  20.             areaColor: '#010D3D',
  21.             color: colors['甘肃省'],
  22.             shadowColor: '#008cd5',
  23.             shadowBlur: 7,
  24.             // opacity:0.95,
  25.             // shadowOffsetX:-1,
  26.             // shadowOffsetY:-1,
  27.             borderWidth: 1,//设置外层边框
  28.             borderColor:'#069cea',
  29.             borderType:'solid',
  30.             emphasis: {
  31.               label: {color: 'white'},
  32.               areaColor: '#5470C6',
  33.             },
  34.           }
  35.         },
  36. ...
  37. ]

数据data的处理

series-xxx.data.value：toFixed() 方法使用，能够将一个数转为指定位数的小数，返回的是这个位数的小数的字符串

  1. 55.99.toFixed(0)
  2. // "56",当为0时，代表取整，会四舍五入，不传则默认为0
  3. 23.56.toFixed(1)
  4. // "23.6",小数点会四舍五入

vite打包部署path修改

vite打包的前端项目默认只能通过根目录访问项目，比如http://localost:3000/，如果加上一个路径在进行访问会导致资源文件访问404

  1. // 设置vite.config.js
  2. export default defineConfig({
  3.   base: './'
  4. })

这样将打包的项目放置在任意目录下都可以正常，当然也可以设置指定的访问路径，比如
通过[http://localost:3000/test](http://localost:3000/test)访问