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