Resolving ECharts Custom Map Display Issues with Anhui Province Data
When implementing an Anhui province map in ECharts, the built-in version contained outdated administrative boundaries including Chaohu City, which was no longer acceptable. The ECharts Map Data Tool (http://ecomfe.github.io/echarts-map-tool/) provided updated GeoJSON data for Anhui province.
Initial attempts using the extension map functionality encountered issues with the echart.util module. After consulting the API documentation, the correct approach was identifeid:
require('echarts/util/mapData/params').params.anhui = {
getGeoJson: function (callback) {
$.getJSON('geoJson/anhui.json', function (data) {
callback(require('echarts/util/mapData/params').decode(data));
});
}
};
The key discovery was that compressed map data requires proper decoding. The correct method chain is require('echarts/util/mapData/params').decode(data) rather than require('echarts/util/mapData/params').params.decode(data).
For enhanced functionality, mouse hover events can be implemented:
var chartConfig = require('echarts/config');
chartInstance.on(chartConfig.EVENT.HOVER, function (eventParams) {
var cityName = eventParams.name;
displayCityInfo(cityName);
});
Custom tooltip formatters allow displaying multiple data points:
var schoolData = [
{ name: 'Hefei', value: 15 },
{ name: 'Wuhu', value: 12 },
{ name: 'Bengbu', value: 8 }
];
var programData = [
{ name: 'Hefei', value: 25 },
{ name: 'Wuhu', value: 18 },
{ name: 'Bengbu', value: 14 }
];
var chartOptions = {
tooltip: {
trigger: 'item',
formatter: function (params) {
var tooltipContent = params.name + '<br/>Total: ' + params.value + ' projects';
for (var i = 0; i < schoolData.length; i++) {
if (params.name === schoolData[i].name) {
tooltipContent += '<br/>Schools: ' + schoolData[i].value;
}
if (params.name === programData[i].name) {
tooltipContent += '<br/>Programs: ' + programData[i].value;
}
}
return tooltipContent;
}
},
series: [{
type: 'map',
mapType: 'anhui',
data: [
{ name: 'Hefei', value: Math.floor(Math.random() * 100) },
{ name: 'Wuhu', value: Math.floor(Math.random() * 100) },
{ name: 'Bengbu', value: Math.floor(Math.random() * 100) }
]
}]
};
The complete implementation ensures the updated Anhui province boundaries are displayed correctly, excluding the deprecated Chaohu City region.