body部分代码
<body>
//这个部分主要为切换设置
<div class="button" style="width: 13%; height: 3%; z-index: 500;">
<ul class="u_tab">
<li id="nav1_1" onclick="show('nav1',1,5);" style="cursor: pointer;">近7日</li>
<li id="nav1_2" onclick="show('nav1',2,5);" style="cursor: pointer;"
class="current">近12月</li>
</ul>
</div>
<script type="text/javascript">
function show(obj, num, len) {
try {
for (var id = 1; id <= len; id++) {
var setid = obj + id;
var setnavid = obj + "_" + id;
if (id == num) {
document.getElementById(setnavid).className = "current";
document.getElementById(setid).style.display = "block";
} else {
document.getElementById(setnavid).className = "";
document.getElementById(setid).style.display = "none";
}
}
} catch (e) {
}
}
</script>
<div id="line2" class="list2"></div>
<!-- 近7天 -->
<ul id="nav11" style="display: none;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<div id="line2" class="list2"></div>
</td>
</tr>
</tbody>
</table>
</ul>
<!-- 近12月 -->
<ul id="nav12" style="display: block;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<div id="line1" class="list1"></div>
</td>
</tr>
</tbody>
</table>
</ul>
<!-- 近12月 -->
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("line1"));
//指定图标的配置和区域
var option = {
backgroundColor : '#042b53',
//标题
title : {
text : "折线区域填充",
padding : [ 5, 10, 5, 20 ],//上右下左
textStyle : {
color : '#fff',
fontWeight : 'normal',
fontSize : 35
}
},
tooltip : {
trigger : 'axis',
axisPointer : {
type : 'cross',
label : {
backgroundColor : '#6a7985'
}
}
},
//color : [ '#fff', '#fff', '#fff', '#fff' ],//在这配置自己想要的颜色
//图例
legend : {
data : [ '邮件营销','联盟广告','视频广告','直接访问' ],
x : 'center',
bottom : '1%',
textStyle : {//图例文字的样式
color : '#fff',
fontSize : 15
}
},
grid : {
top : '18%',
left : '2%',
right : '2%',
bottom : '8%',
borderWidth : '0',
show : true,
containLabel : true
},
//x轴数据
xAxis : [ {
data : ['2018/1','2018/2','2018/3','2018/4','2018/5','2018/6','2018/7','2018/8','2018/9','2018/10','2018/11','2018/12'],
axisLine : {
show : false
},
axisTick : {
show : false
},
axisLabel : {
textStyle : {
color : '#fff',
fontSize : 13
}
}
} ],
yAxis : {
axisLine : {
show : false
},
axisTick : {
show : false
},
axisLabel : {
textStyle : {
color : '#fff',
fontSize : 13
}
}
},
//这个部分主要为折线图区域填充
series : [ {
name : '邮件营销',
type : 'line',
areaStyle : {
normal : {
opacity : 0.2//设置透明度
}
},
data : [ 2,3,5,6,1,0,7,8,3,5,4,3]
}, {
name : '联盟广告',
type : 'line',
areaStyle : {
normal : {
opacity : 0.2
}
},
data : [ 8,6,4,7,2,8,9,6,1,3,4,5]
}, {
name : '视频广告',
type : 'line',
areaStyle : {
normal : {
opacity : 0.2
}
},
data : [ 5,6,2,1,4,3,5,8,4,2,6,5]
}, {
name : '直接访问',
type : 'line',
areaStyle : {
normal : {
opacity : 0.2
}
},
data : [ 8,0,5,6,4,3,5,4,7,6,2,1]
} ]
};
//渲染图表
myChart.setOption(option);
</script>
<!-- 近7天 -->
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("line2"));
//指定图标的配置和区域
var option = {
backgroundColor : '#042b53',
//标题
title : {
text : "折线区域填充",
padding : [ 5, 10, 5, 20 ],
textStyle : {
color : '#fff',
fontWeight : 'normal',
fontSize : 35
}
},
tooltip : {
trigger : 'axis',
axisPointer : {
type : 'cross',
label : {
backgroundColor : '#6a7985'
}
}
},
//color : [ '#fff', '#fff', '#fff', '#fff' ],//在这配置自己想要的颜色
//图例
legend : {
data : [ '邮件营销','联盟广告','视频广告','直接访问' ],
x : 'center',
bottom : '1%',
textStyle : {//图例文字的样式
color : '#fff',
fontSize : 15
}
},
grid : {
top : '18%',
left : '2%',
right : '2%',
bottom : '8%',
borderWidth : '0',
show : true,
containLabel : true
},
//x轴数据
xAxis : [ {
data : ['2019/2/1','2019/2/2','2019/2/3','2019/2/4','2019/2/5','2019/2/6','2019/2/7'],
axisLine : {
show : false
},
axisTick : {
show : false
},
axisLabel : {
textStyle : {
color : '#fff',
fontSize : 13
}
}
} ],
yAxis : {
axisLine : {
show : false
},
axisTick : {
show : false
},
axisLabel : {
textStyle : {
color : '#fff',
fontSize : 13
}
}
},
series : [ {
name : '邮件营销',
type : 'line',
areaStyle: { //区域填充样式
normal: {
opacity : 0.2
}
},
data : [ 5,6,2,1,4,3,5]
}, {
name : '联盟广告',
type : 'line',
areaStyle : {
normal : {
opacity : 0.2
}
},
data : [ 8,6,4,7,2,8,9]
}, {
name : '视频广告',
type : 'line',
areaStyle : {
normal : {
opacity : 0.2
}
},
data : [ 8,0,5,6,4,3,5]
}, {
name : '直接访问',
type : 'line',
areaStyle : {
normal : {
opacity : 0.2
}
},
data : [ 2,3,5,6,1,0,7]
} ]
};
//渲染图表
myChart.setOption(option);
</script>
</body>
效果如下
新手请多多指教，仅作参考，欢迎评论。