Cara menggunakan peta untuk memaparkan data dalam ECharts-tutorial js-php.cn

Cara menggunakan peta untuk memaparkan data dalam ECharts

WBOY

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

asal

1622 orang telah melayarinya

Cara menggunakan peta untuk memaparkan data dalam ECharts

ECharts ialah alat visualisasi data yang berkuasa yang menyokong pelbagai jenis carta, termasuk carta garisan, carta bar, carta pai, dsb. Antaranya, carta peta merupakan komponen penting dalam ECharts dan boleh digunakan untuk memaparkan pengedaran data di pelbagai wilayah. Artikel ini akan memperkenalkan cara menggunakan fungsi peta dalam ECharts dan memberikan contoh kod terperinci.

Sebelum kita mula, kita perlu menyediakan fail berikut:

echarts.min.js: fail perpustakaan teras ECharts.
china.js: Fail data peta China yang dipratentukan dalam ECharts, digunakan untuk melukis peta China.
Fail data: Fail data yang kami sediakan sendiri adalah dalam format JSON dan mengandungi data untuk setiap wilayah.

Mula-mula, perkenalkan fail yang diperlukan dalam fail HTML:

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

Salin selepas log masuk

Seterusnya, tulis kod dalam fail JavaScript:

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

Salin selepas log masuk

Dalam kod di atas, kami mula-mula mencipta a melalui echarts.init kaedah Petakan contoh dan ikatkannya pada elemen DOM yang ditentukan. Kemudian, kami mengkonfigurasi gaya dan data peta dengan menetapkan parameter option. Dalam siri, kami menetapkan jenis peta kepada map dan menentukan data peta. echarts.init方法来创建一个地图实例，并将其绑定到指定的DOM元素上。然后，我们通过设置option参数来配置地图的样式和数据。在series中，我们设置了地图的类型为map，并指定了地图的数据。

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

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

Akhir sekali, kami menggunakan myChart.setOption(option) untuk menggunakan item konfigurasi pada contoh peta untuk memaparkan peta.

Perlu diingat bahawa kami hanya menyediakan sebahagian daripada data dalam kod. Anda perlu mengisi data dan menyesuaikan konfigurasi yang berkaitan mengikut situasi sebenar anda. Pada masa yang sama, anda boleh memaparkan peta wilayah lain dengan mengubah suai data peta dalam fail china.js. 🎜🎜Pada ketika ini, kami telah menyelesaikan operasi menggunakan peta untuk memaparkan data dalam ECharts. Melalui konfigurasi yang teliti dan pengisian data, anda boleh mencapai kesan paparan peta yang lebih kaya dan pelbagai. Saya harap artikel ini dapat membantu kajian dan latihan anda! 🎜

Atas ialah kandungan terperinci Cara menggunakan peta untuk memaparkan data dalam ECharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!