Heim > Artikel > Web-Frontend > So verwenden Sie Karten zur Anzeige von Daten in ECharts

So verwenden Sie Karten zur Anzeige von Daten in ECharts

WBOYOriginal: 2023-12-18 16:09:341565Durchsuche

So verwenden Sie Karten zum Anzeigen von Daten in ECharts

ECharts ist ein leistungsstarkes Datenvisualisierungstool, das eine Vielzahl von Diagrammtypen unterstützt, darunter Liniendiagramme, Balkendiagramme, Kreisdiagramme usw. Darunter sind Kartendiagramme ein wichtiger Bestandteil von ECharts und können zur Darstellung der Datenverteilung in verschiedenen Regionen verwendet werden. In diesem Artikel wird die Verwendung der Kartenfunktion in ECharts vorgestellt und detaillierte Codebeispiele gegeben.

Bevor wir beginnen, müssen wir die folgenden Dateien vorbereiten:

echarts.min.js: die Kernbibliotheksdatei von ECharts.
china.js: Die vordefinierte China-Kartendatendatei in ECharts, die zum Zeichnen von China-Karten verwendet wird.
Datendatei: Die von uns selbst erstellte Datendatei liegt im JSON-Format vor und enthält Daten für jede Region.

Fügen Sie zunächst die erforderlichen Dateien in die HTML-Datei ein:

<!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>

Als nächstes schreiben Sie den Code in die JavaScript-Datei:

// 创建地图实例
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);

Im obigen Code erstellen wir zunächst einen über den echarts.init method Ordnen Sie die Instanz zu und binden Sie sie an das angegebene DOM-Element. Anschließend konfigurieren wir den Stil und die Daten der Karte, indem wir die Parameter option festlegen. In series setzen wir den Kartentyp auf map und geben die Kartendaten an. echarts.init方法来创建一个地图实例，并将其绑定到指定的DOM元素上。然后，我们通过设置option参数来配置地图的样式和数据。在series中，我们设置了地图的类型为map，并指定了地图的数据。

最后，我们使用myChart.setOption(option)将配置项应用到地图实例上，从而实现地图的展示。

需要注意的是，我们在代码中只给出了部分数据，你需要根据自己的实际情况填充数据并调整相关的配置。同时，你可以通过修改china.js

Schließlich verwenden wir myChart.setOption(option), um das Konfigurationselement auf die Karteninstanz anzuwenden, um die Karte anzuzeigen.

Es ist zu beachten, dass wir nur einen Teil der Daten im Code bereitstellen. Sie müssen die Daten ausfüllen und die zugehörigen Konfigurationen entsprechend Ihrer tatsächlichen Situation anpassen. Gleichzeitig können Sie Karten anderer Regionen anzeigen, indem Sie die Kartendaten in der Datei china.js ändern. 🎜🎜Zu diesem Zeitpunkt haben wir die Verwendung von Karten zur Anzeige von Daten in ECharts abgeschlossen. Durch sorgfältige Konfiguration und Datenbefüllung können Sie reichhaltigere und vielfältigere Kartenanzeigeeffekte erzielen. Ich hoffe, dass dieser Artikel für Ihr Studium und Ihre Praxis hilfreich sein kann! 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Karten zur Anzeige von Daten in ECharts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript json echarts html map JS dom

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie Karten zur Anzeige von Daten in HighchartsNächster Artikel：So verwenden Sie Karten zur Anzeige von Daten in Highcharts

In Verbindung stehende Artikel

Mehr sehen