echarts实现3d柱状图

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