美文网首页
2019-11-23 echarts 堆叠柱状图顶部统计,不影

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

作者: 刘波_ecae | 来源:发表于2019-11-23 15:41 被阅读0次

        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 堆叠柱状图顶部统计,不影

          本文链接:https://www.haomeiwen.com/subject/niyhwctx.html