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

冷不防 2022-12-27 14:14 474阅读 0赞

### 绘制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: {   
    							               color: '#4E566B', // 单个区域的颜色
    							           },
    							       }
    							       //......
    							 ],
    							
    							 //文字标签颜色
    				             label: {
    				                 show: true,
    								 textStyle: {
    								     color: 'rgba(255,255,255,0.3)',
    								     backgroundColor: '',
    									 fontSize: 14,
    									 fontWeight:600
    								 },
    				             },
    							 itemStyle: {},
    						
    				             emphasis: { //当鼠标放上去  地区区域是否显示名称
    				                 label: {
    				                     show: true,
    				                     textStyle: {
    				                         color: '#fff',
    				                         fontSize: 13,
    										 padding:14,
    										 lineHeight:18,
    				                         backgroundColor: 'rgba(119,136,153,0.3)'
    				                     },
    									 formatter: function (params) {
    									 	self.city=params.name;
    										let value=NaN
    										self.chartData.forEach(item=>{
    											if(item.name==params.name){
    												value=item.value
    											}
    										})
    									 	return params.name+'\n'+"项目数"+value ;
    									 },
    				                 },
    								  //高亮区块颜色
    								 itemStyle: {
    									 color: '#4FFFF5',
    									 shadowOffsetX:40,
    									 normal: {
    									   color: '#2842E3'//【无效】，本想添加鼠标键入后提示框前的圆形色块，欢迎大佬指点！
    									}
    								 },
    				             },
    				            series: [ //渲染地图
    				                {
    				                    type: 'map',
    				                    coordinateSystem: 'geo',
    				                },
    				            ]
    				         },
    				     })

#### 2.[highcharts][] => 绘制3D饼图 ####

3D饼图又要做到有延长线添加文字highcharts是最好上手的了，标题附官方文档超链接，下载和配置上面都讲的很详细。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phcWVuZW5lbg_size_16_color_FFFFFF_t_70]  
另外UI图实际的饼图有一个高低错落的效果，我有尝试在series.data每一项配置单独的slicedOffset(模块突起高度)发现无效，欢迎大佬们赐教！！  
![UI图效果][UI]

#### 3.echarts => 绘制3D堆叠柱状图 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phcWVuZW5lbg_size_16_color_FFFFFF_t_70 1]

(这部分是用echarts做，尽管hightcharts也有相同的demo，与我们公司设计有差于是没有采用，有相同设计的可以参考。最终效果如上，代码如下，[参考博文][Link 1]

this.chart = echarts.init(document.getElementById('device_setting_chart'))
    		       // 绘制图表
    		        this.chart.setOption({
    					tooltip: {
    					        trigger: 'axis',
    					        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
    					            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    					        }
    					},
    					grid: {
    						    show: true,
    						    left: '0%',
    						    right: '4%',
    						    bottom: '5%',
    						    containLabel: true,
    						    //最外边线不显示
    						    borderColor:'rgb(30,30,126)',
    						    top:'10%',
    						    right:56,
    						},
    						backgroundColor:'',
    						xAxis: {
    						    data: this.echartTime.reverse(),
    						    nameTextStyle:{
    						        //坐标轴右侧文字颜色
    						        color:'#6078C3',
    						    },
    						    //坐标轴与文字颜色
    						    axisLine:{
    						            lineStyle:{
    						                color:'#6078C3',
    										width: 0.4,
    						            }
    						    },
    						},
    						    yAxis: {
    						        nameTextStyle:{
    						            //坐标轴文字颜色
    						            color:'#6078C3',
    						        },
    								splitNumber:3,
    						        //坐标轴与文字颜色
    						        axisLine:{
    						                lineStyle:{
    						                    color:'#6078C3',
    											width: 0.4,
    						                }
    						        },
    						        splitLine: {
    						            show: true,
    						            lineStyle:{
    						               color: ['#6078C3'],
    						               width: 0.4,
    						               type: 'solid'
    						          }
    						    　　}
    						    },
    						    series: [
    								{ //配置项1
    									type: 'bar',
    									barWidth:8,
    									itemStyle:{
    										normal: {
    											// 左面立体图形的颜色
    											barBorderRadius:[0,0,0,180],
    										   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
    												offset: 0,
    												color: "#931622" // 0% 处的颜色
    											}, {
    												offset: 0.6,
    												color: "#CD2939" // 60% 处的颜色
    											}, {
    												offset: 1,
    												color: "#F83749" // 100% 处的颜色
    											}], false)
    										}
    									},
    									name:'在建项目',
    									data:this.data01.reverse(),
    								},{ 
    										name:'a',
    										tooltip:{
    										   show:false 
    										},
    										type: 'bar',
    										barWidth:8,
    										itemStyle:{ 
    											normal:{
    												 barBorderRadius:[0,0,180,0],
    												 // 右面立体图形的颜色
    												  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
    														offset: 0,
    														color: "#5E0A13" // 0% 处的颜色
    													}, {
    														offset: 0.6,
    														color: "#75121B" // 60% 处的颜色
    												}, {
    													offset: 1,
    													color: "#871922" // 100% 处的颜色
    												}], false)
    											 
    										}
    									},
    									data:this.data01.reverse(),
    									barGap:0
    								},{ 
    									name:'b',
    									tooltip:{
    									   show:false 
    									},
    									type: 'pictorialBar',
    									itemStyle: {
    										 normal: {
    											color: '#FD6872',  //上盖颜色
    											borderWidth:0,
    											borderColor:'#3c93fc'
    										}
    									},
    									symbol: 'diamond',
    									symbolRotate:0,
    									symbolSize: ['18','10'],
    									symbolOffset:['-48','-6'],
    									symbolPosition: 'end',
    									data:this.data01.reverse(),
    									z:3
    						},
    			//......省略其他相同柱状数据，按需配置即可
    					]
    		       });

[-]: /images/20221120/9b2b0a9fed3445459d2c836c276d91e7.png
[highcharts]: https://www.highcharts.com.cn/demo/highcharts/3d-pie
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phcWVuZW5lbg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201223154334461.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phcWVuZW5lbg==,size_16,color_FFFFFF,t_70
[UI]: https://img-blog.csdnimg.cn/20201211190218121.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phcWVuZW5lbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phcWVuZW5lbg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201223154356180.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phcWVuZW5lbg==,size_16,color_FFFFFF,t_70
[Link 1]: https://blog.csdn.net/qq_40049863/article/details/94742126