3D立体图分段柱状图echarts #0093a8配置项内容和展示

      let barData1=[100,101,81]
let barData2=[220,182,191]
let barData3=[150,80,40]

let pictorialBar=[]
let pictorialBar2=[]
for(let i=0;i< barData1.length;i++){
    pictorialBar.push(barData1[i]+barData2[i])
    pictorialBar2.push(barData1[i]+barData2[i]+barData3[i])
}

option = {
    title: {
        text: '3D立体图分段柱状图',
        x: 'center'
    },

    backgroundColor: '#fff',
    tooltip: {
        trigger: 'item',
    },
    xAxis: {
     
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#888'
            },
            margin: 20, //刻度标签与轴线之间的距离。
        },

    },
    yAxis: {
           data: ["入职", "离职", "培训"],
        splitLine: {
            show: true,
            lineStyle: {
                color: '#eee',
                type: 'solid'
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
             margin:20,
            textStyle: {
                color: '#888',
                fontSize:20,
                
            },
        }
    },
    series: [
        // 第一个底
        {//三个最低下的圆片
            "name": "",
            "type": "pictorialBar",
            "symbolSize": [15, 50],
            "symbolOffset": [-7, 0],
            "z": 12,
              itemStyle: {//lenged文本
                color: '#0093a8',
            },
            
            "data":barData1
        }, 
        
        
        //下半截柱状图
        {
            name: '2020',
            type: 'bar',
            barWidth: 50,
            barGap: '-100%',
            itemStyle: {//lenged文本
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                       "color": "rgba(19,204,204,0.8)"
                    },
                    {
                        offset: 1,
                         "color": "rgba(19,204,204,0.8)"
                    }
                ])
            },
           
            data: barData1
        }, 
        
        
        
         // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20 
        { // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20 
            type: 'bar',
            barWidth: 50,
            barGap: '-100%',
            stack: '广告',
            itemStyle: {
                color: 'transparent'
            },
            data: barData1
        },
        
         {
            "name": "",
            "type": "pictorialBar",
            "symbolSize": [20, 50],
            "symbolOffset": [ 7 , 0],
             "symbolPosition": "end",
            "z": 12,
             itemStyle: {//lenged文本
                color:'#00ffff',
            },
            "data": barData1
        },
        
        

       
        
        {
            name: '2019',
            type: 'bar',
            barWidth: 50,
            barGap: '-100%',
            stack: '广告',
            itemStyle: {
                // barBorderRadius: 20, 
                color: "rgba(253,69,0,0.7)"
            },
            //上班截开始
            data: barData2
        },
                {
            "name": "", //头部
            "type": "pictorialBar",
            "symbolSize": [20, 50],
            "symbolOffset": [ 7 , 0 ],
             "symbolPosition": "end",
            
            "z": 12,
                itemStyle: {//lenged文本
                color: '#fd4500'
            },
            "data": pictorialBar
        },
        
        
         {
            name: '2019',
            type: 'bar',
            barWidth: 50,
            barGap: '-100%',
            stack: '广告',
            itemStyle: {
                // barBorderRadius: 20, 
                color:"rgba(153,153,153,0.8)"
            },
            //上班截开始
            data: barData3
        },
         {
            "name": "", //头部
            "type": "pictorialBar",
            "symbolSize": [15, 50],
            "symbolOffset": [7,0],
             "symbolPosition": "end",
            
            "z": 12,
                itemStyle: {//lenged文本
                color:"#999999"
            },
            "data": pictorialBar2
        },
        
        
        
        
      
        
        
        
        


    ]
};