When you read the weather forecast on the Internet, you should have seen the temperature of different provinces displayed on the map of China, and different colors are displayed according to the temperature, or you can see the number of new crown pneumonia in each province. Increase the number of images displayed in different colors. These can be realized by using the map in echarts. Let’s realize the heat map today. The heat map is a map that displays different colors according to different data.
First create an element to host the image.
<div id="heatmap"></div>
Initialize echarts instance
const echartsInstance = echarts.init(document.getElementById('heatmap'));
Then register the map data. The map data is a json file. The json data contains the coordinates, names, capital cities and other information of each province. It needs to be registered in echarts before use.
echarts.registerMap('china'， 'china.json');
Next, configure the data configuration.
More data is generated using functions.
function createData(){
return china.features.map(item => {
return {
name:item.properties.shortName,
value: Math.floor(Math.random() * 361)
}
})
}
const options = {
visualMap:{
type:'piecewise',
pieces:[{
min:0,
max:100,
color:'#10ff10'
},{
min:101,
max:190,
color:'#eeffaa'
},{
min:191,
max:360,
color:'#eeffff'
}]
},
series:[{
type:'map',
map:'china',
nameProperty:'shortName',
name:'shortName',
data:createData()
}]
};
In the geo field, we can see that the value of the map attribute is the name of the map we registered.
nameProperty is the displayed field, which corresponds to the field in the JSON data.
To display different colors on the geo according to the size of the data, you need to use visualMap, which maps the data into corresponding primitives, that is, image information that can be displayed.
Since the heat map is displayed, we use continuous data, that is, the data is continuous rather than discrete.
We can configure the colors to be displayed for different data in pieces.
In the series we need to declare the type as map so that different data can be displayed.
There is a map attribute in the map graph, and the value of this attribute is the name of the map we registered.
nameProperty is the field name of the value displayed on the map, the default is name, and the value corresponds to the field in the map json data.
Next, set the options
echartsInstance.setOption(options);
The effect is shown in the figure
In addition to the map series that can achieve such an effect, geo can also achieve it, but geo itself cannot display data, it only displays maps, so other series are required to display data, which is more troublesome than map configuration, but geo supports point data and line set.