Example Analysis of Javascript Echarts Air quality Map effect

This article will explain in detail the example analysis of the effect of Javascript Echarts air quality map, the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

We need to combine air quality data with map data first:

Map data has the attribute name

Our air quality in different cities also has the attribute name, and these two attributes are the same, both called name, so we can associate them:

Var airData = [{name: 'Beijing', value: 39.92}, {name: 'Tianjin', value: 39.13}, {name: 'Shanghai', value: 31.22}, {name: 'Chongqing', value: 66}, {name: 'Hebei', value: 147}, {name: 'Henan', value: 113}, {name: 'Yunnan', value: 25.04} {name: 'Liaoning', value: 50}, {name: 'Heilongjiang', value: 114}, {name: 'Hunan', value: 175}, {name: 'Anhui', value: 117}, {name: 'Shandong', value: 92}, {name: 'Xinjiang', value: 84}, {name: 'Jiangsu', value: 67}, {name: 'Zhejiang' Value: 84}, {name: 'Jiangxi', value: 96}, {name: 'Hubei', value: 273}, {name: 'Guangxi', value: 59}, {name: 'Gansu', value: 99}, {name: 'Shanxi', value: 39}, {name: 'Inner Mongolia', value: 58}, {name: 'Shaanxi', value: 61} {name: 'Jilin', value: 51}, {name: 'Fujian', value: 29}, {name: 'Guizhou', value: 71}, {name: 'Guangdong', value: 38}, {name: 'Qinghai', value: 57}, {name: 'Xizang', value: 24}, {name: 'Sichuan', value: 58}, {name: 'Ningxia' Value: 52}, {name: 'Hainan', value: 54}, {name: 'Taiwan', value: 88}, {name: 'Hong Kong', value: 66}, {name: 'Macao', value: 77}, {name: 'South China Sea Islands', value: 55}]

Then we will configure the air quality data into series:

Finally, do some effect configuration:

Complete code:

Map-Air quality in different cities var airData = [{name: 'Beijing', value: 39.92}, {name: 'Tianjin', value: 39.13}, {name: 'Shanghai', value: 31.22}, {name: 'Chongqing', value: 66}, {name: 'Hebei', value: 147}, {name: 'Henan', value: 113} {name: 'Yunnan', value: 25.04}, {name: 'Liaoning', value: 50}, {name: 'Heilongjiang', value: 114}, {name: 'Hunan', value: 175}, {name: 'Anhui', value: 117}, {name: 'Shandong', value: 92}, {name: 'Xinjiang', value: 84} {name: 'Jiangsu', value: 67}, {name: 'Zhejiang', value: 84}, {name: 'Jiangxi', value: 96}, {name: 'Hubei', value: 273}, {name: 'Guangxi', value: 59}, {name: 'Gansu', value: 99}, {name: 'Shanxi', value: 39}, {name: 'Inner Mongolia' Value: 58}, {name: 'Shaanxi', value: 61}, {name: 'Jilin', value: 51}, {name: 'Fujian', value: 29}, {name: 'Guizhou', value: 71}, {name: 'Guangdong', value: 38}, {name: 'Qinghai', value: 57}, {name: 'Xizang', value: 24} {name: 'Sichuan', value: 58}, {name: 'Ningxia', value: 52}, {name: 'Hainan', value: 54}, {name: 'Taiwan', value: 88}, {name: 'Hong Kong', value: 66}, {name: 'Macao', value: 77}, {name: 'South China Sea Islands' Value: 55}] var myCharts = echarts.init (document.querySelector ('div')) axios.get ('. / json/map/china.json'). Then (res = > {console.log (res.data) echarts.registerMap ('china', res.data) var option = {geo: {type:' map', map: 'china', roam: true Label: {show: true}}, series: [{data: airData, / / Air quality data geoIndex: 0, / / correlate the air quality data with the 0th geo configuration type: 'map'}] VisualMap: {min: 0, / / minimum max: 300, / / maximum inRange: {color: ['pink',' blue'] / / controls the lower left corner and map gradient color} Calculable: true / / Control slider in the lower left corner}} myCharts.setOption (option)}) example analysis of Javascript Echarts air quality map effect is shared here. I hope the above content can be of some help to you and learn more knowledge. If you think the article is good, you can share it for more people to see.