vue中使用echarts实现3d双色柱状图

效果图：

引入：

import * as echarts from 'echarts'

布局：

 <div id="bar3d" style="height: 260px;width:580px;margin: 0 auto;"></div>

具体实现代码：

 mounted() {
      this.initChart()
    },

 methods:{
	    initChart() {
        //绿色
        const data = [1700,800, 1700, 600,800,1700,800,1700,1700,800,1700,800];
        //蓝色
        const data2 = [2600,1400, 3350, 1400, 1400, 3350, 1400, 3350, 2600,1400,3350,1400];
        const sideData = data.map(item => item + 90);
        const sideData2 = data.map(item => item + 90);
	      var serveTBar = echarts.init(document.getElementById('bar3d'));
        serveTBar.setOption(getEcharts3DBar());
     
        function getEcharts3DBar () {
          //左侧 右侧 顶部
          //蓝色
			 var colorArr2 = ["rgba(11, 83, 128)", "rgba(2, 143, 224)", "rgba(11, 83, 128)"];
       //绿色
       var colorArr = ["rgb(12, 109, 122)", "rgba(1, 241, 228)", "rgb(12, 109, 122)"];
       //绿色
			 var color = {
				 type: "linear",
				 x: 0,
				 x2: 1,
				 y: 0,
				 y2: 0,
				 colorStops:  [
					 {
						 offset: 0,
						 color: colorArr[0],
					 },
					 {
						 offset: 0.5,
						 color: colorArr[0],
					 },
					 {
						 offset: 0.5,
						 color: colorArr[1],
					 },
					 {
						 offset: 1,
						 color: colorArr[1],
					 },
				 ],
			 };
       var color2 = {
				 type: "linear",
				 x: 0,
				 x2: 1,
				 y: 0,
				 y2: 0,
				 colorStops:  [
					 {
						 offset: 0,
						 color: colorArr2[0],
					 },
					 {
						 offset: 0.5,
						 color: colorArr2[0],
					 },
					 {
						 offset: 0.5,
						 color: colorArr2[1],
					 },
					 {
						 offset: 1,
						 color: colorArr2[1],
					 },
				 ],
			 };
       //柱子宽度
			 var barWidth = 15;
			 var option = {
				 tooltip: {
					 trigger: 'axis',
					 formatter: function (params) {
						 var str = params[0].name + ":";
						 params.filter(function (item) {
							 if (item.componentSubType == "bar") {
								 str += "<br/>" + item.seriesName + "：" + item.value;
							 }
						 });
						 return str;
					 },
				 },
         //图表大小位置限制
				 grid:{
					 x:'10%',
					 x2:'5%',
					 y:'15%',
					 y2:'15%',
				 },
				//  legend: {
				// 	 show:false,
				// 	 data:['绿色','蓝色'],
				// 	 textStyle:{
				// 		 color:'#fff',
				// 		 fontSize:'20'
				// 	 }
				//  },
				 xAxis: {
					 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月','10月','11月','12月'],
					 //坐标轴
					 axisLine :{
						 show:true,
						 lineStyle: {
							 width: 1,
							 color: '#214776'
						 },
						 textStyle:{
							 color:'#fff',
							 fontSize:'10'
						 }
					 },
					 type : 'category',
					 axisLabel :{
						 textStyle:{
							 color: '#C5DFFB',
							 fontWeight: 500,
							 fontSize:'14'
						 }
					 },
					 axisTick  :{
						 textStyle:{
							 color:'#fff',
							 fontSize:'16'
						 },
						 show: false,
					 },
           axisLine: {
                //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                    type:'dashed',//线的类型 虚线
                    color: '#DEDEDE',
                },
            },
				 },
				 yAxis: {
          name: '厂屋租凭统计：',
            nameTextStyle: {
                color: '#DEDEDE',
                fontSize: 12,
                padding: 10,
            },
            min: 0,//最小
            max: 3500,//最大
            interval: 500,//相差
					 type : 'value',
           splitLine: {
                show: true,
               lineStyle: {
                     type:'dashed',//线的类型 虚线0
                     opacity:0.2//透明度
                },
            },
					 axisTick  :{
						 show:false
					 },
            axisLine: {
                show: false,
            },
					 //坐标值标注
					 axisLabel: {
						 show: true,
						 textStyle: {
							 color: '#C5DFFB',
						 }
					 },
				 },
				 series: [
          //中
					 {
						 z: 1,
						 name: '绿色',
						 type: "bar",
						 barWidth: barWidth,
						 barGap: "0%",
						 data: data,
						 itemStyle: {
               normal: {
                color: color,
                //柱形图上方标题
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: 'rgb(1, 255, 250)',
                    fontSize: 8
                  }
                },
              }
						 },
					 },
           //下
					 {
						 z: 2,
						 name: '绿色',
						 type: "pictorialBar",
						 data: sideData,
						 symbol: "diamond",
						 symbolOffset: ["-75%", "50%"],
						 symbolSize: [barWidth, 10],
						 itemStyle: {
							 normal: {
								 color: color
							 },
						 },
						 tooltip: {
							 show: false,
						 },
					 },
           //上
					 {
						 z: 3,
						 name: '绿色',
						 type: "pictorialBar",
						 symbolPosition: "end",
						 data: data,
						 symbol: "diamond",
						 symbolOffset: ["-75%", "-50%"],
						 symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
						 itemStyle: {
							 normal: {
								 borderWidth: 2,
								 color: colorArr[2]
							 },
						 },
						 tooltip: {
							 show: false,
						 },
					 },
					 {
						 z: 1,
						 name: '蓝色',
						 type: "bar",
						 barWidth: barWidth,
						 barGap: "50%",
						 data: data2,
						 itemStyle: {
              normal: {
                color: color2,
                //柱形图上方标题
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: 'rgb(2, 157, 246)',
                    fontSize: 8
                  }
                },
              }
						 },
					 },
					 {
						 z: 2,
						 name: '蓝色',
						 type: "pictorialBar",
						 data: sideData2,
						 symbol: "diamond",
						 symbolOffset: ["75%", "50%"],
						 symbolSize: [barWidth, 10],
						 itemStyle: {
							 normal: {
								 color: color2
							 },
						 },
						 tooltip: {
							 show: false,
						 },
					 },
					 {
						 z: 3,
						 name: '蓝色',
						 type: "pictorialBar",
						 symbolPosition: "end",
						 data: data2,
						 symbol: "diamond",
						 symbolOffset: ["75%", "-50%"],
						 symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
						 itemStyle: {
							 normal: {
								 borderWidth: 2,
								 color: colorArr2[2]
							 },
						 },
						 tooltip: {
							 show: false,
						 },
					 },
				 ],
			 };
			 return option;
		 }
	    },
    },

有人知道如何改成从上到下的那种渐变么 ε=(´ο｀*)))唉