JavaScript data visualization: ECharts map making

Overview
Precautions

1. Usage
2. Implementation steps

Preliminary implementation code

Effect:

Geo common configuration

The effect diagram after adding the above configuration:

Display a province (Henan Province)

Effect

Different areas display different colors

Combination of map and scatter plot

Summarize

Overview

Maps are a very common means of display in our daily data visualization analysis. They are not only beautiful but also grand. Especially in large-screen displays, it plays an indispensable role

Precautions

1. Usage

1. Baidu Map API (AutoNavi Map API)

Need to apply for Baidu API

2. Vector Map

Need to prepare vector map data

2. Implementation steps

1. The most basic code structure of ECharts

Import js file – DOM container – initialize object – set option

2. Prepare the json file of the vector map of China and put it in the directory of json/map/

3. Use Ajax to get china.json

//
$get('json/map/china.json',function (chinaJson) {})

4. Register the json data of the map to the echarts global object in the callback function

echarts.registerMap('chinaMap',chinaJson)

5. Set under geo

{
    type:'map',
    map:'chinaMap'
}

Preliminary implementation code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map Implementation</title>
    <script src="./lib/echarts.min.js"></script>
    <script src="./lib/jquery.min.js"></script>
</head>
<body>
    <div style="width:600px;height:400px;"></div>
    <script>
        var myCharts = echarts.init(document.querySelector('div'))
        $.get('./json/map/china.json', function (chinaJson) {
            // chinaJson is the vector map data of each province in China // console.log(chinaJson);
            // Register map dataecharts.registerMap('chinaMap',chinaJson)
            var option = {
                geo:{
                    type: 'map',
                    //chinaMap needs to be consistent with the first parameter in registerMapmap: 'chinaMap'
                }
            }
            myCharts.setOption(option)
        })
    </script>
</body>
</html>

The returned data chinaJson outputs a screenshot in the browser background:

insert image description here

Let's expand a province and take a look (Taiwan Province as an example):

insert image description here

Effect:

insert image description here

Geo common configuration

Allows zooming and dragging effects

roam: true

Name Display

label{
show:true
}

Initial zoom ratio

zoom: 1.2

Set the coordinates of the map center point

// This coordinate point can be obtained in the data we return
center: [121.509062, 25.044332]

The effect diagram after adding the above configuration:

insert image description here

Display a province (Henan Province)

There is nothing much to say here, just change the vector map data from the original whole country to Henan.

PS: Kuan Ge is from Henan, so I used Henan Province as an example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map-display of a certain area</title>
    <script src="./lib/echarts.min.js"></script>
    <script src="./lib/jquery.min.js"></script>
</head>
<body>
    <div style="width:600px;height:400px;"></div>
    <script>
        var myCharts = echarts.init(document.querySelector('div'))
        $.get('json/map/henan.json',(ret) => {
            echarts.registerMap('henanMap', ret)
            console.log(ret);
            var option = {
                geo:{
                    type:'map',
                    map:'henanMap',
                    zoom: 1,
                    label: {
                        show: true
                    },
                    center: [115.650497, 34.437054],
                    roam: true
                }
            }
            myCharts.setOption(option)
        })
    </script>
</body>
</html>

Effect

insert image description here

Different areas display different colors

1. Display basic map of China

2. Set the air quality data to the objects under the series

3. Associate the data under the series with geo

4. Configure visualMap

Note: Here we need to prepare an array, which contains an object. Each object has two key values: name corresponds to the province name, and value corresponds to the color value.

First look at the effect diagram and see if it looks familiar:

insert image description here

This is similar to our COVID-19 data chart. The epidemic is far from over. Everyone must not take it lightly, actively get vaccinated, and do a good job of daily protection.

The code is as follows, and the comments are quite detailed, so I won't explain them one by one.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map Implementation</title>
    <script src="./lib/echarts.min.js"></script>
    <script src="./lib/jquery.min.js"></script>
</head>
<body>
    <div style="width:600px;height:400px;"></div>
    <script>
        /**
         * 1. Display a basic map of China * 2. Set air quality data to objects under series * 3. Associate data under series with geo * 4. Configure visualMap
         */
        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: 'Tibet', 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'))
        $.get('./json/map/china.json', function (chinaJson) {
            echarts.registerMap('chinaMap',chinaJson)
            var option = {
                geo:{
                    type: 'map',
                    //chinaMap needs to be consistent with the first parameter in registerMapmap: 'chinaMap',
                    // Allow zooming and dragging effects roam: true,
                    // Name display label:{
                        show: true
                    }
                },
                series: [
                    {
                        type: 'map',
                        data: airData,
                        geoIndex: 0 //Associate the air quality data with the configuration of the 0th geo}
                ],
                visualMap:
                    min: 0,
                    max: 300,
                    inRange: {
                        // Control the range of color gradient color: ['#fff', '#f00']
                    },
                    // Slider appears calculable: true
                }
            }
            myCharts.setOption(option)
        })
    </script>
</body>
</html>

Combination of map and scatter plot

1. Based on the above code, add the following configuration to series

{
     data: scatterData, //Configure the coordinate data of the scattered points type: 'effectScatter',
     coordinateSystem: 'geo', //Specify the coordinate system used by the scattered points. The coordinate system of geo rippleEffect: {
          scale: 10 //Set the scale of the ripple animation}
}

Effect picture:

insert image description here

Summarize

This is the end of this article. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

How to use echarts to visualize components in Vue
Implementation of drag data visualization function in Vue based on Echarts
Complete step-by-step record of using Echarts visualization library in Vue
An example of a method for displaying data visualization on a large screen based on vue+echarts
Vue Echarts implements a visual world map code example
JavaScript Echart visualization learning

<<: Simply understand the writing and execution order of MySQL statements

>>: Detailed explanation of mysql transaction management operations