使用百度 ECharts 在堆积条形图顶部显示数据值的总和答案

【问题标题】：Show the sum of data values on top of stacked bar chart using Baidu ECharts使用百度 ECharts 在堆积条形图顶部显示数据值的总和
【发布时间】：2018-03-05 15:57:38
【问题描述】：

我用Baidu ECharts 创建了一个垂直的stacked bar chart。

是否可以在栈顶显示所有值的sum？

编辑：我已经使用@jeffrey 的（很好解释的）答案编辑了我的示例，但我得到 Uncaught TypeError: Cannot read property 'forEach' of undefined 错误。我在这里做错了什么？

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="echarts-en.min.js"></script>
       <script type="text/javascript">
var     mySeries = [
            {
                name: 'Department 1',
                type: 'bar',
                stack: 'stack1',
                data: [320, 302, 301, 334, 390, 330, 320]
            },
            {
                name: 'Department 2',
                type: 'bar',
                stack: 'stack1',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: 'Department 3',
                type: 'bar',
                stack: 'stack1',
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: 'Department 4',
                type: 'bar',
                stack: 'stack1',
                data: [150, 212, 201, 154, 190, 330, 410]
            },
            {
                name: 'Department 5',
                type: 'bar',
                stack: 'stack1',
                data: [185, 120, 55, 66, 77, 88, 40],
                label: {
                            normal: {
                                show: true,
                                position: 'top',
                                formatter: (params) => {
                                    let total = 0;
                                    this.series.forEach(serie => {
                                       total += serie.data[params.dataIndex];
                                    })
                                    return total;
                                }
                            }
                        }
            }
        ];

        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var option = null;

        option = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {        
                    type : 'shadow'       
                }
            },
            legend: {
                data: ['Department 1', 'Department 2','Department 3','Department 4','Department 5'],
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    dataView: {show: false, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            yAxis:  {
                type: 'value'
            },
            xAxis: {
                type: 'category',
                data: ["Jen\n2018", "Feb\n2018", "Mar\n2018", "Apr\n2018", "May\n2018", "Jun\n2018", "Jul\n2018"]
            }
        };;

        myChart.setOption(option, true);

        myChart.setOption({
            series: mySeries
        })
        </script>
   </body>
</html>

【问题讨论】：

您收到错误，因为您创建了var mySeries，但在格式化程序中，您使用this.mySeries 引用它，因此它是undefined。
@Jeffrey ：即使我将其定义为this.mySeries，它也不起作用。我做了一个 jsfiddle 在这里测试它：link
我检查了，我犯了一个错误（对不起！）。 forEach 应该是this.mySeries.forEach()。 Now your fiddle works :)
是的！谢谢@Jeffrey 的解决方案！很抱歉，我认为我无法将此解决方案标记为 OK，因为我的声誉少于 15 :-(
@fkossyvas 接受答案没有信誉阈值。询问后您需要等待 15 分钟，仅此而已。见How does accepting an answer work?

标签： javascript echarts baidu

【解决方案1】：

要获得自定义serie label，您应该使用label formatter。

当您在图表对象外部定义系列数据并将其映射到this 时，您可以访问格式化程序中的数据。使用格式化程序很重要，因此原始标签和值不会被更改（例如工具提示和图例）。

首先，我们定义您的系列。格式化程序应该添加到 last 系列中。这将是堆栈顶部的系列，显示带有总值的标签：

this.mySeries = [
    {
        name:'Dataset 1',
        type:'bar',
        stack: 'Stack 1',
        data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
        name:'Dataset 2',
        type:'bar',
        stack: 'Stack 1',
        data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
        name:'Dataset 3',
        type:'bar',
        stack: 'Stack 1',
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        label: {
            normal: {
                show: true,
                position: 'top',
                formatter: (params) => {
                    let total = 0;
                    this.mySeries.forEach(serie => {
                       total += serie.data[params.dataIndex];
                    })
                    return total;
                }
            }
        }
    }
];

这里又是带有注释的格式化程序，所以你可以理解它是如何工作的：

label: {

    // You can choose from 'normal' (always visible )
    // and 'emphasis' (only visible on stack hover)
    normal: {

        // Enable the label
        show: true,

        // Position it on top of the stack
        position: 'top',

        // Add a label formatter
        // (params) holds all the data of the current serie and datapoint
        // You can use console.log(params) to check all available values
        formatter: (params) => {
            let total = 0;

            // Now we iterate over each of the series, and get the value of
            // the current xAxis datapoint by using the serie dataIndex
            this.mySeries.forEach(serie => {
               total += serie.data[params.dataIndex];
            })

            // The return value will be shown on top of your stack
            return total;
        }
    }
}

现在，您只需将系列数据映射到图表对象：

myChart.setOption({
    series: this.mySeries
})

【讨论】：

一个系列可以有2个标签吗？在同一个示例中，在系列中心和第三个数据集上有标签；一个在中心，另一个在顶部

【解决方案2】：

请看这个答案，它对我帮助很大，而且我在代码中做了一点简化，没有什么相关的。我发现解释更容易。基本上你会在标签内使用 formatter 属性，并带有一些规范

系列示例

let series = [
{
    name: 'Reclamação',
    data: this.relatos_tipo_y.R,
},
{
    name: 'Elogio',
    data: this.relatos_tipo_y.E,
},
{
    name: 'Sugestão',
    data: this.relatos_tipo_y.S,
},
{
    name: 'Denúncia',
    data: this.relatos_tipo_y.D,
},

];

格式化函数

genFormatter = (series) => {
return (param) => {
    console.log(param);
    let sum = 0;
    series.forEach(item => {
        sum += item.data[param.dataIndex];
    });
    return sum
}

};

在你的图表选项中放置这个

series: series.map((item, index) => Object.assign(item, {
     type: 'bar',
     stack: true,
     label: {
         show: index === series.length - 1,
         formatter: genFormatter(series),
         fontSize: 20,
         color: 'black',
         position: 'top'
     },
})),

Click Here

与其他答案非常相似，但我发现代码更容易理解。

【讨论】：