使用ChartBuilder快速搭建图表、交互数据的例程

现如今的3D可视化项目，如果不加上图表处理数据，就好像老虎没了牙齿，没有一点威慑力，3D可视化项目，如果没有图表来处理数据，就缺少了灵魂一般，仅仅是展示场景、环绕飞行、点一下某个场景就能弹出相关信息，或者是出现十分炫酷的飞行方式，就能满足了么？如果可视化连数据都无法处理好，那么可视化的项目也仅仅只是一个面子工程，何不直接制作一个视频，展示的时候直接给别人看呢？但是可视化项目和视频的区别就是，可视化能够实时交互数据，能够通过互联网进行万物互联，通过一系列设备获取到被监控的对象的某些数据，实时的传递到我们互联网中，由我们的可视化项目获取到这些数据并且实时的展示出来，还可以通过可视化项目进行相对应的操作：当某处温度过高，将可视化项目中对应位置颜色改变，同时启动报警设施，或是选择自动处理，或是选择由监控人员进行解决；同时，数据可视化能够更为直观的展示和处理，使得处理数据也变的不再复杂。

那么如何快速的搭建一个图表并且进行数据交互呢？有几种方法，最笨的就是自己通过html写一个图表，这个当然是不推荐使用的，因为现在有Echarts（https://www.echartsjs.com/examples/zh/index.html）这个火热的图表工具，有哪些需要的图表样式都可以去这里面下载。

使用方法则是查看该实例，将选择好的Echarts实例中左侧的json字符串全部复制，然后进入到ThingJS网站https://www.thingjs.com/中的“在线开发”，点击其中的官方示例，找到“界面（2D）”，选择“Echarts+交互”，替换掉官方示例中option的json数据，保存后生成新项目，运行后即可将选择的图表运用至该示例并且展示。

但是这个我还需要一个个的定位，有比这个还方便就能直接生成一个图表模板，然后改改数据就能使用的么？有的！ThingJS目前推出了ChartBuilder这个栏目，当然，目前仅对VIP用户开放，为啥普通用户不能用？别问我，我也不知道，在享受了一下VIP特权之后，对ChartBuilder进行了一个大致了解，大致上可以这样说，ChartBuilder是对Echarts的进一步封装，使用起来更为方便，同时也是有了一个ChartBuilder编辑器的存在，当然，目前来说ChartBuilder使用起来还没有VScode那种编辑器来得方便，但是能用，还算是一个比较好用的工具。

使用ChartBuilder还是需要看一下如何进行数据交互的，相关的教程在ThingJS官网的文档中心→ChartBuilder→ChartBuilder教程V3.0，其余的修改样式都非常简单，最需要关心的就是进行数据交互了，在ChartBuilder中称为数据接入：

ChartBuilder提供了多层次、多形式的数据接入方式，用户可根据自己的需求选择合适的方法 Level0 静态JSON数据 Level1 场景级数据 Level2 组件级数据 Level3 订阅数据适配器的数据 数据优先级依次递增（如果有Level3的数据，直接应用，没有则依次向下寻找，直到获取到数据

通过POST请求RestApi获取原始数据: a.填入RESTAPI地址。 b.填入返回层级。 c.填入参数。

组件可订阅数据适配器的数据,实时渲染  a.创建组件适配器  b.组件适配器对接数据 c.组件选择订阅数据 d.通过JS处理获取到的数据

相关数据接入js代码如下：

//获取订阅的数据(传入数据适配器的id)

let data = this.getPublishDataById('udatae6af66a5-fcdc-ab15-cec5-c9eb786a9a7a')

/*该函数可以根据接数组件ID获取该组件接入的业务数据

返回值为业务数据格式

参数id:组件id(string),可以在组件工具条上进行拷贝*/

//console.log(data)

//获取组件的配置

let options = this.getOptions()

/*该函数可以获取该组件的配置数据*/

//获取组件系列的值

let legendData = options.legend.data

//清空系列的值

legendData.splice(0,legendData.length)

//获取组件的业务数据

let seriesData = options.series[0].data

//清空业务数据

seriesData.splice(0,seriesData.length)

//遍历插入数据

for (let i = 0; i < data.length; i ++) {

legendData.push(data[i].name)

seriesData.push(data[i])

}

大致对于ChartBuilder有个了解后，我们就在我们的项目中使用ChartBuilder来开发图表了。

开发图表分以下几个步骤：

a.打开要开发图表的项目，点击“图表”按钮或者Ctrl+B快捷出现图表界面，选择对应模板；

b.第一次使用ChartBuilder，会弹出登录页面，关闭此页面重新进入即可（千万别选择登录，否则你会发现用户名密码错误）。

c.进入到ChartBuilder编辑页面，编辑对应的数据名称，比如标题、数据源什么的。

d.编辑完成后点击保存，返回ThingJS项目，点击刷新，右键出现的.cht文件，点击编辑图表即可再次编辑，点击预览即可查看编辑后的结果。

至此一个图表就被我们加入到项目中去了，是不是十分的方便呢。大家也可以进行尝试哟。