iofod - Echart 图表全支持
前言
Echart 几乎是 Apache 基金会中最为流行的开源项目，也是 Web 可视化领域不可忽视的一座大山，iofod 全场景低码平台近期在处理数据可视化相关的组件资产，在众多 Web 图表库中，我们毫不犹豫选择了 Echart 作为平台在数据可视化领域的拓展库。
特性
前一篇文章《导入任意前端资产》已经预告过一次，我们经过约一周的爆肝开发测试，完成了 Echart Kit 拓展，当前 100% 可用，支持的特性如下：
支持 Echart 所有类型的图表
所有图表一键拖拽使用
多主题与自定义功能
Echart 的跨平台支持
基本使用
使用 Echart Kit 拓展前，需要先在拓展管理面板安装拓展，可在 iofod 编辑器里点击超级菜单里的【拓展管理】按钮唤起拓展管理面板，点击【添加拓展】，搜索 Echart 关键词
点击搜索结果进去，即可看到拓展详情界面，点击【安装拓展】，
关闭拓展管理面板，可以发现 Echart Kit 已经添加到右下角的拓展区里。
点击开启 Echart Kit 拓展，直接拖拽拓展内的组件到可视化编辑区，即可实时添加应用。
图表功能的实现是根据 iofod 的 Exterior 组件配合 Echarts 实现的，因此一个图表相当于一个外部组件，但这个外部组件的 entry 资源是指向内部公共代码的，也就是说，你添加完成图表后，打开代码面板，可以看到刚添加的图表的入口文件内容已经自动生成了：
图表的数据以及配置可以在代码里修改，你甚至可以通过 SDK 与 iofod 的常规组件交互。
图表主题
Echarts 内置了暗黑和明亮两套主题，添加图表前可以在顶部设置主题类型，之后添加的图表就会应用你设定的主题。
除了默认的主题，想使用自定义主题怎么办？我们需要把主题类型选为自定义，接下来的添加到项目的图表所应用的主题都为自定义。需要注意的是，在生成自定义主题配置文件前，自定义主题的图表是不生效的，那么我们来生成一个 :)
主题定制
我们把拓展切换到主题栏，官方提供了多套风格的主题，可以选择其中一个作为你的自定义主题模板，通常你可以直接使用官方的模板，也可以在官方的模板上微调
选中模板后，点击应用自定义主题，即可添加主题模板到我们的代码面板，作为自定义主题类图表的依赖。
选择的模板都是直接生成覆盖 /echart/theme/custom 文件，直接修改文件的配置即可调整生成的主题。我们先设定主题类型为自定义，接着添加一个基础平滑折线图到可视化编辑区，可以发现后续添加的自定义图表的主题都是应用了我们配置的主题样式：
细心的同学可以发现自定义主题是通过调用刚才的配置文件来应用主题的，也就是说，你可以定义 custom 字段为别的命名空间，让应用支持多套自定义主题，但一般情况下，我们建议一个应用内，主题最好是统一的，这样能给用户了统一的交互体验。
图表封装
如果你是工具库或 iofod 拓展的开发者，希望封装自己的图表组件，那么可以通过 SDK 把图表配置暴露出去，用户通过模型面板去使用你的图表，比如这里我们图表的配置参数来源于用户在模型面板的配置：
用户直接修改你提供的配置参数即可调整图表，使封装的图表适用于更多场景。
QA
修改图表主题或者其他配置后，图表没实时更新？
出于性能原因，我们关闭了这个特性，我们为每个图表内置了模型变量 render，可以切换它来刷新图表：
Echart 不是只支持 Web 吗，跨平台是如何实现的？
外部组件与原子组件差异化最大的地方在于跨平台性，而 Echart Kit 提供的图表都基于外部组件，我们借助 Flutter 的 webview 插件让 Echart 图表组件支持跨平台运行，社区也有类似的实现：flutter_echarts。
小程序支持吗？
iofod 团队暂时无支持计划。如果只考虑微信小程序，可以参考官方推荐的做法： 在微信小程序中使用 ECharts。小程序我们不建议使用 Echart，因为有包体积的限制，可以选择其他替代品，如 uCharts。
结语
新一代大前端利器 iofod 在 8 月份开放公测，借助原子化组件的特性，我们得以构建极富表现力的跨全平台应用。我们正在积极完善社区资产，利用外部组件这一特性，我们补充了 300 多个图表组件，消灭了 iofod 在数据可视化上的空白，Echart Kit 可以说是该背景下的最佳实践，希望大家多多支持~
如果使用过程有任何问题，可以公众号搜索【iofod】或【数字围猎】，点【联系我们】可在线提问，或者添加小助手微信：zxu1002- 进群交流。
相关链接：
还未添加个人签名 2022.06.24 加入
还未添加个人简介
评论