echarts 3d立体多色柱状图

 

"echarts": "^5.2.0",    "echarts-gl": "^2.0.8",vue:2.6

<template>
	<div :class="className" :style="{height:height,width:width}" id="myChartnl" />
</template>

<script>
	import $ from 'jquery';
	import * as echarts from 'echarts';
	import resize from '@/utils/resize.js'
	import 'echarts-gl';
	export default {
		mixins: [resize],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '24vw'
			},
			height: {
				type: String,
				default: '21vh'
			},
			chartData: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				timer: 0,
			}
		},
		watch: {
			chartData: {
				deep: true,
				handler(val) {
					this.setOption(val)
				}
			}
		},
		mounted() {
			this.initChart();
		},
		beforeDestroy() {},
		methods: {
			initChart() {
				var myChart = echarts.init(document.getElementById('myChartnl'));
				const yData = [120, 150, 80, 110, 90]
				// 指定图表的配置项和数据
				const offsetX = 15;
				const offsetY = 7;
				// 绘制左侧面
				const CubeLeft = echarts.graphic.extendShape({
					shape: {
						x: 0,
						y: 0,
					},
					buildPath: function(ctx, shape) {
						// 会canvas的应该都能看得懂，shape是从custom传入的
						const xAxisPoint = shape.xAxisPoint;
						// console.log(shape);
						const c0 = [shape.x, shape.y];
						const c1 = [shape.x - offsetX, shape.y - offsetY];
						const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
						const c3 = [xAxisPoint[0], xAxisPoint[1]];
						ctx
							.moveTo(c0[0], c0[1])
							.lineTo(c1[0], c1[1])
							.lineTo(c2[0], c2[1])
							.lineTo(c3[0], c3[1])
							.closePath();
					},
				});
				// 绘制右侧面
				const CubeRight = echarts.graphic.extendShape({
					shape: {
						x: 0,
						y: 0,
					},
					buildPath: function(ctx, shape) {
						const xAxisPoint = shape.xAxisPoint;
						const c1 = [shape.x, shape.y];
						const c2 = [xAxisPoint[0], xAxisPoint[1]];
						const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
						const c4 = [shape.x + offsetX, shape.y - offsetY];
						ctx
							.moveTo(c1[0], c1[1])
							.lineTo(c2[0], c2[1])
							.lineTo(c3[0], c3[1])
							.lineTo(c4[0], c4[1])
							.closePath();
					},
				});
				// 绘制顶面
				const CubeTop = echarts.graphic.extendShape({
					shape: {
						x: 0,
						y: 0,
					},
					buildPath: function(ctx, shape) {
						const c1 = [shape.x, shape.y];
						const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
						const c3 = [shape.x, shape.y - offsetX];
						const c4 = [shape.x - offsetX, shape.y - offsetY];
						ctx
							.moveTo(c1[0], c1[1])
							.lineTo(c2[0], c2[1])
							.lineTo(c3[0], c3[1])
							.lineTo(c4[0], c4[1])
							.closePath();
					},
				});
				// 注册三个面图形
				echarts.graphic.registerShape("CubeLeft", CubeLeft);
				echarts.graphic.registerShape("CubeRight", CubeRight);
				echarts.graphic.registerShape("CubeTop", CubeTop);

				const xName = [];
				var option = {

					tooltip: {
						show: false,
						trigger: 'item',
						// formatter: function(parms) {
						// 	return parms.name + ':' + parms.value + "%";
						// }
					},
					legend: {
						show: false
					},
					backgroundColor: 'rgba(255, 255, 255, 0)', //设置无背景色		
					grid: {
						left: '10%',
						right: '4%',
						bottom: '25%',
						top: '5%',
						// y轴刻度上文字与Dom边界保留距离
						containLabel: false
					},
					xAxis: {
						type: 'category',
						boundaryGap: ['0', '5%'],
						// boundaryGap: false,
						splitLine: {
							show: false
						},
						axisLabel: {
							color: "#8590A4",
							textStyle: {
								fontSize: 12,

							},
							interval: 0, //坐标全部显示
						},
						/*网格线*/
						axisLine: {
							// 轴线
							show: true,
							lineStyle: {
								color: "#56678D", //y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
								width: 1, //y轴线的宽度
								type: "solid" //y轴线为实线
							},
							// color: '#268C8C',
						},
						data: ['60后', '70后', '80后', '90后', '00后'],
					},
					yAxis: {
						type: 'value',

						boundaryGap: false,
						min: 0,
						max: 250,
						splitNumber: 5,
						axisTick: {
							// 轴刻度
							show: false,
						},
						axisLabel: {
							color: "#8590A4",
							textStyle: {
								fontSize: 12,
								fontWeight: 400,

							},
						},
						splitLine: {
							// 网格线
							show: true,
							lineStyle: { //分割线
								color: "#30436D",
								width: 1,
								type: "dashed" //dotted：虚线 solid:实线
							}

						},
						axisLine: {
							// 轴线
							show: false,
						},
					},

					series: [{
							type: "custom",
							renderItem: (params, api) => {
								let cubeLeftStyle = "";
								let cubeRightStyle = "";
								let cubeTopStyle = "";
								if (params.dataIndex == 0) {
									cubeLeftStyle = "rgba(255,235,59,0.8)";//前面
									cubeRightStyle = "rgba(255,235,59,0.5)";//右侧
									cubeTopStyle = "#FFEB3B";//顶部
								} else if (params.dataIndex == 1) {
									cubeLeftStyle = "rgba(255,141,26,0.8)";
									cubeRightStyle = "rgba(255,141,26,0.5)";
									cubeTopStyle = "#FF8D1A";
								} else if (params.dataIndex == 2) {
									cubeLeftStyle = " rgba(67,207,124,0.8)";
									cubeRightStyle = "rgba(67,207,124,0.5)";
									cubeTopStyle = "#43CF7C";
								} else if (params.dataIndex == 3) {
									cubeLeftStyle = "rgba(121,72,234,0.8)";
									cubeRightStyle = "rgba(121,72,234,0.5)";
									cubeTopStyle = "#7948EA";
								} else if (params.dataIndex == 4) {
									cubeLeftStyle = "rgba(255,87,51,0.8)";
									cubeRightStyle = "rgba(255,87,51,0.5)";
									cubeTopStyle = "#FF5733";
								}
								const location = api.coord([api.value(0), api.value(1)]);
								return {
									type: "group",
									children: [{
											type: "CubeLeft",
											shape: {
												api,
												xValue: api.value(0),
												yValue: api.value(1),
												x: location[0],
												y: location[1],
												xAxisPoint: api.coord([api.value(0), 0]),
											},
											style: {
												fill: cubeLeftStyle,
											},
										},
										{
											type: "CubeRight",
											shape: {
												api,
												xValue: api.value(0),
												yValue: api.value(1),
												x: location[0],
												y: location[1],
												xAxisPoint: api.coord([api.value(0), 0]),
											},
											style: {
												fill: cubeRightStyle,
											},
										},
										{
											type: "CubeTop",
											shape: {
												api,
												xValue: api.value(0),
												yValue: api.value(1),
												x: location[0],
												y: location[1],
												xAxisPoint: api.coord([api.value(0), 0]),
											},
											style: {
												fill: cubeTopStyle,
											},
										},
									],
								};
							},
							data: yData,
						},
						{
							type: "bar",
							label: {
								normal: {
									show: true,
									position: "top",
									fontSize: 14,
									color: "#fff",
									offset: [2, -15],
								},
							},
							itemStyle: {
								color: "transparent",
							},
							tooltip: {},
							data: [{
									value: yData[0],
									label: {
										textStyle: {
											color: "#fff"
										},
									},
								},
								{
									value: yData[1],
									label: {
										textStyle: {
											color: "#fff"
										},
									},
								},
								{
									value: yData[2],
									label: {
										textStyle: {
											color: "#fff"
										},
									},
								},
								{
									value: yData[3],
									label: {
										textStyle: {
											color: "#fff"
										},
									},
								},
								{
									value: yData[4],
									label: {
										textStyle: {
											color: "#fff"
										},
									},
								},
								{
									value: yData[5],
									label: {
										textStyle: {
											color: "#fff"
										},
									},
								}
							],
						}
					]
				}
				myChart.setOption(option);
				window.addEventListener('resize', function() {
					myChart.resize()
				})
				// window.addEventListener('resize', myChart.resize);


			},


		}
	}
</script>