Echarts（自定义）控件简介
DWF表单定制功能提供了基础的可视化组件，但是当遇到高级可视化的需求时，使用普通可视化控件就难以完成任务了。
...
利用自定义控件可以基于DWF提供的restful api查询数据，然后展示丰富多彩的形式，如下图所示：
图- 自定义可视化控件示例
基本概念
在介绍自定义控件的使用方法之前，先了解一些基本概念，涉及可视化这件事可能有3件事情，第一、可视化的数据来自哪里，第二、如何绘制出来，第三、怎么把数据和可视化编排在一起，其中：
...
第三、最后Echart和数据的结合将在自定义控件内完成。
下面介绍一些基本概念：
Apache Echarts
在了解自定义控件的使用之前，先介绍一下开源项目—Apache Echarts项目，该项目是由百度主导贡献到Apache开源社区基金会的一个项目，是一个专门的免费可视化组件库，下面是一些Echarts的示例：
...
如果希望了解Echarts可以实现的可视化效果可以去官方网站：https://echarts.apache.org/examples/zh/index.html，在那里你可以看到丰富的可视化元素。
自定义控件和Echarts实例
在DWF表单中拖入一个自定义控件就可以在上面创建一个 echarts 实例，打开自定义控件的编辑开关，就可以编辑Echart的配置。
...
图-Echart实例和配置的关系，来源：https://echarts.apache.org/zh/tutorial.html
系列（series）
在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。
...
图-系列和可视化之间的关系，来源：https://echarts.apache.org/zh/tutorial.html
用 option 对象描述图表
上面已经出现了 option 这个概念。在自定义控件中打开编辑开关会弹出一个脚本编辑框，在这里使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。
...
图-拖入自定义控件，打开编辑
图-设置Echart配置，即：option
如何使用自定义控件
接下来通过几个案例介绍自定义控件的使用，在介绍案例的同时我们将介绍一些DWF自带的restful api的用法用于获取数据。
注：下面将要介绍的例子是基于本教程使用的设备管理系统中的数据实现的，所以在进一步讨论之前，如果是从空白的DWF起步，需要将之前教程中提到的模型包导入DWF实例中。
例1：基本用法
首先，在表单中拖入一个自定义控件，看看如何设置一个基本的饼状图，形式如下：
...
接下来的例子将展示如何将DWF中的数据和自定义控件联系在一起。
例2：用DWF中的数据初始化自定义控件
接下来，做一个稍微有趣一点的例子，用热度图展示各地开工数据，先看一下效果，如下图所示。
图-全国开工热度可视化
热度数据表示
全国开工热度显示使用了，热度图案例：https://echarts.apache.org/examples/zh/editor.html?c=heatmap-bmap
...
那么问题来了，这个二维数组如何获得呢？这就涉及到DWF的SDK了：
调用DWF的restful api
在 DWF默认提供了一系列restful api，如果打开DWF建模工具，点击右上角admin按钮可以看到api说明页面。
...
很显然，这个结果是一个一维数组，并不能直接输出到Echart进行处理，因此，需要在查出对象的基础上对齐进行转换。
数组的变换
实现数组转换可以利用javascript的映射函数完成，对于javascript数组如果希望将元素逐个变换为另外的形式，那么可以使用映射函数map实现，其接受一段程序要求这段程序返回一个元素，map函数会将这个返回值组成另一个数组，返回。
...
至此，points可以直接作为输入作为系列的data属性的取值用于可视化。
设置配置项
最后，为了把数据输入到自定义控件，需要设置正确的配置项，在此我们直接拷贝了Echart热度图的配置项（option）的设定。
...
关于热度图的具体使用，可以进一步参考：https://echarts.apache.org/zh/option.html#series-heatmap.type
例3：产品结构树形结构展示
在热力图的例子中，读者进一步接触了DWF提供的restful api，接下来，在使用一个高级的数据访问api：树形结构查询。
...
图-在一幅图中显示搅拌车产品结构
下面看看如何实现。
Echart数据格式
首先，到Echart官方网站上看看树形结构信息的表现方式：https://echarts.apache.org/examples/zh/editor.html?c=tree-polyline
...
可以看到，节点的格式很简单，每一个节点有name和一个可选的value属性，一个节点的子节点用名字为children的数组表示，子节点的格式又是重复name, value, children，如此往复。
调用DWF restful api
搞清楚可视化需要的数据结构以后，看看DWF的restful api，在dwf中关联类对象上也存在一个tree的接口，其返回数据格式基本和Echarts树形结构要求的格式相同。
...
| 代码块 | ||
|---|---|---|
| ||
let param = {
"childrenCondition":"",
"leafCondition":"",
"queryDirection":"LEFT_TO_RIGHT",
"recursiveLevel":"6",
"rootCondition":"and leftclass.plt_partType='产品'",
"startIndex":0};
this.dwf_axios.post(`/omf/relations/PartToPart/tree`,param).then(res => {
//在回调中处理
let itemRes = res.data.data;
console.log(itemRes);
myChart.setOption(option ={
...
});
} |
数据转换
上述代码调用以后执行结果，从日志输出以后格式化显示如下图所示，其中包含1个根节点，以及一个children属性，展开后仍然含有children属性，直到叶子节点。
...
| 代码块 |
|---|
function mapChildren(tree = []){
let arr = [];
if(!!tree) {
tree.forEach(item => {
let obj = {};
obj['name'] = item.right_partName;
if('children' in item) {
obj['value'] = item.children.length;
obj['children'] = mapChildren(item.children);
} else {
obj['value'] = 0;
}
arr.push(obj);
})
}
return arr
} |
设置配置项
最后，为了把数据输入到自定义控件，需要设置正确的配置项，直接拷贝了Echart树的配置项（option）的设定。
...
关于树的细节配置详见：https://echarts.apache.org/zh/option.html#series-tree.type
小结
本文重点讨论了DWF中自定义控件的用法，包括：
- Echarts项目的基本概念；
- DWF数据访问restful api的调用方法；
- 自定义控件的基本用法；
- 列举了饼状图、热度图、树状图的使用方法。
...