Home > Article > Web Front-end > How to use maps to display data in ECharts

How to use maps to display data in ECharts

WBOYOriginal: 2023-12-18 16:09:341567browse

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>

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);

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!

JavaScript json echarts html map JS dom

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use maps to display data in HighchartsNext article：How to use maps to display data in Highcharts

See more

How to use maps to display data in ECharts

Related articles