代码
提交代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <title>Echarts Example</title> </head> <body> <div id="main" style="width: 600px;height: 400px"></div> <script src="//cdn.bootcss.com/axios/0.19.2/axios.min.js"></script> <script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script> <script type="text/javascript"> async function run() { const myChart = echarts.init(document.getElementById('main')); const usaGeo = await axios.get('//cdn.jsdelivr.net/gh/VanMess/echart-wiki-examples@1.0.0/11_geo/USA.json'); echarts.registerMap('USA', usaGeo.data, { Alaska: { // 把阿拉斯加移到美国主大陆左下方 left: -131, top: 25, width: 15, }, Hawaii: { left: -110, // 夏威夷 top: 28, width: 5, }, 'Puerto Rico': { // 波多黎各 left: -76, top: 26, width: 2, }, }); const option = { geo: { map: 'USA', // 声明允许缩放与拖拽 roam: true, scaleLimit: { // 声明最小缩放比例 min: 1, // 声明最大缩放比例 max: 6, }, }, series: [ { type: 'scatter', coordinateSystem: 'geo', data: [ [-87.359296, 35.00118, 24], [-90.064905, 36.304691, 12], [-98.311367, 34.995703, 18], [-123.129194, 38.451652, 48], ], symbolSize: function (val) { return val[2]; }, }, ], }; myChart.setOption(option); } run(); </script> </body> </html>
运行结果