1、问题背景
设计1条统计人数的折线，其中网格线没有垂直线
2、实现源码
（1）有垂直网格线
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF⑻>
<title>echarts-去掉垂直网格线</title>
<link rel=shortcut icon href=../js/echarts⑵.2.7/doc/asset/ico/favicon.png>
<script type=text/javascript src=../js/echarts⑵.2.7/doc/asset/js/jquery.min.js ></script>
<script type=text/javascript src=../js/echarts⑵.2.7/doc/example/www2/js/echarts-all.js ></script>
<style>
body,html{
width: 99%;
height: 99%;
font-family: 微软雅黑;
font-size: 12px;
}
#chart{
width: 100%;
height: 100%;
}
</style>
<script>
$(function(){
var chart = document.getElementById('chart');
var echart = echarts.init(chart);
var option = {
title: {
text: ''
},tooltip: {
trigger: 'axis'
},legend: {
data:['人数']
},grid: {
left: '3%',right: '4%',bottom: '3%',containLabel: true
},toolbox: {
feature: {
saveAsImage: {}
}
},xAxis: {
type: 'category',boundaryGap: false,data: ['周1','周2','周3','周4','周5','周6','周日']
},yAxis: {
type: 'value'
},series: [
{
name:'人数',type:'line',stack: '人数',data:[1220,4132,6101,3134,1890,6230,3210]
}
]
};
echart.setOption(option);
});
</script>
</head>
<body>
<div id=chart></div>
</body>
</html>
（2）无垂直网格线
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF⑻>
<title>echarts-去掉垂直网格线</title>
<link rel=shortcut icon href=../js/echarts⑵.2.7/doc/asset/ico/favicon.png>
<script type=text/javascript src=../js/echarts⑵.2.7/doc/asset/js/jquery.min.js ></script>
<script type=text/javascript src=../js/echarts⑵.2.7/doc/example/www2/js/echarts-all.js ></script>
<style>
body,splitLine:{
show:false
},3210]
}
]
};
echart.setOption(option);
});
</script>
</head>
<body>
<div id=chart></div>
</body>
</html>
3、实现结果
（1）有垂直网格线
（2）无垂直网格线
4、问题说明
去掉网格中的垂直线，只需在xAxis中加入splitLine属性的设置show:false