echarts 学习日志之堆叠柱状图对多数据进行统计并显示

工作中需要用到echarts，我也就利用时间学习了以下。在用堆叠柱状图显示多数据的和时，一直有些问题，我在网上查找了一些资料，和同事探讨了一下。一是在外面计算出总数并在series里面在建一个柱状图或者折线代表总数，但不显示出来（设置柱状图的颜色为白色）；二是在series新建的{ 代表总数 }进行编写，需要用到formatter，可参考其它博主的文章。

function zjqstc() {
    var chart_c1 = echarts.init(document.getElementById('zjqst_c1'));//指定的id要有高度和宽度
    var dataMoney = [0, 20, 40, 60, 80, 100, 120, 140, 160];//y轴
 
    var dataMouth = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];//x轴
 
    //显示数据，可修改
    var data1 = [22, 24, 38, 43, 59, 25, 49, 34, 44, 34, 22, 46];
    var data2 = [35, 46, 43, 59, 60, 45, 53, 42, 56, 45, 36, 59];
    //总计
    var data3 = function() {
        var datas = [];
        for (var i = 0; i < data1.length; i++) {
 
            datas.push(data1[i] + data2[i]);
        }
        return datas;
    }();
    option = {
        title: {
            text: '标题栏',
            left: 'center',
            top: 'top',
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {          
                type : 'shadow'     
            }
        },
        legend: {
            orient: 'vertical',
            x: 'right',
            y: 'top',
            data:['料费','工费']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : dataMouth,
            }
        ],
        yAxis : [
            {
                type : 'value',
                data : dataMoney //可省略，只要type : 'value',会自适应数据设置Y轴
            }
        ],
        series : [
            {
                name:'料费',
                type:'bar',
                stack:'sum',
                itemStyle:{
                    normal:{
                        label: {
                            show: true,//是否展示
                        },
                        color:'#F89733'
                    }
                },
                data:data1
            },
            {
                name:'工费',
                type:'bar',
                stack:'sum',
                barWidth : 20,
                itemStyle:{
                    normal:{
                        label: {
                            show: true,//是否展示
                        },
                        color:'#DF7010'
                    }
                },
                data:data2
            },
            {
                name: '总计',
                type: 'bar',
                stack: 'sum',
                label: {
                    normal: {
                        offset:['50', '80'],
                        show: true,
                        position: 'insideBottom',
                        formatter:'{c}',
                        textStyle:{ color:'#000' }
                    }
                },
                itemStyle:{
                    normal:{
                        color:'rgba(128, 128, 128, 0)'
                    }
                },
                data: data3
            }
 
        ]
    };
 
    chart_c1.setOption(option);
}