echarts3d地图散点
时间: 2023-09-25 10:06:53 浏览: 189
你可以使用 ECharts 3D 地图来绘制散点图。下面是一个简单的示例代码,可以帮助你开始:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 3D 地图散点示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px; height: 600px;"></div>
<script type="text/javascript">
// 初始化 ECharts 实例
var chart = echarts.init(document.getElementById('chart'));
// 配置项
var option = {
tooltip: {},
visualMap: {
min: 0,
max: 100,
calculable: true,
inRange: {
color: ['blue', 'green', 'yellow', 'red']
}
},
geo3D: {
map: 'world',
shading: 'lambert',
environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: '#000214' // 天空颜色
}, {
offset: 1, color: '#000214' // 地面颜色
}]),
light: {
main: {
intensity: 1.2,
shadowQuality: 'high',
shadow: true,
alpha: 30,
beta: 30
},
ambientCubemap: {
texture: 'data-gl/asset/canyon.hdr',
exposure: 1,
diffuseIntensity: 0.5,
specularIntensity: 2
}
}
},
series: [{
name: '散点',
type: 'scatter3D',
coordinateSystem: 'geo3D',
symbolSize: 10,
data: [
{ value: [139.6917, 35.6895, 85] }, // 东京
{ value: [-74.0059, 40.7128, 60] }, // 纽约
{ value: [114.3055, 30.5928, 70] }, // 武汉
{ value: [103.8198, 1.3521, 50] } // 新加坡
]
}]
};
// 使用配置项显示图表
chart.setOption(option);
</script>
</body>
</html>
```
在这个示例中,我们使用了 ECharts 的 `scatter3D` 系列来绘制散点图,并结合了 `geo3D` 坐标系来显示在地球上。你可以根据自己的需求修改 `data` 数组中的散点位置和数值,以及调整其他的配置项。
请注意,为了运行这个示例,你需要在 `<head>` 标签中引入 ECharts 的 JavaScript 文件。你可以通过在 `<script>` 标签中使用 `src` 属性来引入特定版本的 ECharts JavaScript 文件。
希望这个示例能帮助到你!如有其他问题,请随时提问。
阅读全文