Echarts 堆积柱状图 数据标签求和怎么实现
1个回答
展开全部
挺简单的,用echarts中label的formatter属性就可以实现了,formatter采用回调函数的格式,有一个参数是params,这是个对象,有一个指向当前数据索引的dataIndex属性,根据这个属性可以找到堆积柱状图中的数据
var data1 = [10000,18000,20000,34000,13000,25000,26000,20011,30000,31200,27400,28000,31004,20100],
data2 = [10000,18000,20000,34000,13000,25000,26000,20011,30000,31200,27400,28000,31004,20100];
option = {
title: {
text:'xxx激活设备数',
left:'center' ,
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%'
},
xAxis: [
{
type: 'category',
axisLabel:{
interval: 0, // {number}
rotate: 40
},
data: ['2016-10-05星期三','2016-10-06星期四','2016-10-07星期五','2016-10-08星期六','2016-10-09星期日','2016-10-10星期一','2016-10-11星期二','2016-10-12星期三','2016-10-13星期四','2016-10-14星期五','2016-10-15星期六','2016-10-16星期日','2016-10-17星期一','2016-10-18星期二']
}
],
yAxis: [
{
type: 'value',
min: 0,
max: 70000,
interval: 10000
}
],
series: [
{
name:'Android',
type:'bar',
stack:'xxx',
itemStyle: {
normal: {
color: '#548dd5'
}
},
data: data1
},
{
name:'iOS',
type:'bar',
stack:'xxx',
itemStyle: {
normal: {
color: '#e56c0a'
}
},
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: '#666'
},
formatter: function(params) {
return params.value + data1[params.dataIndex]
}
}
},
data: data2
}
]
};
var data1 = [10000,18000,20000,34000,13000,25000,26000,20011,30000,31200,27400,28000,31004,20100],
data2 = [10000,18000,20000,34000,13000,25000,26000,20011,30000,31200,27400,28000,31004,20100];
option = {
title: {
text:'xxx激活设备数',
left:'center' ,
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%'
},
xAxis: [
{
type: 'category',
axisLabel:{
interval: 0, // {number}
rotate: 40
},
data: ['2016-10-05星期三','2016-10-06星期四','2016-10-07星期五','2016-10-08星期六','2016-10-09星期日','2016-10-10星期一','2016-10-11星期二','2016-10-12星期三','2016-10-13星期四','2016-10-14星期五','2016-10-15星期六','2016-10-16星期日','2016-10-17星期一','2016-10-18星期二']
}
],
yAxis: [
{
type: 'value',
min: 0,
max: 70000,
interval: 10000
}
],
series: [
{
name:'Android',
type:'bar',
stack:'xxx',
itemStyle: {
normal: {
color: '#548dd5'
}
},
data: data1
},
{
name:'iOS',
type:'bar',
stack:'xxx',
itemStyle: {
normal: {
color: '#e56c0a'
}
},
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: '#666'
},
formatter: function(params) {
return params.value + data1[params.dataIndex]
}
}
},
data: data2
}
]
};
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询