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