#一、安装echarts

npm i echart -s

#二、排版

宽度采用百分比、高度使用rem
大屏参考实例： https://yyhsong.github.io/iDataV/

#三、rem适配

由于只需要在大屏页面使用rem适配，其它页面不需要，所以采用单页面生效的方式实现
1、utils文件夹下存放flexible.js
2、在大屏页中直接引用
	import "@/utils/flexible";
	引用成功后body标签会自动加上font-size的大小，即为1rem的大小
3、vscode编辑器安装工具：px to rem & rpx & vw (cssrem)
      并扩展配置→Root Font Size 设置为96 （分为20份的情况下是96）
4、编写css时候直接写px，会提示转化后的rem

#四、echarts图表随浏览器大小自适应

由于我实现的方式是，每一个图表即为一个小组件，则每个组件里可采用以下方式实现自适应大小：
onMounted(() => {
  getChartData(); //获取数据
  window.addEventListener("resize", resetChart);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", resetChart);
});
const resetChart = debounce(() => { //debounce为防抖函数
  if (myChart) {
    myChart.resize();
  }
}, 200);

#五、echarts使用rem字体

1、在utils文件夹下建echartPxToRem.js文件
2、在使用到echarts的组件上引入
      import { fontChart } from "@/utils/echartPxToRem";
3、使用：在修改字体大小的位置用上 fontChart方法
      如：fontSize: fontChart(14),
4、最后需要在window.addEventListener下再执行初始化echarts图标的自定义方法

源码图示
1、引入

2、使用

3、resize的时候重新调用自己写的渲染方法


#五、flexible.js和echartPxToRem.js文件下载地址
链接: js文件下载

#六、echarts社区，比官方实例更多例子
链接: echarts社区

#七、参考链接
链接: vue中使用大屏适配rem