随着国家近来几次重要会议开展以及落地。企业转型及可视化布控迎来热潮。所以一款能效力于管理层——运筹帷幄、省力于运维层——降低维护成本的可视化编辑器是很有必要的。关键在于，它很轻便。
给大家展示一下最近一个竣工项目的效果图：
该项目实现了企业核心指标的实时观测，以及整体布控。另外其还易于上手。并且是由编辑器与3D（数字孪生理念）联合完成。那么话不多说，言归正传。我将站在开发者角度，以项目为原型。通过系列文章，带领大家了解这款编辑器。**
本篇主旨: 数据源配置
编辑器针对不同主题设计了三个数据源配置
1、特定业务数据
2、表格数据
3、图表数据
对于数据源的配置。只需开发者了解基本的Ajax请求以及数据解析即可。
特定业务数据
我们根据设计图绘制好基本区域后，绑定数据对象。再通过数组选匹配对应关系即可完成数据驱动。
如下图——绘图
绑定数据对象
数据源配置
最终效果图
如上图中的数据源配置可见，有如下配置：
接口描述，接口地址，刷新时间，数据解析，关联字段
大大的增强了前端配置的灵活性。
核心代码如下:
1 start() { 2 // 获取接口配置 3 const dataPlans = this._network.getDataPlans() 4 const timer = this._timer 5 dataPlans.forEach(async (dataPlan, index) => { 6 if (dataPlan.type !== "http") { 7 return 8 } 9 // 获取数据 10 await this.invokeData(dataPlan) 11 // 数据刷新 12 timer[index] = setInterval(async () => { 13 await this.invokeData(dataPlan) 14 }, dataPlan.refreshTime) 15 }) 16 }
以上为数据获取刷新核心代码，此处不做过多描述，代码层面敬请期待后续原理系列文章。
表格数据
在属性面板中配置（配置详情在属性面版中，原理同数据源配置）
此处强调三点
1、表头配置
2、CSS样式配置
3、联动功能
表头配置
1 标题配置对应数据的属性、标题栏等
CSS样式配置
1 使用原生写法，确保有效性。
联动功能通过定义事件派发或事件监听完成
由于截图场景下，此表格无联动功能，此处暂不予以效果暂时。后期源码部分会展示联动效果。
最终效果图
图表数据
在属性面板中配置（配置详情在属性面版中，原理同数据源配置）
此处重点是，属性面板提供了常用图表配置。
JSON面板配置
更强大的是完美对接echats的options配置。实现真正的无缝对接。
如果已有现成的图表配置，直接移植到项目中即可。
最终效果图
如你所见，参考项目截图，通过上面的了解。在资源完备的情况下。开发者的任务可快速完成。如你所见，学习曲线非常平滑。本篇文章分享到此结束, 如果有兴趣，请关注后续分享文章。
强烈声明: 本文旨在分享成熟，轻便的可视化编辑器。
