网格线未处理之前，默认是这样的，这个背景的网格线，我们现在如果不需要，就去掉吧。
Echarts隐藏背景的网格线属性
yAxis: { splitLine: {show: false}, },
示例代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" class="col-md-12 col-sm-12 col-xs-12" style="height: 400px;"></div> <script> // 折线图 var names = []; //类别数组(实际用来盛放X轴坐标值) var series = []; $.ajax({ url: "test.json", data: {}, type: 'GET', success: function(data) { //请求成功时执行该函数内容，data即为服务器返回的json对象 $.each(data.data, function(index, item) { names.push(item.statTime); //挨个取出类别并填入类别数组 series.push(item.noPatrolNum); }); hFun(names, series); }, }); // 心率 var hrChart = echarts.init(document.getElementById("main")); function hFun(x_data, y_data) { hrChart.setOption({ color: ['#1e63d8'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, legend: { data: ['漏检次数'] }, grid: { left: '3%', right: '20%', bottom: '20%', containLabel: true }, xAxis: { splitLine: { show: false }, type: 'category', data: x_data, }, yAxis: { // 纵轴标尺固定 splitLine: { show: false }, type: 'value', scale: true, name: '漏检次数', min: 0, // 就是这两个 最小值 max: 'dataMax', // 最大值 splitNumber: 10, boundaryGap: [0.2, 0.2] }, series: [{ name: '漏检次数', type: 'line', symbol: 'circle', // 折线点设置为实心点 symbolSize: 6, // 折线点的大小 data: y_data }] }, true); } </script> </body> </html>
json
{ "msg": "查询成功", "code": 1, "data": [{ "statTime": "2021-01", "noPatrolNum": 12 }, { "statTime": "2021-02", "noPatrolNum": 21 },{ "statTime": "2021-03", "noPatrolNum": 28 },{ "statTime": "2021-04", "noPatrolNum": 15 }] }
隐藏背景的网格线之后
界面看起来就很清爽了
