<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); };