How to use maps to display data in ECharts-JS Tutorial-php.cn

How to use maps to display data in ECharts

WBOY

Release： 2023-12-18 16:09:34

Original

1530 people have browsed it

How to use maps to display data in ECharts

ECharts is a powerful data visualization tool that supports a variety of chart types, including line charts and bar charts , pie chart, etc. Among them, map charts are an important component in ECharts and can be used to display the data distribution in various regions. This article will introduce how to use the map function in ECharts and give detailed code examples.

Before we start, we need to prepare the following files:

echarts.min.js: The core library file of ECharts.
china.js: China map data file predefined in ECharts, used to draw China maps.
Data file: The data file we prepared ourselves, in JSON format, contains data for each region.

First, introduce the necessary files in the HTML file:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts地图展示数据示例</title>
    <script src="echarts.min.js"></script>
    <script src="china.js"></script>
</head>
<body>
    <div id="map" style="width: 800px; height: 600px;"></div>
</body>
</html>

Copy after login

Then, write the code in the JavaScript file:

// 创建地图实例
var myChart = echarts.init(document.getElementById('map'));

// 设置地图参数
var option = {
    title: {
        text: '全国各省份数据分布',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'],           // 文本，默认为数值文本
        calculable: true,
        inRange: {
            color: ['#e0ffff', '#006edd']
        }
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'china',
            roam: false,         // 禁止缩放平移
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '北京', value: 500},
                {name: '上海', value: 300},
                {name: '广东', value: 800},
                // 这里填充自己的数据
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

Copy after login

In the above code, we first pass echarts.init method to create a map instance and bind it to the specified DOM element. Then, we configure the map's style and data by setting the option parameters. In series, we set the map type to map and specified the map data.

Finally, we use myChart.setOption(option) to apply the configuration item to the map instance to display the map.

It should be noted that we only provide part of the data in the code. You need to fill in the data and adjust related configurations according to your actual situation. At the same time, you can display maps of other regions by modifying the map data in the china.js file.

So far, we have completed the operation of using maps to display data in ECharts. Through careful configuration and data filling, you can achieve richer and more diverse map display effects. I hope this article can be helpful to your study and practice!

The above is the detailed content of How to use maps to display data in ECharts. For more information, please follow other related articles on the PHP Chinese website!