<html style="height: 100%"> <head> <meta charset="utf-8"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <style type="text/css"> html, body { margin: 0; padding: 0; height: 100%; box-sizing: border-box; } #container { width: 100%; height: 100%; } </style> </head> <body> <div id="container"></div> </body> <script src="./js/echarts.min.js"></script> <script src="./js/echarts-gl.min.js"></script> <script type="text/javascript"> // 獲取元素 let dom = document.getElementById("container"); // 初始化echarts let myChart = echarts.init(dom); // 地球數據顯示 let ds = [{ name: '中國', point: [116.46, 39.92, 0], itemStyleColor: '#f00', labelText: '中國•3000' }, { name: '印度', point: [78.96288, 20.593684, 0], itemStyleColor: '#99CC66', labelText: '印度•500' }, { name: '意大利', point: [12.56738, 41.87194, 0], itemStyleColor: '#9999FF', labelText: '意大利•200' }, { name: '新西蘭', point: [174.885971, -40.900557, 0], itemStyleColor: '#339966', labelText: '新西蘭•10' }, { name: '英國', point: [-3.435973, 55.378051, 0], itemStyleColor: '#993366', labelText: '英國•1000' }, { name: '德國', point: [10.451526, 51.165691, 0], itemStyleColor: '#996666', labelText: '德國•200' }, { name: '美國', point: [-95.712891, 37.09024, 0], itemStyleColor: '#66CCFF', labelText: '美國•2200' }, { name: '日本', point: [138.252924, 36.204824, 0], itemStyleColor: '#666666', labelText: '日本•2500' }] // 點配置信息 let series = ds.map(item => { return { name: item.name, // 是否顯示左上角圖例 type: 'scatter3D', coordinateSystem: 'globe', blendMode: 'lighter', symbolSize: 16, // 點位大小 itemStyle: { color: item.itemStyleColor, // 各個點位的顏色設置 opacity: 1, // 透明度 borderWidth: 1, // 邊框寬度 borderColor: 'rgba(255,255,255,0.8)' //rgba(180, 31, 107, 0.8) }, label: { show: true, // 是否顯示字體 position: 'left', // 字體位置。top、left、right、bottom formatter: item.labelText, // 具體顯示的值 textStyle: { color: '#fff', // 字體顏色 borderWidth: 0, // 字體邊框寬度 borderColor: '#fff', // 字體邊框顏色 fontFamily: 'sans-serif', // 字體格式 fontSize: 18, // 字體大小 fontWeight: 700 // 字體加粗 } }, data: [item.point] // 數據來源 } }) // 添加上面的配置項到地球上 myChart.setOption({ // 圖例設置 legend: { selectedMode: 'multiple', x: 'right', y: 'bottom', data: ds.map(item => { return item.name // 數據來源 }), padding: [0, 550, 140, 0], // 填充位置,上、右、下、左 orient: 'vertical', // 排列方式，vertical:垂直排列 textStyle: { color: '#fff', // 文字顏色 } }, // 地球背景色 backgroundColor: '#2E2677', // 地球參數設置 globe: { baseTexture: './image/bg4.jpg', // 地球表面覆蓋的圖片,可以替換成自己想要的圖片 shading: 'color', // 地球中三維圖形的着色效果 viewControl: { autoRotate: true, // 是否開啟視角繞物體的自動旋轉查看 autoRotateSpeed: 3, //物體自轉的速度,單位為角度 / 秒，默認為10 ，也就是36秒轉一圈。 autoRotateAfterStill: 2, // 在鼠標靜止操作后恢復自動旋轉的時間間隔,默認 3s rotateSensitivity: 2, // 旋轉操作的靈敏度，值越大越靈敏.設置為0后無法旋轉。[1, 0]只能橫向旋轉.[0, 1]只能縱向旋轉 targetCoord: [116.46, 39.92], // 定位到北京 maxDistance: 200, minDistance: 200 } }, // 地球文字顯示信息配置 series: series }) </script> </html>
代碼中引入的js和圖片可以從我的碼雲中獲取，源碼地址：https://gitee.com/szxio/echarts-realize-3-d-earth
靜態效果圖
動態效果圖
