ThingsBoard教程（十二）：部件库中使用echarts_专栏

前言

各位读者好，截止目前，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);

}

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

如下
在这里插入图片描述