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

来源：互联网发布：艾默生ups监控软件编辑：程序博客网时间：2024/06/02 02:47
思路一：给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>
最终效果图如下：
这里写图片描述
阅读全文
0 0