echarts 多个3D柱状图

本文主要是介绍echarts 多个3D柱状图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

图片样式：

在这里插入图片描述

代码实现：


<template><div :class="className" :style="{height:height,width:width}" />
</template><script>
require("echarts/theme/sakura"); // echarts themeexport default {props: {className: {type: String,default: "chart",},width: {type: String,default: "100%",},height: {type: String,default: "100%",},},components: {},data() {return {chart: null,};},watch: {},created() {},mounted() {this.initChart();},computed: {},methods: {initChart() {//组织数据let setData = function (data, constData, showData) {data.filter(function (item) {if (item) {constData.push(1);showData.push(item);} else {constData.push(0);showData.push({value: 1,itemStyle: {normal: {borderColor: "rgba(0,0,0,0)",borderWidth: 2,color: "rgba(0,0,0,0)",},},});}});};//组织颜色let setColor = function (colorArr) {let color = {type: "linear",x: 0,x2: 1,y: 0,y2: 0,/* 此处决定阴暗面 若为横向柱状图则x,y轴调换x: 0,x2: 0,y: 0,y2: 1, */colorStops: [{offset: 0,color: colorArr[0],},{offset: 0.5,color: colorArr[0],},{offset: 0.5,color: colorArr[1],},{offset: 1,color: colorArr[1],},],};return color;};var vehicle = [20, 49, 70, 232, 256];var controlBall = [2.6, 5.9, 9.0, 20.4, 21.7];var barWidth = 30;var constData1 = [];var showData1 = [];var constData2 = [];var showData2 = [];setData(vehicle, constData1, showData1);setData(controlBall, constData2, showData2);var colorArr1 = ["#345A8B", "#387ABD", "#51C0DB"];var colorArr2 = ["#51C0DB", "#42D9D6", "#45F5F1"];var color1 = setColor(colorArr1);var color2 = setColor(colorArr2);this.chart = this.$echarts.init(this.$el, "sakura");this.chart.setOption({title: {x: "center",y: 4,text: "AAAA",textStyle: {color: "#fff",fontSize: "15",fontFamily: "微软雅黑",fontWeight: "bold",},},tooltip: {trigger: "axis",backgroundColor: "rgba(255,255,255,0.7)",textStyle: {color: "#000", // 自定义文字颜色fontSize: 16, // 自定义文字大小},},grid: {y: 80,y2: 40,x: 40,x2: 50,},legend: {data: ["数量", "时间（天）"],x: "center",top: "10%",itemWidth: 20,itemHeight: 9,textStyle: {fontSize: 11,color: "#fff",},},toolbox: {show: false,feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: ["line", "bar"] },restore: { show: true },saveAsImage: { show: true },},},calculable: true,xAxis: [{type: "category",data: ["曲靖", "玉溪", "大理", "昆明", "瑞丽"],boundaryGap: true, //控制x轴的数值是否顶头，默认为true留空，false则顶头axisLine: {//x轴的样式控制show: true, //显示与否lineStyle: {//线条样式// color: "#fff",width: 1,// type: "solid",},},axisLabel: {//控制x轴上的文字的样式show: true, //显示与否textStyle: { color: "#fff", fontSize: 12 }, //控制x轴字体样式//   formatter: "{value} °C", //轴上的数据带单位interval: 0,},},],yAxis: [{type: "value",axisLabel: {//控制y轴上的文字的样式show: true, //显示与否textStyle: { color: "#fff", fontSize: 9 }, //控制x轴字体样式// margin: 5,},splitLine: {lineStyle: {// 使用深浅的间隔色color: "#22376d",},},},],series: [{z: 1,type: "bar",name: "数量",barGap: "15%", //相邻柱子间距itemStyle: {borderRadius: [0, 0, 0, 0], //柱子四周圆角color: color1, //柱子左右颜色（深，浅）},label: {show: true,position: "top",textStyle:{color:"#fff"}},data: vehicle,},// ---------------------------------------------{z: 2,name: "数量",type: "pictorialBar",data: constData1, //此数据对应底部组件symbol: "diamond", //底部组件形状，不写默认为椭圆symbolOffset: ["-58%", "50%"], //与柱子的偏移角度symbolSize: [21, 10], //底面[宽，高]itemStyle: {normal: {color: color1, //底面左右颜色（深，浅）},},tooltip: {show: false,},},{z: 3,name: "数量",type: "pictorialBar",symbolPosition: "end",data: showData1, //此数据对应顶部组件symbol: "diamond",symbolOffset: ["-50%", "-47%"],symbolSize: [barWidth - 7, (10 * (barWidth - 7)) / barWidth],itemStyle: {normal: {/* borderColor: colorArr1[2],borderWidth: 2, */ //加上棱角分明color: colorArr1[2],},},tooltip: {show: false,},},{z: 1,type: "bar",name: "时间（天）",itemStyle: {borderRadius: [0, 0, 0, 0],color: color2,},data: controlBall,},{z: 2,name: "时间（天）",type: "pictorialBar",data: constData2,symbol: "diamond",symbolOffset: ["50%", "40%"],symbolSize: [25, 10],itemStyle: {normal: {color: color2,},},tooltip: {show: false,},},{z: 3,name: "时间（天）",type: "pictorialBar",symbolPosition: "end",data: showData2,symbol: "diamond",symbolOffset: ["55%", "-50%"],symbolSize: [barWidth - 7, (10 * (barWidth - 7)) / barWidth],itemStyle: {normal: {/* 	borderColor: colorArr2[2],borderWidth: 2, */color: colorArr2[2],},},tooltip: {show: false,},},],});},},
};
</script>
<style lang='scss' scoped>
</style>