echarts地图立体效果
时间: 2023-08-27 16:07:16 浏览: 80
ECharts地图支持立体效果,可以通过设置3D属性来实现。以下是一个简单的例子:
```javascript
option = {
tooltip: {},
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本,默认为数值文本
calculable: true
},
xAxis3D: {},
yAxis3D: {},
zAxis3D: {},
grid3D: {
boxWidth: 200,
boxDepth: 80,
viewControl: {
// projection: 'orthographic'
},
light: {
main: {
intensity: 1.2,
shadow: true
},
ambient: {
intensity: 0.3
}
}
},
series: [{
type: 'bar3D',
data: [
[0, 0, 0, 5],
[0, 1, 0, 1],
[0, 2, 0, 2],
[0, 3, 0, 1],
[0, 4, 0, 1],
[0, 5, 0, 3],
[1, 0, 0, 2],
[1, 1, 0, 4],
[1, 2, 0, 7],
[1, 3, 0, 2],
[1, 4, 0, 2],
[1, 5, 0, 6]
],
shading: 'lambert',
label: {
textStyle: {
fontSize: 16,
borderWidth: 1
}
},
emphasis: {
label: {
textStyle: {
fontSize: 20,
color: '#900'
}
},
itemStyle: {
color: '#900'
}
}
}]
};
```
这个例子展示了一个3D柱状图,可以通过设置不同的数据来展示不同的地图数据。其中,grid3D属性用来设置3D场景的相关参数,series属性中的type为bar3D表示使用3D柱状图展示数据。通过调整这些参数可以实现不同的3D效果。
阅读全文