ECharts 实现3D重叠椭圆柱状图

亦凉 2023-10-05 11:29 31阅读 0赞

#### 1 实现代码（3D重叠椭圆柱状图） ####

<body>
        
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
    		var xData = ["优良率", "达标率"];
    		var yData = [50, 87.3];
    		var shadowYData=[100,100];
    		var color="#19dfdd";
    		var shadowColor="#0b5767";
    		var barWidth=50;
    		var option = {
    			backgroundColor: '#05233b',
    			"grid": {
    				"top": "25%",
    				"left": "-5%",
    				"bottom": "5%",
    				"right": "5%",
    				"containLabel": true
    			},
    			animation: false,
    			"xAxis": [{
    				"type": "category",
    				"data": xData,
    				"axisTick": {
    					"alignWithLabel": true
    				},
    				"nameTextStyle": {
    					"color": "#82b0ec"
    				},
    				"axisLine": {
    					show: false,
    					"lineStyle": {
    						"color": "#82b0ec"
    					}
    				},
    				"axisLabel": {
    					"textStyle": {
    						"color": color
    					},
    					margin: 30
    				}
    			}],
    			"yAxis": [{
    				show: false,
    				"type": "value",
    				"axisLabel": {
    					"textStyle": {
    						"color": "#fff"
    					},
    				},
    				"splitLine": {
    					"lineStyle": {
    						"color": "#0c2c5a"
    					}
    				},
    				"axisLine": {
    					"show": false
    				}
    			}],
    			"series": [
    				{
    					"name": "数据上椭圆",
    					type: 'pictorialBar',
    					symbolSize: [barWidth, 10],
    					symbolOffset: [0, -6],
    					symbolPosition: 'end',
    					z: 12,
    					"label": {
    						"normal": {
    							"show": true,
    							"position": "top",
    							fontSize: 14,
    							color: color,
    							formatter:function(params,index){
    								return params.value+"%";
    							}
    						}
    					},
    					color: "#2DB1EF",
    					data: yData
    				},
    				{
    					name: '',
    					type: 'pictorialBar',
    					symbolSize: [barWidth, 10],
    					symbolOffset: [0, 7],
    					z: 12,
    					"color": color,
    					"data": yData
    				},
    				{
    					name: '',
    					type: 'pictorialBar',
    					symbolSize: [barWidth+5, 15],
    					symbolOffset: [0, 12],
    					z: 10,
    					itemStyle: {
    						normal: {
    							color: 'transparent',
    							borderColor: color,
    							borderType: 'solid',
    							borderWidth: 1
    						}
    					},
    					data: yData
    				},
    				{
    					name: '',
    					type: 'pictorialBar',
    					symbolSize: [barWidth+10, 20],
    					symbolOffset: [0, 18],
    					z: 10,
    					itemStyle: {
    						normal: {
    							color: 'transparent',
    							borderColor: color,
    							borderType: 'solid',
    							borderWidth: 2
    						}
    					},
    					data: yData
    				},
    				{
    					type: 'bar',
    					"barWidth": barWidth,
    					barGap: '10%', // Make series be overlap
    					barCateGoryGap: '10%',
    					itemStyle: {
    						normal: {
    							color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
    									offset: 0,
    									color: "rgba(25,223,221,.7)"
    								},
    								{
    									offset: 1,
    									color: "rgba(25,223,221,.3)"
    								}
    							]),
    						},
    					},
    					data: yData
    				},
    				{
    					"name": "阴影椭圆",
    					type: 'pictorialBar',
    					symbolSize: [barWidth, 10],
    					symbolOffset: [0, -6],
    					symbolPosition: 'end',
    					z: 12,
    					"label": {
    						"show": false,
    					},
    					color: shadowColor,
    					data: shadowYData
    				},
    				{
    					name:"阴影柱体",
    					type: 'bar',
    					"barWidth": barWidth,
    					barCateGoryGap: '10%',
    					"zlevel": -1,
    					"barGap": "-100%",
    					itemStyle: {
    						color: shadowColor
    					},
    					data: shadowYData
    				},
    			]
    		};
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>

#### 2 最终效果图（3D重叠椭圆柱状图） ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201011171103258.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70