2021-03-20 thingsboard自定义echarts widget(1)

echarts

https://echarts.apache.org/zh/index.html
比较火的作图库。

最简单的例子:https://echarts.apache.org/examples/zh/editor.html?c=line-simple

var echarts = require('echarts');

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};

option && myChart.setOption(option);

thingsboard的widget自定义

https://thingsboard.io/docs/user-guide/contribution/widgets-development/
这里先搞定static的内容。

  1. 资源中加入echarts.min.js
    我用的是:https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js
    设置echart.min.js的载入地址
  2. HTML中可以不用管这个静态部件
  3. CSS我也没管
  4. javascript部分需要将上述echarts代码进行改写后填入
//资源中加入echarts.min.js,echarts已经可以在这个scope中使用了
self.onInit = function() {
    //console.debug(self); //chrome的console可以看到self的内容。
    //debugger; //启动浏览器的debugger进行调试
    self.ctx.place_holder = self.ctx.$container[0] //一定要加[0]
    self.ctx.chart_options = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat',
                'Sun'
            ]
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [150, 230, 224, 218, 135, 147,
                260], //data可以以后改,但是要注意scope的问题,必须放到self.ctx中或者在前面用var声明。
            type: 'line'
        }]
    };
    self.ctx.chart = echarts.init(self.ctx.place_holder);
    self.ctx.chart.setOption(self.ctx.chart_options);
    self.onResize()
}

self.onResize = function() {
    self.ctx.place_holder.width = self.ctx.width;
    self.ctx.place_holder.height = self.ctx.height;
    self.ctx.chart.resize()
}

self.onDataUpdated = function() {}
  1. 点击运行,就可以看到结果了。


    运行结果

    此时可以进入编辑模式,拖动鼠标,图形是自动缩放的。

调试

console.debug(xxx); // 在浏览器的console中输出内容
//console.log(xxx); //似乎被屏蔽了,在浏览器的console中看不到输出
debugger; // 启动浏览器的debugger,在此断点,似乎还可以用vscode连接过来。

你可能感兴趣的:(2021-03-20 thingsboard自定义echarts widget(1))