Question

我已经使用stacked bar chart创建了一个垂直Baidu ECharts。

是否可以在堆栈顶部显示所有值的总和？

编辑：我使用@jeffrey的（非常好解释）答案编辑了我的例子，但我得到未捕获的TypeError：无法读取属性＆＃39; forEach＆＃39;未定义错误。我在这做错了什么？

<!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>

Answer 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
})

Answer 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

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

使用百度ECharts在堆积条形图上显示数据值的总和

2 个答案: