Vue3+ts实现用echarts实现3D柱状图

终于实现啦!!!!!!!!!!!!!!!!!!!!!!!!!!!

作为小白来说,我收到这个需求的时候有点懵逼,疯狂的还是上网搜啊,搜了好多方法,修修改改的,出不来,终于!出来啦

记录一下这个伟大的瞬间我的完整的是这样的:

第一步:在html中要有一个容器吧

<div ref="visualizingContentCenterTop" style="height: 100%"></div>

第二步:定义变量内容

// 定义变量内容
const visualizingContentCenterTop = ref();

第三步:从后端得到数据并且绘制图像,其中你们只需要从"//绘制左侧面"看到"myChart.setOption(option);"前面那个括号就行啦,至于前面的是我自己从后端获得数据,以及需要做的处理

// 设备类型统计
const xData: any[] = [];
const data: any[] = [];
const mactypenameList = ref();
// const mactypenameList = ref(null);
const initVisualizingContentCenterTop = () => {
	const getmactype = async () => {
		try {
			const items = await pagetbMacTypeInfo({ page: 1, pageSize: 36, })
			mactypenameList.value = items.data.result.items
			getMacTypeCount().then((res) => {
				const re = res.data.result
				for (let i = 0; i < re.length; i++) {
					for (let k = 0; k < mactypenameList.value.length; k++) {
						if (re[i].type == mactypenameList.value[k].typeID) {
							if (!xData.includes(mactypenameList.value[k].typeName)) {
								xData.push(mactypenameList.value[k].typeName)
								data.push(re[i].count)
							}
						} else if (re[i].type == "-1") {
							if (!xData.includes("综合设备")) {
								xData.push("综合设备")
								data.push(re[i].count)
							}
						} else {
							if (!xData.includes("未知类型")) {
								xData.push("未知类型")
								data.push(re[i].count)
							}
						}
					}
				}
				const myChart = echarts.init(visualizingContentCenterTop.value);
				const min = 100;
				const max = 1000;
				// 绘制左侧面
				const CubeLeft = echarts.graphic.extendShape({
					shape: {
						x: 0,
						y: 0
					},
					buildPath: function (ctx, shape) {
						// 会canvas的应该都能看得懂，shape是从custom传入的
						const xAxisPoint = shape.xAxisPoint
						const c0 = [shape.x + 7, shape.y]
						const c1 = [shape.x - 23, shape.y - 6]
						const c2 = [xAxisPoint[0] - 23, xAxisPoint[1] - 13]
						const c3 = [xAxisPoint[0] + 7, 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 + 7, shape.y]
						const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]]
						const c3 = [xAxisPoint[0] + 25, xAxisPoint[1] - 15]
						const c4 = [shape.x + 25, shape.y - 15]
						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 + 7, shape.y]
						const c2 = [shape.x + 25, shape.y - 15] //右点
						const c3 = [shape.x - 5, shape.y - 20]
						const c4 = [shape.x - 23, shape.y - 6]
						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 option = {
					backgroundColor: "transparent",
					title: {
						text: '',
						textStyle: {
							color: '#7ebaf2',
							fontWeight: '800',
							fontSize: 12,
						},
						left: '18px',
						top: '1%'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						formatter: function (params: any, ticket: any, callback: any) {
							const item = params[1]
							return item.name + ' : ' + item.value;
						}
					},
					grid: {
						left: '5%',
						right: '5%',
						top: '12%',
						bottom: '5%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: xData,
						axisLine: {
							show: true,
							// lineStyle: {
							// 	color: '#7ebaf2'
							// }
						},
						axisTick: {
							show: false,
							length: 9,
							alignWithLabel: true,
							// lineStyle: {
							// 	color: '#7DFFFD'
							// }
						},
						axisLabel: {
							fontSize: 12
						}
					},
					yAxis: {
						type: 'value',
						min: 0,
						axisLine: {
							show: false,
							// lineStyle: {
							// 	color: '#7ebaf2'
							// }
						},
						splitLine: {
							show: false
						},
						splitArea: {
							show: false,
							areaStyle: {
								// color: [
								// 	"rgba(26,50,83,1)",
								// 	"rgba(30,57,92,1)",
								// ]
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							fontSize: 12
						},
						boundaryGap: ['20%', '20%']
					},
					series: [{
						type: 'custom',
						renderItem: (params: any, api: any) => {
							let cubeLeftStyle = ref('') as any
							let cubeRightStyle = ref('') as any
							let cubeTopStyle = ref('') as any
							if (params.dataIndex == 0) {
								cubeLeftStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(0,255,186,1)'
								}, {
									offset: 1,
									color: 'rgba(0,148,109,1)'
								}])
								cubeRightStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(0,255,186,0.3)'
								}, {
									offset: 1,
									color: 'rgba(0,148,109,0.3)'
								}])
								cubeTopStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(189,255,237,1)'
								}, {
									offset: 1,
									color: 'rgba(189,255,237,1)'
								}])
							} else if (params.dataIndex == 1) {
								cubeLeftStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(222,231,235,1)'
								}, {
									offset: 1,
									color: 'rgba(141,153,165,1)'
								}])
								cubeRightStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(222,231,235,0.3)'
								}, {
									offset: 1,
									color: 'rgba(222,231,235,0.3)'
								}])
								cubeTopStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(255,255,255,1)'
								}, {
									offset: 1,
									color: 'rgba(255,255,2555,1)'
								}])

							} else if (params.dataIndex == 2) {
								cubeLeftStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(62,255,255,1)'
								}, {
									offset: 1,
									color: 'rgba(0,126,191,1)'
								}])
								cubeRightStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(23,176,255,1)'
								}, {
									offset: 1,
									color: 'rgba(0,138,255,0.3)'
								}])
								cubeTopStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(163,232,255,1)'
								}, {
									offset: 1,
									color: 'rgba(163,232,255,1)'
								}])
							} else if (params.dataIndex == 3) {
								cubeLeftStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(255,217,217,1)'
								}, {
									offset: 1,
									color: 'rgba(180,97,97,1)'
								}])
								cubeRightStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(178,95,95,0.3)'
								}, {
									offset: 1,
									color: 'rgba(89,47,47,0.3)'
								}])
								cubeTopStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(255,217,217,1)'
								}, {
									offset: 1,
									color: 'rgba(255,217,217,1)'
								}])
							}
							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: data
					}, {
						type: 'bar',
						label: {
							normal: {
								show: true,
								position: 'top',
								fontSize: 14,
								color: '#fff',
								offset: [2, -25]
							}
						},
						itemStyle: {
							color: 'transparent'
						},
						tooltip: {

						},
						data: data
					}]

				};

				myChart.setOption(option);
				state.myCharts.push(myChart);
			})
		} catch (error) {
		}

	}
	getmactype()
};

第四步:在页面一加载的时候;

// 页面加载时
onMounted(async () => {
	
	await initVisualizingContentCenterTop();
})

参考的代码在这里:点击查看