大屏可视化项目实践
1 如何适配屏幕
1.1 算法
网络异常，图片无法展示
|
- Wp 为页面有效宽度，Hp 为页面有效高度
- 页面左右居中，上下居中，四周留白即可
- 然后在 head 里用 JS 设置 1rem = Wp / 100
// 设备宽度 const clientWidth = document.documentElement.clientWidth // 设备高度 const clientHeight = document.documentElement.clientHeight // 页面宽度 const.pageWidth = clientWidth / clientHeight > 16 / 9 ? clientHeight * (16 / 9) : clientWidth // 页面高度 const pageHeight = pageWidth / (16 / 9) // 让一个rem是有效宽度的1%
1.2 使用 rem
获取设备宽高，并得到页面宽高。
const clientWidth = document.documentElement.clientWidth // 得到设备宽度 const clientHeight = document.documentElement.clientHeight // 得到设备高度 const pageWidth = clientWidth / clientHeight > 16 / 9 ? clientHeight * (16 / 9) : clientHeight; // 定义页面宽度 const pageHeight = pageWidth / (16 / 9) // 定义页面高度 复制代码
设置 1rem = Wp / 100。
const string = `<style>html{font-size: ${pageWidth/100}px}</style>` document.write(string)
用 rem 表达页面宽度。
网络异常，图片无法展示
|
假设某div在设计稿中长100px，设计稿整体宽度2420px。那么该div在页面中长为100 / 1920 * 100rem。
1.3使用 px() 函数
按照上方公式，新建一个px.ts文件，声明全局函数px()并导出。
export const px = (n) => n / 2420 * (window as any).pageWidth;
2 使用echart
2.1 引入
import * as echarts from "echarts";
2.2 写方法
举例：
useEffect(() => { var myChart = echarts.init(divRef.current); myChart.setOption(createEchartOptions({ color: ['#8D70F8', '#33A4FA'], xAxis: {show: false}, yAxis: {show: false}, legend: {show: false}, series: [ { name: '访问来源', type: 'pie', radius: ['75%', '90%'], avoidLabelOverlap: false, label: { show: true, position: 'inside', textStyle: {color: 'white', fontSize: px(20)}, formatter(options) { return options.value * 100 + '%'; } }, labelLine: {show: false}, itemStyle: { borderColor: '#0F113A', borderWidth: px(4) }, data: [ {value: 0.2, name: '女'}, {value: 0.8, name: '男'}, ] } ] })); }, []);
3 使用 grid 布局
Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。
通过上面的例子Grid 布局相关的属性以及值众多，需要记忆的不少，建议可以跟 demo 一起结合起来，边敲代码边理解，再利用一些空闲时间记忆一下。
使用grid布局将页面分成几块。
网络异常，图片无法展示
|
<main> <section className="section1"></section> <section className="section2"></section> <section className="section3"></section> <section className="section4"></section> <section className="section5"></section> </main>
>main { display: grid; grid-template: "box1 box2 box4 box5" 755fr "box3 box3 box4 box5" 363fr / 366fr 361fr 811fr 747fr; grid-column-gap: px(28);//行空隙 grid-row-gap: px(28);//列空隙 >.section1 { grid-area: box1; background: pink; } >.section2 { grid-area: box2; background: lightgrey; } >.section3 { grid-area: box3; background: lightblue; } >.section4 { grid-area: box4; background: lightcyan; } >.section5 { grid-area: box5; background: lightyellow; } }
