一、安装开发工具
1、安装Node.js v12.0.0 或任何更高版本
2、安装Yeoman：npm install -g yo
3、安装 Mendix Pluggable Widget Generator：npm install -g @mendix/generator-widget
二、使用命令行创建热力地图组件
Pluggable Widget Generator 是开始开发mendix组件的最快方式。它会创建一个小部件推荐的文件夹结构和文件。
使用终端或命令行，在一个文件夹下创建一个名为heatmap的新文件夹，然后使用以下命令启动生成器：
yo @mendix/widget HeatMap
创建完成后是这样的一个文件结构
三、用编辑器 打开HeatMap 文件夹 安装echarts
npm install echarts --save
四、页面中引入echarts 实现地图组件
1、components 下的maps.jsx文件
import '../ui/china';
import * as echarts from 'echarts';
export class Maps extends Component {
constructor(props) {
super(props);
this.state = {
data:[
{
name: "南海诸岛"
},
{
name: '北京'
},
{
name: '天津'
},
{
name: '上海'
},
{
name: '重庆'
},
{
name: '河北'
},
{
name: '河南'
},
{
name: '云南'
},
{
name: '辽宁'
},
{
name: '黑龙江'
},
{
name: '湖南'
},
{
name: '安徽'
},
{
name: '山东'
},
{
name: '新疆'
},
{
name: '江苏'
},
{
name: '浙江'
},
{
name: '江西'
},
{
name: '湖北'
},
{
name: '广西'
},
{
name: '甘肃'
},
{
name: '山西'
},
{
name: '内蒙古'
},
{
name: '陕西'
},
{
name: '吉林'
},
{
name: '福建'
},
{
name: '贵州'
},
{
name: '广东'
},
{
name: '青海'
},
{
name: '西藏'
},
{
name: '四川'
},
{
name: '宁夏'
},
{
name: '海南'
},
{
name: '台湾'
},
{
name: '香港'
},
{
name: '澳门'
}
]
}
this.handleChange = this.handleChange.bind(this);
}
componentDidMount(){
this.initMap();
}
handleChange(params) {//调用微流方法
console.log(params)
const { attribute } = this.props;
attribute.setValue(params.name);
console.log(attribute)
}
//初始化地图
initMap = () => {
let that = this
let myChart = echarts.init(document.getElementById('myMap'));
let option = {
tooltip: {
formatter: function (e , t, n) {
return e.name
}
},
visualMap: {
min: 100,
max: 1000,
right: 26,
bottom: 40,
showLabel: !0,
pieces: [{
gt: 500,
label: "500家以上",
color: "#ED5351"
}, {
gte: 200,
label: "201-500家",
color: "#3B5A97"
}, {
gte: 100,
label: "101-200家",
color: "#59D9A5"
}, {
gt: 51,
label: "51-100家",
color: "#F6C021"
}, {
label: "1-50家",
gt: 0,
color: "#6DCAEC"
}
],
show: false
},
geo: {
map: "china",
roam: !1,
scaleLimit: {
min: 1,
max: 2
},
zoom: 1.13,
layoutCenter: ['30%', '30%'], //地图中心在屏幕中的位置
emphasis: {
label: {
show: !0
}
}
},
series: [{
name: "当前地区",
type: "map",
geoIndex: 0,
data: this.state.data,
areaColor: '#0FB8F0'
}]
};
myChart.on('click', function (params) {
that.handleChange(params)
});
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
render(){
return (
<div className="map" style={{ width: '500px', height: '600px' }}>
<div id="myMap" style={{ width: '500px', height: '600px' }}></div>
</div>
)
}
}
2、src下的HeatMap.xml 文件
<widget id="nancal.heatmap.HeatMap" pluginWidget="true" needsEntityContext="true" offlineCapable="true"
supportedPlatform="Web"
xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
<name>Heat Map</name>
<description>My widget description</description>
<icon/>
<properties>
<propertyGroup caption="Data source">
<property key="attribute" type="attribute" onChange="onChangeAction">
<caption>Attribute (path)</caption>
<description/>
<attributeTypes>
<attributeType name="String"/>
</attributeTypes>
</property>
</propertyGroup>
<propertyGroup caption="Events">
<property key="onChangeAction" type="action" required="false">
<caption>On change</caption>
<description/>
</property>
</propertyGroup>
</properties>
</widget>
3、通过src 下的 HeatMap.jsx 文件将在mendix 中获取的数据传递给 maps 组件
import { Maps } from "./components/Maps";
import "./ui/HeatMap.css";
export default class HeatMap extends Component {
render() {
return <Maps attribute = {this.props.attribute}/>;
}
}
五、完成之后 通过 npm run build 将代码打包
1、将打包好的组件 放到 mendix 项目根目录的 widgets 文件夹下
2、打开mendix 项目按F4 同步应用程序目录
3、将组件推拽到页面中 配置属性 （选择实体中的参数、参数改变触发的微流）
