image.png
- 在线运行代码https://echarts.baidu.com/examples/editor.html?c=bar-y-category-stack
app.title = '堆叠条形图';
option = {
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
},
formatter: function (params,ticket,callback) {
//设置返回信息
var result = params[0].name;
//由于下面进行拼接重新赋值一个变量作为key值
var key = params[0].name;
for(var index = 0 ,i=params.length;index < i;index++){
result
+= '
'
+ params[index].marker
+ params[index].seriesName
+ ' : '
+ params[index].value
+" ("+map.get(key)[index]+")";
}
return result;
},
},
legend: {
data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['周一','周二','周三','周四','周五','周六','周日']
},
series: [
{
name: '直接访问',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [320, 302, 301, 334, 390, 330, 320]
},
{
name: '邮件营销',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [150, 212, 201, 154, 190, 330, 410]
},
{
name: '搜索引擎',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [820, 832, 901, 934, 1290, 1330, 1320]
}
]
};
/*---data build----*/
var arr = new Array();
arr[0] = '2019-01-01';
arr[1] = '2019-01-02';
arr[2] = '2019-01-03';
arr[3] = '2019-01-04';
arr[4] = '2019-01-05';
var arr2 = new Array();
arr2[0] = '2019-02-01';
arr2[1] = '2019-02-02';
arr2[2] = '2019-02-03';
arr2[3] = '2019-02-04';
arr2[4] = '2019-02-05';
var arr3 = new Array();
arr3[0] = '2019-03-01';
arr3[1] = '2019-03-02';
arr3[2] = '2019-03-03';
arr3[3] = '2019-03-04';
arr3[4] = '2019-03-05';
var arr4 = new Array();
arr4[0] = '2019-04-01';
arr4[1] = '2019-04-02';
arr4[2] = '2019-04-03';
arr4[3] = '2019-04-04';
arr4[4] = '2019-04-05';
var arr5 = new Array();
arr5[0] = '2019-05-01';
arr5[1] = '2019-05-02';
arr5[2] = '2019-05-03';
arr5[3] = '2019-05-04';
arr5[4] = '2019-05-05';
var arr6 = new Array();
arr6[0] = '2019-06-01';
arr6[1] = '2019-06-02';
arr6[2] = '2019-06-03';
arr6[3] = '2019-06-04';
arr6[4] = '2019-06-05';
var arr7 = new Array();
arr7[0] = '2019-07-01';
arr7[1] = '2019-07-02';
arr7[2] = '2019-07-03';
arr7[3] = '2019-07-04';
arr7[4] = '2019-07-05';
var map = new Map();
map.set('周一',arr);
map.set('周二',arr2);
map.set('周三',arr3);
map.set('周四',arr4);
map.set('周五',arr5);
map.set('周六',arr6);
map.set('周日',arr7);