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