option = {
backgroundColor: '#fff',
title: {
text: '堆叠区域图'
},
tooltip : {
trigger: 'axis',
axisPointer: {
// type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data:['联盟广告','直接访问','搜索引擎']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
// type : 'category',
// data : ['10','20','30','45','50','55','60'],
// min: 0,
// max: 80,
type: 'value',
// data : [10,20,30,45,50,55,60]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'联盟广告',
type:'line',
stack: '总量',
smooth:true,
smoothMonotone: 'x', // 折线平滑后在 x 轴上保持单调性
symbol: 'circle',
symbolSize: 5,
label: {
normal: {
show: true,
position: 'bottom'
}
},
lineStyle: {
// normal: {
// color: 'rgba(0,0,0,0)'
// }
},
itemStyle: {
normal: {
color: '#ff5b5b'
}
},
areaStyle: {
normal: {
color: '#ffffff'
}
},
data:[[10,220], [20,182], [30,191], [45,234], [50,290], [55,330], [60,310]]
},
// {
// name:'直接访问',
// type:'line',
// stack: '总量',
// smooth:true,
// symbol: 'circle',
// symbolSize: 5,
// lineStyle: {
// normal: {
// color: 'rgba(0,0,0,0)'
// }
// },
// itemStyle: {
// normal: {
// color: '#42a9fc'
// }
// },
// areaStyle: {
// normal: {
// color: '#fddcdc'
// }
// },
// data:[null, 332, null, null, null, null, null]
// },
// {
// name:'直接访问',
// type: 'scatter',
// coordinateSystem: 'cartesian2d',
// symbol: 'circle',
// symbolSize: 5,
// itemStyle: {
// normal: {
// color: '#42a9fc'
// }
// },
// data:[null, 332, null, null, null, null, null]
// },
{
name:'搜索引擎',
type:'line',
stack: '总量',
smooth:true,
smoothMonotone: 'x', // 折线平滑后在 x 轴上保持单调性
symbol: 'circle',
symbolSize: 5,
label: {
normal: {
show: true,
position: 'top'
}
},
lineStyle: {
// normal: {
// color: 'rgba(0,0,0,0)'
// }
},
itemStyle: {
normal: {
color: '#ff5b5b'
}
},
areaStyle: {
normal: {
color: '#fddcdc'
}
},
data:[[10,820], [20,932], [30,901], [45,934], [50,1290], [55,1330], [60,1320]]
}
]
};