用Echarts写了一个折线图之后，现在不太喜欢背景网格线的实线 需要改成虚线
Echarts设置背景的网格线为虚线的关键属性
代码语言：javascript复制yAxis: {
splitLine: {
show: true,
lineStyle:{
type:'dashed'
}
}
},示例代码：
代码语言：javascript复制<!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: {
type: 'category',
data: x_data,
},
yAxis: { // 纵轴标尺固定
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
},
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数据
代码语言：javascript复制{
"msg": "查询成功",
"code": 1,
"data": [{
"statTime": "2021-01",
"noPatrolNum": 12
}, {
"statTime": "2021-02",
"noPatrolNum": 21
},{
"statTime": "2021-03",
"noPatrolNum": 27
},{
"statTime": "2021-04",
"noPatrolNum": 15
}]
}Echarts设置背景的网格线为虚线的效果
