echarts实现3D效果柱状图

echarts3D效果柱状图的实现

这个太难了，我花了两天终于调成我想要的效果啦~，开心，要是官网上有例子就好了，太难调了。不过功夫不负有心人，话不多说，看代码吧

效果图：

html代码

<div id="jczy_bar" :canvas="3D" style="height: 240px;width:600px;margin: 0 auto;"></div>

JS代码

// 调用
var serveTBar = echarts.init(document.getElementById('jczy_bar'));
serveTBar.setOption(getEcharts3DBar();

 const data = [1360,1320, 732, 701];
 const data2 = [500,800, 900, 360];
 const sideData = data.map(item => item + 90);
 const sideData2 = data.map(item => item + 90);
function getEcharts3DBar () {
			 var colorArr = ["#0C628C", "#3887D5", "#2570BB"];
			 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 barWidth = 30;
			 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:'7%',
					 x2:'0%',
					 y:'15%',
					 y2:'15%',
				 },
				 legend: {
					 show:false,
					 data:['本期','同期'],
					 textStyle:{
						 color:'#fff',
						 fontSize:'20'
					 }
				 },
				 xAxis: {
					 data: ['毕节市','七星关区','大方县','黔西县'],
					 //坐标轴
					 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,
					 },
					 splitLine: {show:false}
				 },
				 yAxis: {
					 type : 'value',
					 //坐标轴
					 axisLine :{
						 show:true,
						 lineStyle: {
							 width: 1,
							 color: '#214776'
						 },
						 textStyle:{
							 color:'#fff',
							 fontSize:'10'
						 }
					 },
					 axisTick  :{
						 show:false
					 },
					 //坐标值标注
					 axisLabel: {
						 show: true,
						 textStyle: {
							 color: '#C5DFFB',
						 }
					 },
					 //分格线
					 splitLine: {
						 lineStyle: {
							 color: '#13365f'
						 }
					 }
				 },
				 series: [
					 {
						 z: 1,
						 name: '本期',
						 type: "bar",
						 barWidth: barWidth,
						 barGap: "0%",
						 data: data,
						 itemStyle: {
							 normal: {
								 color: color
							 },
						 },
					 },
					 {
						 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: color
							 },
						 },
					 },
					 {
						 z: 2,
						 name: '同期',
						 type: "pictorialBar",
						 data: sideData2,
						 symbol: "diamond",
						 symbolOffset: ["75%", "50%"],
						 symbolSize: [barWidth, 10],
						 itemStyle: {
							 normal: {
								 color: color
							 },
						 },
						 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: colorArr[2]
							 },
						 },
						 tooltip: {
							 show: false,
						 },
					 },
				 ],
			 };
			 return option;
		 }

提示：
1、柱状图的柱的宽barWidth给了一个固定的值30，如果改动这个值时柱子形状变形了，只需要调整series每一个对象中的symbolOffset的值；
2、这个是双柱状图，series数组中前3个元素为 “本期” 柱状图，后面三个为 “同期” 柱状图。
3、每个柱子都由上中下三部分组成，因此series需要定义的元素较多。对于 “本期” 柱状图来说series[0]为柱子的主体部分，series[1]为柱子的底部，series[2]为柱子的顶部，以此类推。
4、为了达到整体性的效果，每个柱状图的三部分颜色需要达到统一。

您学废了吗？