柱状叠加echarts pictorialBar配置项内容和展示

       var option = {
     backgroundColor: '#323a5e',
     tooltip: {
         trigger: 'axis',
         axisPointer: { // 坐标轴指示器，坐标轴触发有效
             type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
         }
     },
     grid: {
         left: '2%',
         right: '4%',
         bottom: '14%',
         top: '16%',
         containLabel: true
     },
     legend: {
         data: ['1', '2', '3'],
         right: 10,
         top: 12,
         textStyle: {
             color: "#fff"
         },
         itemWidth: 12,
         itemHeight: 10,
         // itemGap: 35
     },
     xAxis: [{
         type: 'category',
         data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020'],
         axisLine: {
             lineStyle: {
                 color: 'white'

             }
         },
         axisLabel: {
             // interval: 0,
             // rotate: 40,
             textStyle: {
                 fontFamily: 'Microsoft YaHei'
             }
         },
     }, {
         //  type: 'category',
         data: [...Array(100).keys()],
         axisLine: {
             lineStyle: {
                 color: 'white'

             }
         },
         offset: 20,
         position: 'bottom',
         axisLabel: {
             // interval: 0,
             // rotate: 40,
             textStyle: {
                 fontFamily: 'Microsoft YaHei'
             }
         },
     }],

     yAxis: [{
         type: 'value',
         axisLine: {
             show: false,
             lineStyle: {
                 color: 'white'
             }
         },
         splitLine: {
             show: true,
             lineStyle: {
                 color: 'rgba(255,255,255,0.3)'
             }
         },
         axisLabel: {}
     }, {
         type: 'value',
         axisLine: {
             show: false,
             lineStyle: {
                 color: 'white'
             }
         },
         splitLine: {
             show: true,
             lineStyle: {
                 color: 'rgba(255,255,255,0.3)'
             }
         },
         axisLabel: {}
     }],
     graphic: {
         elements: [{
             type: 'rect',
             shape: {
                 x: 10,
                 y: 0,
                 width: 8,
                 height: 40,
             },
             style: {
                 fill: '#a40000',
             },
         }]
     },
     series: [{
             name: '2',
             type: 'pictorialBar',
             stack: 'type2',
             barGap: '-100%',
             barWidth: '25%',
             xAxisIndex: 1,
             yAxisIndex: 1,
             itemStyle: {
                 normal: {
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                         offset: 0,
                         color: '#8bd46e'
                     }, {
                         offset: 1,
                         color: '#09bcb7'
                     }]),
                     barBorderRadius: 11,
                 }

             },
             data: [...Array(100).keys()].map((v) => {
                 return Math.random() * 1000
             })
         },
         {
             name: '1',
             type: 'bar',
             stack: 'type1',
             barWidth: '15%',
             xAxisIndex: 0,
             yAxisIndex: 0,
             itemStyle: {
                 normal: {
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                         offset: 0,
                         color: '#fccb05'
                     }, {
                         offset: 1,
                         color: '#f5804d'
                     }]),
                     barBorderRadius: 12,
                 },
             },
             data: [1400, 400, 1300, 300, 300, 400, 400, 2400, 300]
         }
     ]
 };