ECharts 实现3D重叠椭圆柱状图_echart 3d柱状图重合-CSDN博客

本文链接：https://blog.csdn.net/qq_38974638/article/details/109014076

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

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <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>