Install development tools

Install Yeoman: NPM install -g yo. Install Mendix Pluggable Widget Generator. npm install -g @mendix/generator-widgetCopy the code

Create a thermal map component using the command line

The Pluggable Widget Generator is the fastest way to start developing Mendix components. It creates a folder structure and files recommended by the widget. Using a terminal or command line, create a new folder called HeatMap under a folder and start the generator using the following command: You@mendix/Widget HeatMapCopy the code

After creation, a file structure looks like this

Install Echarts using the HeatMap folder in the editor

    npm install echarts --save
Copy the code

Introduction of ECharts map components in the page

1. Maps. JSX file under Components

import '.. /ui/china'; import * as echarts from 'echarts'; export class Maps extends Component { constructor(props) { super(props); This. State = {data: [{name: "the south China sea islands"}, {name: "Beijing"}, {name: "tianjin"}, {name: "Shanghai"}, {name: 'chongqing'}, {name: 'hebei'}, {name: 'henan'}, {name: 'yunnan'}, {name: 'liaoning'}, {name: 'heilongjiang'}, {name: 'hunan'}, {name: 'anhui'}, {name: 'shandong'}, {name: 'xinjiang'}, {name: 'jiangsu'}, {name: 'zhejiang'}, {name: 'jiangxi'}, {name: 'hubei'}, {name: 'guangxi'}, {name: 'gansu'}, {name: 'the shanxi'}, {name: 'Inner Mongolia'}, {name: 'shaanxi'}, {name: 'jilin'}, {name: 'fujian'}, {name: 'guizhou'}, {name: "Guangdong"}, {name: 'qinghai'}, {name: 'Tibet'}, {name: 'sichuan'}, {name: 'ningxia'}, {name: 'hainan'}, {name: "Taiwan"}, {name: HandleChange = this.handlechange. Bind (this); } componentDidMount(){ this.initMap(); } handleChange(params) {// Call the microflow method console.log(params) const {attribute} = this.props; attribute.setValue(params.name); Console. log(attribute)} // Initialize the map 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: "3B5A97"}, {gte: > < span style = "max-width: 100%; clear: both; min-height: 1em; 0, color: "#6DCAEC" } ], show: false }, geo: { map: "china", roam: ! 1, scaleLimit: {min: 1, Max: 2}, zoom: 1.13, layoutCenter: ['30%', '30%'], // Map center location in the screen Element: {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> ) } }Copy the code

2. The heatmap. XML file under SRC

<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: / / 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>Copy the code

3. Pass the data captured in Mendix to the MAPS component using the heatmap. JSX file under SRC

import { Maps } from "./components/Maps"; import "./ui/HeatMap.css"; export default class HeatMap extends Component { render() { return <Maps attribute = {this.props.attribute}/>; }}Copy the code

5. Package the code with NPM Run Build after completion

Open the Mendix project and press F4 to synchronize the application directory. 3. Drag the component to the page and configure the properties (select parameters in the entity and microflows triggered by parameter changes).

Six, the effect after operation