介绍

本文主要是对近期以及之前在不同场景下使用ECharts或其他相关插件实现图表功能的回顾总结，记录下当时遇到的问题，加强自身的记忆并且希望对同样遇到该问题的jy们有所帮助或者启迪。

本次介绍的场景，主要分为三种情况：

1. react中使用 Echarts
2. 微信小程序中使用 ECharts
3. uniapp 项目使用Echarts

1、react中使用 ECharts

近期在重构整理手上维护了两年的陈年项目，本周主要处理折线图数据展示，因此特意记录。
使用技术以及版本

1. react V18.0.25
2. echarts 5.4.1 在项目中按照 Apache ECharts 官方提供的demo，进行模仿即可；在本次重构的过程中采用的 react + ts的方式，顺便了解熟悉一下 ts 的用法。
   按照示例的 完整代码，通过按需引入的方式来进行使用；
   在实际项目中，主要是针对通过网络请求到的数据，转为 ECharts 所需的数据格式；
   第一步：引入官方 demo，查看是否能在项目中正常显示
   第二步：将 option 中的每一项数据，结合自身项目所请求到的数据，封装成不同的方法，转换为 ECharts 所需的数据格式
   第三步：组合当前数据，渲染 option

** 注意**：
1、项目中针对需要渲染不同对象的曲线图，此时在绘制前要先清空之前的，采用 myChart.clear();
2、绘制出的 charts 需要根据窗口动态响应，此时需要使用myChart.resize(); 方法，为了避免频繁触发，建议搭配 防抖方法使用。

2、微信小程序实现图表功能，echarts-for-weixin 的使用

微信小程序中要实现 图表 功能，主要注意的是小程序大小的限制： 目前小程序分包大小有以下限制：

• 整个小程序所有分包大小不超过 20M
• 单个分包/主包大小不能超过 2M

优点：对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。
因此，当我们在项目初始的时候，如果当前小程序功能多，复杂；那么我们就要考虑是否需要采取分包加载策略；
好了，言归正传，回到小程序中如何实现图表功能呢！
令人激动的是，官方提供了相关的解决方案；在官方文档 - 应用篇 - 跨平台方案 - 微信小程序 中，提供了对应的插件“echarts-for-weixin” 通过这种方式可以在微信小程序中进行使用。
为了避免下载下来的资源过大，影响小程序的体积，因此我们可以选择“自定义构建” 方式选择我们在项目中需要用到的功能，剔除不适用的部分，减小包体积大小，将下载下来的资源包 到主包资源中，这样我们可以在分包内部使用。
具体详细使用方式，大家可以参考 echarts-for-weixin

3、uniapp 项目中实现图表功能

因为个人习惯，在开发微信小程序以及小型的H5页面的时候喜欢用 uniapp 进行开发，搭配 uView 开发起来感觉很是顺畅、快捷。
通过 uniapp 开发小程序，如果要实现 图表功能，也可以选择合适的插件，现在主流的图表绘制工具就是 ECharts，官方针对 微信小程序提供了 echarts-for-weixin；然而回到 uniapp 项目中，我们可以选择 echarts-wx-uniapp 进行功能实现。
echarts-wx-uniapp 采用的是 Echarts 配置方式，能够快速开发图表，满足项目需求；使用方式 类似 echarts-for-weixin 也可以进行在线定制 具体的使用情况，可以查看相关的文档：github.com/yah0130/ech…

总结

本文主要是记录一下以往项目中实现图表采取的方法，在不同的环境、技术选型中，需要搭配不同的工具、方法，去实现我们所需要的功能，多总结，多记录；
愿你我在技术的路上越走越远！与君共勉！