var xdata=[];
var ydata=[''];
var data1 = [
{value:10,name:'1月'},
{value:1,name:'2月'},
{value:2,name:'3月'},
{value:3,name:'4月'},
{value:4,name:'5月'},
{value:5,name:'6月'},
{value:6,name:'7月'},
]
var hours = [0,1,2,3,4,5,6]
var data=echarts.util.map(data1, function(item, index) {
return {
//index值x值，2指示y值，item.value指z值。其中x值代表省的变化，z值代表信用的变化
value: [ index,2, item.value],
//柱状图的填充颜色
itemStyle:{
color:'#66D9EF'
}
}
})
for(var i=0;i<data1.length;i++){
xdata.push(data1[i].name);//获取省名
}
option = {
tooltip: {
type: ''
},
xAxis3D: {
type: 'category',
name: '',
data: xdata,
axisTick: {
show: true
},
nameTextStyle: {
color: that.echartsColor.textColor,
},
lineStyle: {
color: that.echartsColor.textColor,
width: 1,
type: "solid",
},
axisLine: {
lineStyle: {
color: that.echartsColor.textColor,
},
},
axisTick: {
// 坐标轴 刻度
show: true, // 是否显示
inside: true, // 是否朝内
length: 3, // 长度
lineStyle: {
// 默认取轴线的样式
color: that.echartsColor.textColor,
width: 1,
type: "solid",
},
},
axisLabel: {
// 坐标轴标签
show: false, // 是否显示
inside: false, // 是否朝内
rotate: 0, // 旋转角度
margin: 5, // 刻度标签与轴线之间的距离
color: that.echartsColor.textColor, // 默认取轴线的颜色
},
splitLine: {
// gird区域中的分割线
show: true, // 是否显示
lineStyle: {
color: that.echartsColor.textColor,
},
},
},
yAxis3D: {
type: 'category',
name: '',
data: ydata,
// axisTick: {
// show: false
// },
// axisLine: {
// lineStyle: {
// color: 'rgba(0,0,0,0)'
// }
// },
nameTextStyle: {
color: that.echartsColor.textColor,
},
lineStyle: {
color: that.echartsColor.textColor,
width: 1,
type: "solid",
},
axisLine: {
lineStyle: {
color: that.echartsColor.textColor,
},
},
axisTick: {
// 坐标轴 刻度
show: true, // 是否显示
inside: true, // 是否朝内
length: 3, // 长度
lineStyle: {
// 默认取轴线的样式
color: that.echartsColor.textColor,
width: 1,
type: "solid",
},
},
axisLabel: {
// 坐标轴的标签
show: true, // 是否显示
inside: false, // 是否朝内
rotate: 0, // 旋转角度
margin: 8, // 刻度标签与轴线之间的距离
color: that.echartsColor.textColor, // 默认轴线的颜色
formatter: "{value}",
},
splitLine: {
// gird区域中的分割线
show: false, // 是否显示
lineStyle: {
color: that.echartsColor.textColor,
},
},
},
zAxis3D: {
type: 'value',
name: '',
// axisTick: {
// show: false
// },
nameTextStyle: {
color: that.echartsColor.textColor,
},
lineStyle: {
color: that.echartsColor.textColor,
width: 1,
type: "solid",
},
axisLine: {
lineStyle: {
color: that.echartsColor.textColor,
},
},
axisTick: {
// 坐标轴 刻度
show: false, // 是否显示
inside: true, // 是否朝内
length: 3, // 长度
lineStyle: {
// 默认取轴线的样式
color: that.echartsColor.textColor,
width: 1,
type: "solid",
},
},
axisLabel: {
// 坐标轴标签
show: true, // 是否显示
inside: false, // 是否朝内
rotate: 0, // 旋转角度
margin: 15, // 刻度标签与轴线之间的距离
color: that.echartsColor.textColor, // 默认取轴线的颜色
},
splitLine: {
// gird区域中的分割线
show: true, // 是否显示
lineStyle: {
// color: '#1D2C5B',
color: that.echartsColor.textColor,
},
},
},
grid3D: {
boxWidth: 260,
boxDepth: 40,
zlevel: -10,
axisPointer: {
show: false
},
viewControl:{
beta:0,
// distance:200,
alpha:0
},
light: {
main: {
intensity: 1.2
},
ambient: {
intensity: 0.3
}
}
},
title: {
text: '电能耗分析',
textStyle:{
color: '#6cc2ff',//字体颜色
fontSize:22,
fontWeight:400
},
y:'5px',
x:'10px'
},
series: [{
type: 'bar3D',
name: '',
barSize: 11,
data: hours,
label: {
show: true,
textStyle: {
fontSize: 16,
borderWidth: 1,
color:'#fff'
}
},
itemStyle: {
// opacity: 0.4,
color:'rgba(33, 109, 196, 0.7)',
},
emphasis: {
label: {
textStyle: {
show:true,
fontSize: 20,
color: '#fff'
}
}
}
}]
}
效果图：
demo1.png
