<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 测试</title> <!-- 引入 echarts.js --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script> <!-- 引入 jquery.js --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <style> body{ background-color: black; } #main{ background-color: rgb(11,18,46); } </style> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的元素 --> <div id="main" style=" 800px;height:800px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); myChart.showLoading(); // 地图数据源：https://datav.aliyun.com/tools/atlas/ $.get('https://geo.datav.aliyun.com/areas_v2/bound/geojson?code=150600_full', function (geoJson) { myChart.hideLoading(); echarts.registerMap('EEDS', geoJson); myChart.setOption(option = { title: { text: '情况统计', subtext: '统计截至：2021-04-25 12:32:21', textAlign: 'right', right: -150, bottom: 20, textStyle: { color: 'white' }, subtextStyle: { color: 'white' } }, // 相关配置文档：https://echarts.apache.org/zh/option.html#series-map series: [ { name: '情况统计', type: 'map', center: [108.97269199999997, 39.26688099244878], // 当前视角的中心点 zoom: 1.2, // 当前视角的缩放比例 roam: true, // 是否开启平游或缩放 scaleLimit: { // 滚轮缩放的极限控制 min: 1,
max: 2
}, mapType: 'EEDS', label: { show: true, color: 'rgb(255, 255, 255)' }, itemStyle: { areaColor: 'rgba(0, 0, 200, 0)', borderColor: 'rgb(255, 255, 255)' }, data: [ ] } ] }); }); </script> </body> </html>