使用ECharts生成交互式地圖數(shù)據(jù)的HTML教程
ECharts是一個由百度開發(fā)的強(qiáng)大的開源可視化庫，特別適合創(chuàng)建各種圖表和地圖。下面我將介紹如何使用ECharts在HTML中生成交互式地圖數(shù)據(jù)可視化。 首先，我們創(chuàng)建一個基本的HTML文件結(jié)構(gòu)： 在 實際應(yīng)用中，我們通常從服務(wù)器異步加載數(shù)據(jù)。下面是一個模擬異步加載的示例： 如果你想展示世界地圖，需要額外引入世界地圖的JS文件： 然后修改series中的map配置： 通過以上步驟，你可以輕松地在HTML中使用ECharts創(chuàng)建交互式地圖數(shù)據(jù)可視化。ECharts提供了豐富的配置選項，你可以根據(jù)需要調(diào)整顏色、提示框、圖例等元素，創(chuàng)建出專業(yè)級的數(shù)據(jù)可視化效果。基本HTML結(jié)構(gòu)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ECharts地圖示例</title> <!-- 引入ECharts庫 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> <!-- 引入中國地圖數(shù)據(jù) --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/map/js/china.js"></script> <style> #map-container { width: 100%; height: 600px; } </style> </head> <body> <h1>中國各省份數(shù)據(jù)可視化</h1> <div id="map-container"></div> <script> // 這里將放置我們的ECharts代碼 </script> </body> </html>初始化ECharts實例
<script>標(biāo)簽中，我們初始化ECharts實例：// 基于準(zhǔn)備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('map-container')); // 指定圖表的配置項和數(shù)據(jù) var option = { title: { text: '中國各省份示例數(shù)據(jù)', subtext: '模擬數(shù)據(jù)展示', left: 'center' }, tooltip: { trigger: 'item', formatter: '<br/>{c} (模擬值)' }, visualMap: { min: 0, max: 1000, text: ['高', '低'], realtime: false, calculable: true, inRange: { color: ['#50a3ba', '#eac736', '#d94e5d'] } }, series: [{ name: '模擬數(shù)據(jù)', type: 'map', map: 'china', emphasis: { label: { show: true } }, data: [ {name: '北京', value: 934}, {name: '天津', value: 743}, {name: '上海', value: 1023}, {name: '重慶', value: 567}, {name: '河北', value: 456}, {name: '河南', value: 378}, {name: '云南', value: 289}, {name: '遼寧', value: 654}, {name: '黑龍江', value: 432}, {name: '湖南', value: 345}, {name: '安徽', value: 321}, {name: '山東', value: 543}, {name: '新疆', value: 187}, {name: '江蘇', value: 765}, {name: '浙江', value: 876}, {name: '江西', value: 234}, {name: '湖北', value: 432}, {name: '廣西', value: 321}, {name: '甘肅', value: 198}, {name: '山西', value: 345}, {name: '內(nèi)蒙古', value: 276}, {name: '陜西', value: 387}, {name: '吉林', value: 456}, {name: '福建', value: 543}, {name: '貴州', value: 234}, {name: '廣東', value: 987}, {name: '青海', value: 123}, {name: '西藏', value: 98}, {name: '四川', value: 654}, {name: '寧夏', value: 176}, {name: '海南', value: 287}, {name: '臺灣', value: 432}, {name: '香港', value: 765}, {name: '澳門', value: 154} ] }] }; // 使用剛指定的配置項和數(shù)據(jù)顯示圖表 myChart.setOption(option); // 響應(yīng)式調(diào)整 window.addEventListener('resize', function() { myChart.resize(); });高級功能：異步數(shù)據(jù)加載
// 模擬異步數(shù)據(jù)加載 function fetchData(callback) { // 實際項目中這里應(yīng)該是AJAX或Fetch請求 setTimeout(function() { var data = [ {name: '北京', value: Math.round(Math.random() * 1000)}, {name: '天津', value: Math.round(Math.random() * 1000)}, {name: '上海', value: Math.round(Math.random() * 1000)}, // 其他省份數(shù)據(jù)... ]; callback(data); }, 1000); } // 使用異步數(shù)據(jù) fetchData(function(data) { myChart.setOption({ series: [{ data: data }] }); });世界地圖示例
<!-- 在head中添加 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/map/js/world.js"></script>
series: [{ name: '世界數(shù)據(jù)', type: 'map', map: 'world', // 其他配置... data: [ {name: 'China', value: 1345}, {name: 'United States', value: 987}, {name: 'Japan', value: 765}, // 其他國家數(shù)據(jù)... ] }]完整示例代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ECharts地圖示例</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/map/js/china.js"></script> <style> #map-container { width: 800px; height: 600px; margin: 0 auto; } body { font-family: Arial, sans-serif; text-align: center; } </style> </head> <body> <h1>中國各省份數(shù)據(jù)可視化</h1> <div id="map-container"></div> <script> // 初始化圖表 var myChart = echarts.init(document.getElementById('map-container')); // 配置項 var option = { title: { text: '中國各省份數(shù)據(jù)分布', subtext: '數(shù)據(jù)僅供參考', left: 'center' }, tooltip: { trigger: 'item', formatter: '<br/>數(shù)值: {c}' }, legend: { orient: 'vertical', left: 'left', data: ['數(shù)據(jù)'] }, visualMap: { min: 0, max: 1000, text: ['高', '低'], realtime: false, calculable: true, inRange: { color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'] } }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, series: [ { name: '數(shù)據(jù)', type: 'map', map: 'china', roam: true, emphasis: { label: { show: true } }, data: [ {name: '北京', value: 934}, {name: '天津', value: 743}, {name: '上海', value: 1023}, {name: '重慶', value: 567}, {name: '河北', value: 456}, {name: '河南', value: 378}, {name: '云南', value: 289}, {name: '遼寧', value: 654}, {name: '黑龍江', value: 432}, {name: '湖南', value: 345}, {name: '安徽', value: 321}, {name: '山東', value: 543}, {name: '新疆', value: 187}, {name: '江蘇', value: 765}, {name: '浙江', value: 876}, {name: '江西', value: 234}, {name: '湖北', value: 432}, {name: '廣西', value: 321}, {name: '甘肅', value: 198}, {name: '山西', value: 345}, {name: '內(nèi)蒙古', value: 276}, {name: '陜西', value: 387}, {name: '吉林', value: 456}, {name: '福建', value: 543}, {name: '貴州', value: 234}, {name: '廣東', value: 987}, {name: '青海', value: 123}, {name: '西藏', value: 98}, {name: '四川', value: 654}, {name: '寧夏', value: 176}, {name: '海南', value: 287}, {name: '臺灣', value: 432}, {name: '香港', value: 765}, {name: '澳門', value: 154} ] } ] }; // 使用配置項顯示圖表 myChart.setOption(option); // 響應(yīng)式調(diào)整 window.addEventListener('resize', function() { myChart.resize(); }); </script> </body> </html>總結(jié)
冀公網(wǎng)安備