echarts 3D各省市区地图
时间: 2023-11-23 21:58:00 浏览: 39
以下是使用echarts 3D展示各省市区地图的方法:
1.首先需要准备好对应的地图json文件,例如山西省的json文件为shanxi.json。
2.使用echarts.registerMap()方法注册地图。
```javascript
echarts.registerMap('shanxi', shanJson);
```
3.在option中配置geo3D组件,设置对应的地图名称和数据。
```javascript
option = {
geo3D: {
map: 'shanxi',
itemStyle: {
color: '#1e90ff',
opacity: 1,
borderWidth: 0.4,
borderColor: '#000'
},
label: {
show: true,
textStyle: {
color: '#000',
fontSize: 16,
fontWeight: 'bold'
}
},
emphasis: {
label: {
show: true,
textStyle: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold'
}
},
itemStyle: {
color: '#00ff00',
opacity: 1
}
},
shading: 'lambert',
light: {
main: {
intensity: 1,
shadow: true,
alpha: 55,
beta: 10
},
ambient: {
intensity: 0.3
}
}
},
series: [{
type: 'scatter3D',
coordinateSystem: 'geo3D',
symbolSize: 10,
itemStyle: {
color: '#ff0000'
},
data: [
[112.549248, 37.857014, 0],
[112.556391, 37.857014, 0],
[112.563534, 37.857014, 0],
[112.570677, 37.857014, 0],
[112.57782, 37.857014, 0]
]
}]
};
```
4.将option配置项传入echarts实例中,即可展示3D地图。
```javascript
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
```