数据分析echarts 柱状配置项内容和展示

       var gain = 0.9;
    var gap = 0;
    var myColor=['#e63810','#ff6b00','#e3b61f','#13b5b1'];
    var myBgColor=['rgba(230,56,16,0.2)','rgba(255,107,0,0.2)','rgba(227,182,31,0.2)','rgba(19,181,177,0.2)'];
    //柱子数据
    var data = [8, 15, 10,6];
    var option = {
       backgroundColor:'rgba(0,0,0,0.8)',
            grid: {
                left: '3%',
                top:'10%',
                right: '2%',
                bottom: '5%',
                containLabel: true
            },
            xAxis: [{
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    axisLine:{
                                  lineStyle:{
                                      color:'rgba(160,160,160,0.3)',
                                  }
                              },
                    axisLabel:{
                        textStyle:{
                            color:function(param,index){
                                return myColor[index]
                            },
                            fontSize:13*gain,
                        }
                    },
                    data: ['01','02','03','04']
                }, {
                    type: 'category',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    data: []
                },
            ],
            yAxis: {
                type: 'value',
                name:'单位：件',
                nameGap:35+gap,
                nameTextStyle:{
                    color:'#ffffff',
                    fontSize:16*gain,
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                splitLine: {
                    lineStyle:{
                        color:'rgba(160,160,160,0.3)',
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: 'rgba(255,255,255,0.8)',
                        fontSize:14*gain,
                    }
                }
            },
            series: [{
                    type: 'bar',
                    xAxisIndex: 1,
                    itemStyle: {
                        normal: {
                            show: true,
                            color: function(params) {
                                var num=myBgColor.length;
                                return myBgColor[params.dataIndex%num]
                            },
                            barBorderRadius: 50,
                            borderWidth: 0,
                            borderColor: '#333',
                        }
                    },
                    label:{
                        normal:{
                           show:true,
                           formatter: function(params) {
                            var stuNum = 0;
                            data.forEach(function(value, index, array) {
                                if (params.dataIndex == index) {
                                   stuNum = value;
                                }
                            })
                            return stuNum ;
                          },
                          position: 'top',
                          textStyle:{
                              color:function(params) {
                                var num=myBgColor.length;
                                return myBgColor[params.dataIndex%num]
                            },
                              fontSize:25*gain,
                          }
                        }
                    },
                    barWidth: '25%',
                    data: [33, 33, 33,33]
                }, 
                {
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            show: true,
                            color: function(params) {
                                var num=myColor.length;
                                return myColor[params.dataIndex%num]
                            },
                            barBorderRadius: 50,
                            borderWidth: 0,
                            borderColor: '#333',
                        }
                    },
                    label: {
                        normal: {
                            show: false,

                        }
                    },
                    barWidth: '25%',
                    data: data
                }
            ]
    };