<div class="" id="addpeople">
</div>
function skinhum(timearr,countarr) {
var skinhumchart = echarts.init(document.getElementById('addpeople'));
//skinhumchart.title = '坐标轴刻度与标签对齐';
option = {
title: {
//text: '堆叠区域图'
},
tooltip: {
show:true,
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985' //实现折线图鼠标移入显示的颜色
}
}
},
//调整折线图的位置
grid: {
top:"20px",
left: '2%',
right: '9%',
bottom: '5%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
// data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
data:timearr,
axisLine: {
symbol: ['none', 'arrow'], //设置x轴或y轴箭头
lineStyle: {
color: '#FC95A4',
width: 2, //这里是为了突出显示加上的
}
},
//刻度是向内还是向外
axisTick:{
inside:true,
length:1,
},
splitLine: {
show: true,
lineStyle: {
type: 'solid',
color:'#FCFCFC',//网格颜色
}
},
axisLabel:{ //调整x轴的lable
//interval:0, //按x轴的长度显示的刻度的个数 例如:本来显示20个刻度,因为x轴端只显示了10个,
rotate:50, //实现x轴的刻度的标识实现旋转,
textStyle:{
fontSize:10,// 让字体变大
color:"#B5B5B5"
}
},
name: "(日期)",
nameTextStyle: {
color: "#B5B5B5",
verticalAlign: "bottom",
fontSize:'10',
padding:[35,50,10,-2] //设置x轴的标题的位置
}
//z:33
},
],
yAxis: [{
type: 'value',
axisLine: {
symbol: ['none', 'arrow'],
lineStyle: {
color: '#FC95A4',
width: 2, //这里是为了突出显示加上的
}
},
splitLine: {
show: true,
lineStyle: {
type: 'solid',
color:'#FCFCFC'
}
},
//刻度是向内还是向外
axisTick:{
inside:true,
length:1,
},
axisLabel:{ //调整x轴的lable
textStyle:{
fontSize:10,// 让字体变大
color:"#B5B5B5"
}
},
name: "(人数)",
nameLocation:"end", //实现标题显示的位置
nameTextStyle:{
color: "#B5B5B5",
fontSize:10,
// verticalAlign: 'top',
// align:"left",
padding:[50,0,-6,0]
}
//z:33
},
],
series: [{
name: '新增会员',
smooth: true,
// symbol: 'none',是否显示提示
type: 'line',
areaStyle: {
normal: {}
},
// data: [23,50,60,90,10,50,60,70,80,90,60,50,40,80,40,60,80,90,20,80,84,66,51,28,58,30,90,80,34,10],
data:countarr,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(251,135,151, 1)' //实现整个折线图的颜色
}, {
offset: 1,
color: 'rgba(251,135,151, 0.1)' //实现折线图颜色的渐变
}]),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
}
}],
}
skinhumchart.setOption(option);
};