代码
提交代码
<!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 = { toolbox: { feature: { saveAsImage: {} } }, geo: { map: 'USA', roam: true, // 设定布局中心点位置 layoutCenter: ['50%', '40%'], // 设定坐标系大小 layoutSize: 420, }, 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>
运行结果