Fading Coder

One Final Commit for the Last Sprint

Home > Tech > Content

Resolving ECharts Custom Map Display Issues with Anhui Province Data

Tech May 7 3

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.

Related Articles

Understanding Strong and Weak References in Java

Strong References Strong reference are the most prevalent type of object referencing in Java. When an object has a strong reference pointing to it, the garbage collector will not reclaim its memory. F...

Comprehensive Guide to SSTI Explained with Payload Bypass Techniques

Introduction Server-Side Template Injection (SSTI) is a vulnerability in web applications where user input is improper handled within the template engine and executed on the server. This exploit can r...

Implement Image Upload Functionality for Django Integrated TinyMCE Editor

Django’s Admin panel is highly user-friendly, and pairing it with TinyMCE, an effective rich text editor, simplifies content management significantly. Combining the two is particular useful for bloggi...

Leave a Comment

Anonymous

◎Feel free to join the discussion and share your thoughts.