echarts堆叠条形图显示总值
2019-08-09 本文已影响0人
平面小狮子
app.title = '堆叠条形图';
var data1 = [320, 302, 301, 334, 390, 330, 320];
var data2 = [120, 132, 101, 134, 90, 230, 210];
var data3 = function() {
var datas = [];
for (var i = 0; i < data1.length; i++) {
datas.push(data1[i] + data2[i]);
}
return datas;
}();
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: ['直接访问', '邮件营销']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
max: 600
},
yAxis: {
type: 'category',
data: ['周一','周二','周三','周四','周五','周六','周日']
},
series: [
{
name: '直接访问',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: data1
},
{
name: '邮件营销',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: data2
},
{
name: '总计',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideLeft',
formatter:'{c}',
textStyle:{ color:'#000' }
}
},
itemStyle:{
normal:{
color:'rgba(128, 128, 128, 0)'
}
},
data: data3
}
]
};
复制到echarts官网实例中运行即可显示效果：
image
基本思路来了：
一、根据data1和data2算出没周的总值data3
二、series增加显示总数值的堆叠条
三、修改堆叠条样式：背景色和echarts的底色一致，位置为insideLeft居左显示，数字颜色自定义。
