Thingworx自定义扩展开发（三）- echarts集成

系列

Thingworx自定义扩展开发（一）- 开发环境搭建、Extension Demo Coding
Thingworx自定义扩展开发（二）- Widget Demo Coding
Thingworx自定义扩展开发（三）- echarts集成

这里演示一个简单的集成仪表盘的示例，并进行了简单的数据绑定，其他的类似。

1 准备

Thingworx版本9.1及其相应是SDK，安装好开发环境的Eclipse，echarts 5.2.2（集成时最新版）

2 开发

2.1 新建项目

新建一个Thingworx Extension项目：CustomCharts

2.2 新建一个widget

一个项目中，可以开发多个widget

9.1版本创建完widget会有一个小bug，< widgetname >.ide.js中的widgetIconUrl返回值会多一个引号，导致导入Thingworx中，组件列表不会显示出图标

2.3 引入echarts

将下载后的echarts.min.js引入项目

2.3.1 引入

这里放在ui/gauge_chart/echarts 目录下

2.3.2 配置

编辑 configfiles/metadata.xml配置文件，这里让开发时也生效，是为了在开发时就能直观看到组件的变化（除数据之外的变化）

这里也是一个坑，按照官方的说法，应该是在js中引入，但是很遗憾，引入后可能无效，初始化echarts时会报undefined

2.3.3 编辑 gauge_chart.ide.js

直接上代码，具体看注释

TW.IDE.Widgets.gauge_chart = function() {let thisWidget = this;this.widgetIconUrl = function() {return "../Common/extensions/CustomCharts/ui/gauge_chart/default_widget_icon.ide.png";};this.widgetProperties = function() {return {'name' : 'Gauge Chart','description' : 'chart based on echarts','category' : [ 'Data', 'Charts' ],/** 自适应支持 */'supportsAutoResize' : true,'defaultBindingTargetProperty' : 'Data','properties' : {'Data' : {'isBindingTarget' : true,'baseType' : 'NUMBER','defaultValue' : 50},'DataLabel' : {'baseType' : 'STRING','defaultValue' : 'Gauge Chart'}}}};this.afterSetProperty = function(name, value) {//直接返回true，表示任意属性修改，都重新加载组件 [仅限 Mashup Builder - 运行时除外]return true;};this.renderHtml = function() {return '<div class="widget-content widget-gauge_chart"></div>';};this.afterLoad = function() {//加载完组件，手动调用this.setProperty()方法同时thingworx以修改组件大小，否则组件将显示100*100大小，传值随意this.setProperty('initChart', 'afterLoad');};this.afterRender = function() {/* 初始化eChart实例 */thisWidget.chart = echarts.init(document.getElementById(this.jqElementId));this.chart.setOption(thisWidget.getOption());thisWidget.chart.resize();//此处目的同afterLoad()方法this.setProperty('initChart', 'afterRender');};this.getOption = function() {//将官方demo扔进来let option = {tooltip : {formatter : '{a} <br/>{b} : {c}%'},series : [ {name : 'Pressure',type : 'gauge',detail : {formatter : '{value}'},data : [ {value : this.properties['Data'],name : this.properties['DataLabel']} ]} ]};return option;};
};

3 使用

项目打包，生成zip文件，导入Thingworx

在开发界面引入

运行时文件再写一遍，具体参考官方文档即可：https://support.ptc.com/help/thingworx/platform/r9/en

PS：目前已集成如下图形

2022.01.08 更新

很多小伙伴都在问runtime.js怎么写，这里贴一下示例代码，大同小异，以下代码不是最优编码，但是能使用。

TW.Runtime.Widgets.gauge_chart= function () {let thisWidget = this;const widgetProperties = this.properties;let dataRows = [];let actualSourceProperty = "";this.renderHtml = function () {return    '<div class="widget-content widget-gauge_chart"></div>';};this.afterRender = function () {this.initEcharts();};this.initEcharts = function() {/* 初始化eChart实例 */thisWidget.chart = echarts.init(document.getElementById(this.jqElementId));this.chart.setOption(thisWidget.getOption());thisWidget.chart.resize();};this.updateProperty = function (updatePropertyInfo) {let targetProperty = updatePropertyInfo.TargetProperty;let sourceProperty = updatePropertyInfo.SourceProperty;let actualData = [];switch (targetProperty) {case 'Data':// 赋值全局变量，方便自定义方法获取数据dataRows = updatePropertyInfo.ActualDataRows;actualSourceProperty = sourceProperty;break;default:break;}// 更新图表this.chart.setOption(thisWidget.getOption());thisWidget.chart.resize();};this.getOption = function() {//将官方demo扔进来let option = {tooltip : {formatter : '{a} <br/>{b} : {c}%'},series : [ {name : 'Pressure',type : 'gauge',detail : {formatter : '{value}'},data : this.chartSeriesData()} ]};return option;};this.chartSeriesData = function() {let data = [];if (dataRows.length > 0) {let row = dataRows[0];let ob = new Object();ob.name = widgetProperties['DataLabel'];for ( let j in row) {if(actualSourceProperty == j){ob.value = row[j];}}data.push(ob);}return data;};this.runtimeProperties = function() {return {'needsDataLoadingAndError' : true,'supportsAutoResize' : true,'borderWidth' : 0};};this.resize = function(width, height) {thisWidget.chart.resize(width, height);};
};

相当于喂到嘴里了，如果这都还不会，那就用钱买现成的吧，购买联系QQ：326170945

Thingworx自定义扩展开发（三）- echarts集成相关推荐

Thingworx自定义扩展开发（一）- 开发环境搭建、Extension Demo Coding
系列 Thingworx自定义扩展开发(一)- 开发环境搭建.Extension Demo Coding Thingworx自定义扩展开发(二)- Widget Demo Coding Thingwo ...
Thingworx自定义扩展开发（二）- Widget Demo Coding
系列 Thingworx自定义扩展开发(一)- 开发环境搭建.Extension Demo Coding Thingworx自定义扩展开发(二)- Widget Demo Coding Thingwo ...
【php7扩展开发三】ini配置
php.ini配置 php.ini是PHP主要的配置文件,解析时PHP将在这些地方依次查找该文件:当前工作目录.环境变量PHPRC指定目录.编译时指定的路径,在命令行模式下,php.ini的查找路径可 ...
自定义组件开发三 Graphics 绘制动态效果
概述上文https://blog.csdn.net/u011733020/article/details/80220513主要介绍了Graphics相关的api的绘图方法.绘制的都是静态的,这里使用 ...
echarts实现自定义扩展地图-中国七大区域图
相信很少用echarts的人第一次接触时会有很多疑惑,比如,在百度突然看到一段代码,感觉莫名奇妙,不知道怎么用.正所谓熟能生巧,当你专一用echarts一个月后,你会发现其实任何技术并没有想象那么难. ...
react native开发Android 篇——集成自定义的字体
react native开发Android 篇--集成自定义的字体第一种:link添加自定义字体第二种:直接复制字体到`android/app/src/main/assets/fonts`目录下 ...
使用C#为.NET Interactive开发自定义扩展
在前面的文章中,我们介绍了如何在.NET Interactive notebook绘制图表和执行SQL. 那么,能不能为.NET Interactive开发交互功能呢? 今天,我们就来演示如何实现. ...
asp.net core mcroservices 架构之分布式日志（二）之自定义日志开发
netcore日志原理 netcore的日志是作为一个扩展库存在的,每个组件都有它的入口,那么作为研究这个组件的入口是最好的,首先看两种方式: 这个是源码例子提供的. 1 var loggingCon ...
第十三节：HttpHander扩展及应用(自定义扩展名、图片防盗链)
一. 自定义扩展名 1. 前言凡是实现了IHttpHandler接口的类均为Handler类,HttpHandler是一个HTTP请求的真正处理中心,在HttpHandler容器中,ASP.NET ...