echarts多列柱状图求合计，并且展示在最顶端

最新推荐文章于 2024-07-31 14:40:54 发布

原创最新推荐文章于 2024-07-31 14:40:54 发布 · 1.2w 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #echarts-求和

javascript 同时被 2 个专栏收录

2 篇文章

订阅专栏

echarts3-0-柱状图-斜

2 篇文章

订阅专栏

本文介绍了一种使用ECharts实现动态数据求和的方法，通过在series集合末尾增加一栏来显示合计，并利用JavaScript函数计算各系列数据之和。此外还展示了如何在legend点击事件中更新合计。

思路一：给series集合末尾多加一栏用于展示合计，但是值都是0；
缺点：必须根据xAxis的data生成一组为空的数据，且tooltip不能加trigger: ‘axis’,这个条件，不然会展示合计：0。
数据为模拟数据，已经实现ajax后台动态传数据，但这里不做细讲，主要研究echarts的js求和方法。
完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts1</title>
    <!-- 引入 echarts.js -->
     <script src="https://cdn.bootcss.com/echarts/3.5.4/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1600px;height:800px;"></div>
     <script type="text/javascript">    
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main')); 
            //定义图表option  
            var option =  {
                    tooltip : {
                        axisPointer : {
                            type : 'shadow'
                        }
                    },
                    title: {
                        text:'xxx激活设备数',
                        left:'left' ,
                        top:'10px',
                        textStyle: {
                        color: '#666',
                        fontWeight: 'normal'
                        }
                    },
                    toolbox: {
                        feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                        }
                    },
                    grid: {
                        y: '10%',
                        y2: '10%'
                    },
                     legend: {
                        data:['安卓','诺基亚','苹果']
                    },
                    xAxis:{
                        type: 'category',
                        axisLabel:{
                        interval: 0,    // {number}
                        rotate: 40
                        },
                        data: ['星期三','星期四']
                        },
                    yAxis:{
                        type: 'value',
                        min: 0,
                        interval: 10000
                    },
                    series: [
                        {
                            name:'安卓',
                            type:'bar',
                            stack:'xxx',
                            itemStyle: {
                                normal: {
                                    color: '#548dd5'
                                }
                            },
                            data: [["星期三",10000],["星期四",20000]]
                        },
                        {
                            name:'诺基亚',
                            type:'bar',
                            stack:'xxx',
                            itemStyle: {
                                normal: {
                                    color: '#000'
                                }
                            },

                            data:  [["星期三",11000],["星期四",21000]]
                        },
                        {
                            name:'苹果',
                            type:'bar',
                            stack:'xxx',
                            itemStyle: {
                                normal: {
                                    color: '#e56c0a'
                                }
                            },

                            data:  [["星期三",12000],["星期四",18000]]
                        },
                        {
                            name:'合计',
                            type:'bar',
                            stack:'xxx',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        color: '#000'
                                    },
                                    formatter:''
                                }
                            },
                            data:  [["星期三",0],["星期四",0]]    //思路一：给series集合末尾多加一栏用于展示合计，但是值都是0；缺点：必须根据xAxis的data生成一组为空的数据，且tooltip不能加trigger: 'axis',这个条件，不然会展示合计：0
                        }
                    ]
}; 

        var series = option["series"];
        var fun = function (params) { 
                var data3 =0;
                for(var i=0,l=series.length;i<l;i++){ 
                    data3 += series[i].data[params.dataIndex][1]
                } 
                return data3
            }
        //加载页面时候替换最后一个series的formatter
        series[series.length-1]["label"]["normal"]["formatter"] = fun 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        //legend点击事件，根据传过来的obj.selected得到状态是true的legend对应的series的下标，再去计算总和
        myChart.on("legendselectchanged", function(obj) {
                var b = obj.selected
                  , d = [];
                  //alert(JSON.stringify(b))
                  for(var key in b){
                    if(b[key]){
                        //alert(key)
                        for(var i=0,l=series.length;i<l;i++){  
                            var changename = series[i]["name"]; 
                            if(changename == key){ 
                                d.push(i);//得到状态是true的legend对应的series的下标
                            }
                        }
                    }
                 }   
                var fun1 = function (params) { 
                    var data3 =0;
                    for(var i=0,l=d.length;i<l;i++){
                        for(var j=0,h=series.length;j<h;j++){ 
                            if(d[i] == j){
                                data3 += series[j].data[params.dataIndex][1] //重新计算总和
                            }
                        }
                    }
                    return data3
                }
                series[series.length-1]["label"]["normal"]["formatter"] = fun1
                myChart.setOption(option);

          })

    </script>
</body>
</html>

最终效果图如下：
这里写图片描述