2019-11-23 echarts 堆叠柱状图顶部统计,不影响布局。

    var labelOption = {

      normal: {

        show: true,

        position: "inside",

        distance: 0,

        align: "center",

        verticalAlign: "center",

        rotate: 0,

        fontSize: 10,

        lineHeight: 12,

        rich: {

          name: {

            textBorderColor: 'none',

            color: '#fff',

            fontSize: 10

          }

        },

        formatter: (params) => {

          //console.log(params)

          if (params.value === 0){

            return '';

          }else{

            return params.seriesName + '\n' + params.value;

          }

        }

      }

    };

var option = {

      color: ['#34CFCC', '#9A86FF', '#FF9C51'],

      xAxis: [

        {

          data: xAxis

        }

      ],

      grid:{

        left: 70

      },

      yAxis: [

        {

          type: 'value'

        }

      ],

      series: [

        {

          name: '直接访问',

          type: 'bar',

          stack: '总量',

          label: {

            normal: {

              show: true,

              position: 'insideRight'

            }

          },

          data: [320, 302, 301, 334, 390, 330, 320]

        },

        {

          name: '邮件营销',

          type: 'bar',

          stack: '总量',

          label: {

            normal: {

              show: true,

              position: 'insideRight'

            }

          },

          data: [120, 132, 101, 134, 90, 230, 210]

        },

        {

          name: '联盟广告',

          type: 'bar',

          stack: '总量',

          label: {

            normal: {

              show: true,

              position: 'insideRight'

            }

          },

          data: [220, 182, 191, 234, 290, 330, 310]

        },

        {

          name: '视频广告',

          type: 'bar',

          stack: '总量',

          label: {

            normal: {

              show: true,

              position: 'insideRight'

            }

          },

          data: [150, 212, 201, 154, 190, 330, 410]

        },

重点是这里...

        {

          name: '总计',

          label: {

            normal: {

              offset: ['50', '80'],

              show: true,

              position: 'insideBottom',

              formatter: (params) => {

                return params.seriesName + '\n' + params.value;

              },

              textStyle: { color: '#000' }

            }

          },

          itemStyle: {

            normal: {

              color: 'none'

            }

          },

          type: 'line',

          data: [820, 832, 901, 934, 1290, 1330, 1320]

        }

      ]

    };

PC和小程序公用!!

你可能感兴趣的:(2019-11-23 echarts 堆叠柱状图顶部统计,不影响布局。)