分区对比堆叠图echarts 柱状配置项内容和展示

       const title = ['北京一区','北京二区','北京三区','北京四区'],
       v1s = [110,156,223,123],  v2s = [89,112,223,234],
       v3s = [120,190,234,236],  v4s = [123,256,234,347],
       v5s = [100,239,112,178],  v6s = [78,188,248,123];
option = {
        legend: {
          data: ['堂食实收金额(元)', '外卖实收金额(元)'],
          bottom: 10,
          itemHeight: 7,
          itemWidth: 7,
          icon: 'rect',
          itemStyle: {
            color: 'inherit'
          },
          textStyle: {
            color: '#333333',
            fontSize: 10
          }
        },
        grid: {
          top: 40,
          left: 60,
          bottom: 85,
          right: 10
        },
        xAxis: [
          {
            axisTick: {
              length: 40,
              lineStyle: {color: '#ccc'}
            },
            axisLine: {
              lineStyle: {color: 'transparent'}
            },
            data: title
          },
          {
            name: '',
            position: 'bottom',
            offset: 20,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#535252',
              fontSize: 11
            },
            data: title
          },
        ],
        yAxis: {
          axisLine: {
            lineStyle: {color: '#ccc'}
          },
          axisLabel: {
            textStyle: {
              color: '#333',
              fontSize: 10
            }
          }
        },
        series: [
          {
            type: 'bar',
            name: '堂食实收金额(元)',
            stack: 'SS',
            data: v1s,
            barGap: '15%',
            itemStyle: {
              color: 'rgba(48,103,131,0.4)'
            },
            label: {
              color: 'blue',
              normal: {
                show: true,
                position: 'bottom',
                textStyle: {
                  color: '#000',
                  fontSize: 10
                },
                formatter: '去年同期',
              }
            }
          },
          {
            type: 'bar',
            name: '外卖实收金额(元)',
            stack: 'SS',
            barGap: '15%',
            itemStyle: {
              color: 'rgba(235,125,49,.4)'
            },
            data: v2s,
          },
          {
            type: 'bar',
            stack: 'AA',
            barGap: '15%',
            name: '堂食实收金额(元)',
            itemStyle: {
              color: 'rgba(48,103,131,.7)'
            },
            data: v3s,
            label: {
              normal: {
                show: true,
                position: 'bottom',
                textStyle: {
                  color: '#000',
                  fontSize: 10
                },
                formatter: '上月同期',
              }
            }
          },
          {
            type: 'bar',
            stack: 'AA',
            barGap: '15%',
            name: '外卖实收金额(元)',
            itemStyle: {
              color: 'rgba(235,125,49,.7)'
            },
            data: v4s,
          },
          {
            type: 'bar',
            stack: 'NN',
            barGap: '15%',
            name: '堂食实收金额(元)',
            itemStyle: {
              color: 'rgba(48,103,131,1)'
            },
            data: v5s,
            label: {
              normal: {
                show: true,
                position: 'bottom',
                textStyle: {
                  color: '#000',
                  fontSize: 10
                },
                formatter: '本期',
              }
            }
          },
          {
            type: 'bar',
            stack: 'NN',
            barGap: '15%',
            name: '外卖实收金额(元)',
            itemStyle: {
              color: '#eb7d31'
            },
            data: v6s,
          }
        ]
      };