<!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="width: 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>
相关文章：