美文网首页
echarts 堆叠柱状图 顶部添加合计

echarts 堆叠柱状图 顶部添加合计

作者: Yyyyyyyyyujie | 来源:发表于2023-02-26 16:13 被阅读0次
    效果图
    //主要是添加这一句
    {
          name: '综合',
          type: 'bar',
          stack: 'total',
          label: {
            show: true,
            position: 'top',
            formatter: function (p) { //这里处理展示的数据和
              let sum = arr[p.dataIndex] + arr1[p.dataIndex];
              return sum;
            }
          },
          emphasis: {
            focus: 'series'
          },
          data: [0, 0, 0, 0, 0]//为了隐藏总计bar
        }
    
    let arr=[1,2,3,4,5],arr1=[1,2,3,4,5];
    option = {
     
      legend: {//这里自定义legend 隐藏总计
        data: [{
        name: 'Direct',
        // 强制设置图形为圆。
        icon: 'circle',
        // 设置文本为红色
        textStyle: {
            color: 'red'
            }
        },{
            name: 'Mail Ad',
            // 强制设置图形为圆。
            icon: 'circle',
            // 设置文本为红色
            textStyle: {
                color: 'red'
            }
        }]
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      yAxis: {
        type: 'value'
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      series: [
        {
          name: 'Direct',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: arr
        },
        {
          name: 'Mail Ad',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: arr1
        },
        {
          name: '综合',
          type: 'bar',
          stack: 'total',
          label: {
            show: true,
            position:'top',
            formatter:function(p){
              let sum = arr[p.dataIndex] + arr1[p.dataIndex];
              return sum
            }
          },
          emphasis: {
            focus: 'series'
          },
          data: [0,0,0,0,0]
        }
      ]
    };
    

    相关文章

      网友评论

          本文标题:echarts 堆叠柱状图 顶部添加合计

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