绘制3D Echarts地图 饼图 堆叠柱状图

绘制3D Echarts

目前在项目中遇到过的3D echarts为:
1.3D饼图(圆环图)
2.3D区域地图
3.3D堆叠柱状图。
先上效果-地图

1.echarts + echarts-gl => 绘制3D地图

npm install echarts
npm install echarts-gl

//配置项代码 , this.chartData为我导入的随州市json数据
echarts.registerMap('随州市', this.suiZhou,this.chartData);
				let self=this;
				this.chart.setOption({
				         visualMap: [{
				             type: 'continuous',
				             show: false,
				             seriesIndex: 0,
				             text: ['bar3D'],
				             calculable: true,
				             max: 30,
				         }],
						backgroundColor:'',
				         geo3D: {
				             map: '咸宁市',
							 top:'-10%',//地图位置
							 bottom:'2%',
							 left:'0%',//地图位置
				             roam: true,
							  //三维视觉属性
				             itemStyle: {
				                 opacity: 1,
				                 borderWidth: 0.8,
				                 borderColor: '#147CBF'
				             },
						    viewControl: {
						        distance: 130,//  控制初始大小
						        alpha:60, //绕x轴旋转的角度(上下旋转),增大,视角顺时针增大(向上)
						    },
							regionHeight: 5,//地图厚度
							regions: [//      可对单个地图区域进行设置
							       {  
							           name: '随县',  
							           itemStyle: {   
					
  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值