echarts 堆叠柱状图在顶部显示数据总数

最新推荐文章于 2025-03-24 18:40:53 发布

三里桃花不及卿.

最新推荐文章于 2025-03-24 18:40:53 发布

阅读量5.7k

点赞数 2

分类专栏：前端学习笔记文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_51623742/article/details/127785028

版权

前端学习笔记专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Echarts的堆叠柱状图中实现在每个柱子顶部显示数据的总和。通过在series的最后一项添加一个全零的data数组，并在外部计算并设置最后一项为前几项数据的总和来达到目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts 堆叠柱状图在顶部显示数据总数

1.效果图

在这里插入图片描述

2.实现步骤：

const myChart = echarts.init(this.leakTypeDivide)
    const option = {
      title: {
        text: '漏洞类型划分',
        x: 'center',
        y: 'bottom',
        textStyle: {    // 副标题样式
          color: '#838080',
          fontWeight: 900,
          fontSize:15,
          lineHeight: 20,
          fontFamily: 'Microsoft Yahei'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow' 
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: ['Code Execution','Denial-of-Service','Information Exposure', 'Directory Traversal', 'Malicious Packages', 'AccessRestriction Bypass', 'CSRF', 'XXE', 'Authentication Bypass']
      },
      series: [
        {
          name: '2014',
          type: 'bar',
          stack: 'x',
          //label: { // 是否显示每一个柱状图的数据
            //show: true
          //},
          emphasis: {
            focus: 'series'
          },
          data: [100, 500, 100, 500, 300, 700, 500, 100, 500]
        },
        {
          name: '2015',
          type: 'bar',
          stack: 'x',
          emphasis: {
            focus: 'series'
          },
          data: [500, 100, 100, 100, 500, 200, 200, 200, 200]
        },
        {
          name: '2016',
          type: 'bar',
          stack: 'x',
          emphasis: {
            focus: 'series'
          },
          data: [100, 300, 100, 200, 200, 300, 300, 200, 200]
        },
        {
          name: '2017',
          type: 'bar',
          stack: 'x',
          emphasis: {
            focus: 'series'
          },
          data: [50, 200, 200, 100, 100, 300, 400, 200, 200]
        },
        {
          name: '2018',
          type: 'bar',
          stack: 'x',
          emphasis: {
            focus: 'series'
          },
          data: [300, 800, 200, 100, 100, 500, 200, 200, 200]
        },
        // 在series的最后一项，添加一个data都为零的数组
        {
          name: '总和',
          type: 'bar',
          stack: 'x',
          label: {
            show: true,
            color: '#4ba034',
            position:'right',
          },
          emphasis: {
            focus: 'series'
          },
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
        }
      ]
    };
    
    // 接着在option外部对数据进行操作,使得最后一项的数据是前几项的总和
    var series = option.series
    function getSum (params) {
      let dataValue = 0
      for (let i = 0; i < series.length; i++) {
        dataValue += series[i].data[params.dataIndex]
      }
      return dataValue
    }
    series[series.length - 1].label.formatter = getSum
    myChart.setOption(option, true);