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

2023-04-30 05:21:14

前言

各位读者好，截止目前，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 ThingsBoard教程（十二）：部件库中使用echarts

设置容器

html面板下，写一个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); }

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

如下 ThingsBoard教程（十二）：部件库中使用echarts1