thingsboard结合echarts开发仪表库，源码分享-自动驾驶云平台

1.首先添加资源

echarts的使用手册：打开地址
echarts的API：打开地址
thingsboard的API，关于部件开发的地址：打开地址
资源位置添加：https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js

2.开发HTML

HTML位置添加：<div id="myChart" ></div>
注意id不能和其他部件重复

3.开发javascript，以下是案例代码，可以作为参考

var myChart;
self.onInit = function() {
    var dom = $('#myChart');
    dom.width(self.ctx.width);
    dom.height(self.ctx.height);
    // self.ctx.flot = new TbFlot(self.ctx);   
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(dom[0]);
    console.log(self.ctx.datasources);
    console.log(self.ctx.data);
    var series = [];
    var datakeysValue = self.ctx.datasources[0]
        .dataKeys;
    for (var i = 0; i < datakeysValue.length; i++) {
        series.push({
            type: "line",
            name: datakeysValue[i].label,
            data: []
        })

    }
    // 指定图表的配置项和数据
    var option = {
        grid: {
            top: 10,
            left: 40,
            right: 20,
            bottom: 20
        },
        xAxis: {
            type: 'time',
            axisLabel:{
                formatter:function(value,index){
                    return moment(value).format('HH:mm:ss')
                }
            }
        },
        yAxis: {},
        series: series
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

}

self.onDataUpdated = function() {
    //self.ctx.flot.update();
    var option = myChart.getOption();
    for (var i = 0; i < option.series.length; i++) {
        option.series[i].data = self.ctx.data[i].data;

    }
    myChart.setOption(option);
}

self.onResize = function() {
    //self.ctx.flot.resize();
    myChart.resize({
        width: self.ctx.width,
        height: self.ctx.height,
    })
}

self.onEditModeChanged = function() {
    //self.ctx.flot.checkMouseEvents();
}

self.onMobileModeChanged = function() {
    //self.ctx.flot.checkMouseEvents();
}

self.getSettingsSchema = function() {
    // return TbFlot.settingsSchema('graph');
}

self.getDataKeySettingsSchema = function() {
    // return TbFlot.datakeySettingsSchema(true, 'graph');
}

self.onDestroy = function() {
    //self.ctx.flot.destroy();
}

4.效果展示：第一个控件就是我们自己写的。