上一篇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的数据不是动态的，仪表盘的大小不能全屏。 后面我们会讲解更多有关仪表盘的配置项，敬请关注。