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

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

const px = (n) => n / 设计稿宽度 * 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: '男'},
                ]
            }
        ]
    }));
}, []);