ThingsBoard教程（十二）：部件库中使用echarts

前言

各位读者好，截止目前，ThingsBoard系列文章已经做了十篇，分别是

ThingsBoard教程（一）：ThingBoard介绍及安装 ThingsBoard教程（二）：租户，租户配置，部件组模块的使用 ThingsBoard教程（三）：系统设置模块的使用 ThingsBoard教程（四）：规则链简介与操作 ThingsBoard教程（五）：客户，资产管理 ThingsBoard教程（六）：设备管理 ThingsBoard教程（七）：模拟设备遥测 ThingsBoard教程（八）：自定义UI ThingsBoard教程（九）：前端架构分析 ThingsBoard教程（十）：前端初级定制化 ThingsBoard教程（十一）：部件库的入门知识

上一篇TB教程我们讲解了如何在部件库中写一个简单的html页面。以及如何引入第三方资源,那么本期我们就以前来看一下在tb中如何使用echarts。echarts具有丰富，美观的案例，如果能移植到tb中，那么对我们开发仪表盘，dashboard将会事半功倍。下面让我们一起看一下如何在部件库中使用echarts。

引入echarts外部资源

我们创建一个部件库，然后再创建一个部件，进入到部件的编辑页面。 在资源tab下，引入 echarts.js 地址为https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js

设置容器

html面板下，写一个div用于显示图表

<div id=”chart-container”></div>

创建了div后，还不行，必须要给这个div设置宽高，要不然显示不出图表。 在css面板下写下

#chart-container{ height: 500px; width: 500px; }

编写初始化代码

渲染图表的代码是写在js的面板里 首先需要获取图表的容器 使用以下代码

const chartDom = $(“#chart-container”, self.ctx.$container)[0];

我们使用self.ctx来获取部件的上下文，其中$container 代表当前部件的最外层的div。需要图表容器必须要在self.ctx.$container 中寻找，此外，我们不必引入jquery，官方默认是引入了，直接使用即可。 获取图表容器后下面就很简单了。 定义图表的配置参数 optinon js面板的完整代码如下

self.onInit = function() { const chartDom = $(“#chart-container”, self.ctx .$container)[0]; const myChart = echarts.init(chartDom); var option; option = { // color: [#5470c6, #fac858], color: [#fff, #fff], legend: { data: [已用产能, 剩余产能] }, xAxis: { type: category, data: [“制芯”, “组芯”, “熔炼”, “浇注”, “冷却”, “落砂”, “切割”, “抛丸”, “打磨”, “检测” ] }, yAxis: { type: value, axisLabel: { formatter: {value}% } }, series: [{ name: 已用产能, type: bar, stack: total, label: { show: true, formatter: {c}% }, emphasis: { focus: series }, data: [76, 54, 62, 59, 67, 81, 84, 92, 96, 83 ], itemStyle: { decal: { symbol: rect, symbolSize: 1, maxTileWidth: 512, maxTileHeight: 512, symbolKeepAspect: true, dashArrayX: [1, 0], dashArrayY: [2, 2], color: #5470c6, // rotation: 0.5235987755982988 } } }, { name: 剩余产能, type: bar, stack: total, label: { show: true, formatter: {c}% }, emphasis: { focus: series }, data: [24, 46, 38, 41, 33, 19, 16, 8, 4, 17 ], itemStyle: { decal: { symbol: rect, symbolSize: 1, maxTileWidth: 512, maxTileHeight: 512, symbolKeepAspect: true, dashArrayX: [1, 0], dashArrayY: [2, 2], color: #fac858, } } }, ], aria: { enabled: true, decal: { show: true, } } }; option && myChart.setOption(option); }

这个时候保存后就能看到效果了

如下

配置部件库显示到系统首页

我们配置好后如何将这个部件放到首页，让用户一登录系统就能看到。 首先我们需要先找个租户管理员的账号，登录系统 可以使用系统默认的账户 tenant@thingsboard.org / tenant

登录系统后，进入到仪表盘库菜单，点击右上角创建一个home仪表盘库。 创建后，点击home那一列，打开 仪表盘的编辑页面

打开仪表盘后，点击添加新的部件

然后选择自己的部件所在的部件库

选择后部件库，还需要选择部件库中的某一个部件。

点击添加即可。然后点右下角的对号保存。

配置完我们的仪表盘库后， 然后进入 Home Setting 的菜单。找到我们刚刚创建的仪表盘库，点击保存。

最后在点击首页，就能看到首页已经变成了我们配置的仪表盘。

这个案例写的比较粗浅，echarts的数据不是动态的，仪表盘的大小不能全屏。 后面我们会讲解更多有关仪表盘的配置项，敬请关注。