浅谈Mendix如何通过EChart技术实现数据可视化

Mendix

于 2021-04-22 16:29:31 发布

阅读量1.5k

点赞数 1

文章标签： Mendix echarts 数据可视化敏捷开发低代码平台

本文链接：https://blog.csdn.net/Mendix/article/details/116016137

版权

简介

Mendix善于综合管控企业多套系统，能够打通多套数据，为企业领导提供端到端的全流程可视化数据大屏的展示。本文将以EChart Line为例，展示Mendix强大的拓展能力。对可投入生产的组件，一定是需要投入精力去完善维护，比如创造组件之后的维护，以及跟上最新版本的脚步，这都是一个专业的工程师所需要考量的方面。有了基础，我们就可快速创建更多图表，实现复杂的数据大屏。

创建widget前的一些思考

通过Mendix丰富的生态提高整体开发效率是一件快乐的事情。在引入Mendix后，复用原有技术积累封装widget更是让人感觉到创造的乐趣。

Mendix封装前端组件使用的语言为JavaScript / TypeScript，框架使用React。因此，在开发过程中，我们可以自由地写JSX或使用React框架中的Syntax。

搭建开发环境

在开发之前，我们首先需要搭建环境，设定工具。

01. 安装Node.js

我们会用到npm来搭建脚手架，并引入需要的JS和React库；从https://nodejs.org/en/下载安装Node.js，并使用以下命令验证安装成功：

$ node -v //检查Node.js安装版本号

$ npm -v //检查npm安装版本号

02. 安装Mendix widget开发脚手架 (Yeoman & Mendix generator)

$ npm install –g yo @mendix/generator-widget

$ yo @mendix/widget

在Win10上操作这一步可能会出现红色权限错误提醒，请参考以下文档解决：https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7#managing-the-execution-policy-with-powershell

03. 安装Visual Studio Code

从https://code.visualstudio.com/下载安装，建议将格式检查与中文语言包插件安装上。

创建Mendix Widget

创建widget文件夹，并在命令行下运行以下命令：

$ yo @mendix/widget 您想用的widget名称

跟随脚手架指引，填写：

名称、描述、组织、版权、版本、作者；
为了方便调试，填入一个Mendix项目文件夹；
选择JS或者是TS；
选择是移动还是网页widget；
选择是否使用template；
选择是否有unit test等。

脚手架会自动通过webpack生成widget框架。

引入EChart相关库

React可以说是国际使用最广泛的JS框架了，正好有一个echarts-for-react库，就不用再花时间用React语法封装EChart了，我们用npm安装相关的Library。

$ npm install --save echarts-for-react

$ npm install --save echarts

可以看到这两个库已经加入npm的依赖中，后面项目就可以直接导入。

正式开始前，我们先看一下文件夹结构。

通过以下命令打开VS Code：

$ code 文件夹路径

dist：生成的mpk文件
node_modules：所有的依赖库
src：需要修改的代码全在这里
- widget名称.xml：属性和配置项
- widget名称.jsx：以react语法描述render逻辑
- widget名称.editorPreview.jsx：以react语法描述在Studio Pro中的预览模式render逻辑
package.json：查看echart相关组件依赖描述是否完整

添加Mendix可视化配置属性

在<properties/>里通常是一个section，包含<caption/>和<description/>；Property也可以组成<propertyGroup>，如下代码展示：

在Mendix中的效果如下：

所有可用属性类型参见Mendix docs：https://docs.mendix.com/apidocs-mxsdk/apidocs/property-types-pluggable-widgets#datasource

添加渲染逻辑

接下来就是使用JavaScript或者TypeScript搭配React框架来写Render逻辑：

对没有学过React的同学，需要先掌握React的基础知识；
如果要做美观炫酷的widget，需要有一定的CSS基础；
Mendix提供了Data Binding的方法，以及通过API操作微流纳流的方法；还可通过CSS优化界面风格，详情参看Mendix Academy（https://academy.mendix.com/link/module/379/lecture/3082/）
Mendix 8引入了datasource属性类型，提高了开发效率，这个类型会通过listValue和listAttributeValue进行操作；需要注意的是，目前版本中这种方式无法反向把前端数值写回object和attributes。因为本文例子无需进行反向操作，所以使用了这种效率较高的方法。