echarts实现伪3d柱状图

options设置如下：

var xData = ["测试1", "测试2", "测试3", "测试4", "测试5", "测试6"]
var line = ["581", "870", "684","1568","608","2684"];
var attr ={
       'name':'月平均单价',
       'unit':'元/单'
}
var colors = []
option = {
   tooltip: {
       textStyle: {
        fontSize: 20
      },
      trigger: '',
      padding: 1,
        
      formatter: function(param) {
            
            var resultTooltip =
                "
" +
                "
" +  param.name + "
" +
                "
"+
                " " +attr.name + ": " +
                "" + param.value + "" + attr.unit + ""+
                "
" +
                "
";
            return resultTooltip
        }
    },
   
    grid: {
         left:"12%",
    right:'4%',
    top:'10%',
    bottom:"13%"
    },
    legend: {
        show: true,
        icon: 'circle',
        orient: 'horizontal',
        top: '90.5%',
        right: 'center',
        itemWidth: 16.5,
        itemHeight: 6,
        // itemGap: 30,
        textStyle: {
            color: '#C9C8CD',
            fontSize: 14
        }
    },
    xAxis: [{
        data: xData,
        axisLabel: {
            show:true,
            textStyle: {
                color: '#97ABEA',
                fontSize:12
            },
            margin: 10, //刻度标签与轴线之间的距离。
        },
 
        axisLine: {
            show: true, //不显示x轴
            lineStyle: {
                type: "solid",
                color: "#97ABEA"
            }
        },
        axisTick: {
            show: false //不显示刻度
        },
        boundaryGap: true,
        splitLine: {
            show: false,
            width: 0.08,
            lineStyle: {
                type: "solid",
                color: "#97ABEA"
            }
        }
    }],
    yAxis: [{
        show: true,
        splitLine: {
            show: true,
            lineStyle: {
                color: '#97ABEA',
                type: 'solid'
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: true,
            lineStyle: {
                type: "solid",
                color: "#97ABEA"
            }
        },
        axisLabel: {
            textStyle: {
                color: '#97ABEA'
            },
        }
    }],
    series: [
        {//柱底圆片
            name: "",
            type: "pictorialBar",
            symbolSize: [30, 11],//调整截面形状
            symbolOffset: [0, 5],
            z: 12,
            itemStyle: {
                    'normal':{
                        color: function(params){
                            var colorArr = [ '#C1232B','#B5C334',
                            '#FCCE10','#E87C25','#27727B',
                            '#FE8463','#9BCA63'];
                            return colorArr[params.dataIndex]
                        },
                    }
                },
            data: line
        }, 
        
        //柱体
        {
            name: '',
            type: 'bar',
            barWidth: 30,
            barGap: '0%',
            itemStyle: {
                    normal: {
                            color: function(params) {
 
                                        // build a color map as your need.
 
                                        var colorList = [
 
                                          '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
 
                                           '#FE8463','#9BCA63','#FAD860'
                                           
 
                                        ];
 
                                        return colorList[params.dataIndex]
 
                                    },
                            opacity: .7
                        }
                },
           
            data: line
        }, 
        
        //柱顶圆片
        {
            name: "",
            type: "pictorialBar",
            symbolSize: [30, 11],//调整截面形状
            symbolOffset: [0, -5],
            z: 12,
            symbolPosition: "end",
                "itemStyle": {
                    'normal':{
                        color: function(params){
                            var colorArr = [ '#C1232B','#B5C334',
                            '#FCCE10','#E87C25','#27727B',
                            '#FE8463','#9BCA63'];
                            return colorArr[params.dataIndex]
                        },
                    }
                },
            data: line
        }
    ]
};

效果图：

demo.png