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).