Echarts设置背景的网格线为虚线

用Echarts写了一个折线图之后，目前不太喜爱背景网格线的实线
需要改成虚线

Echarts设置背景的网格线为虚线

Echarts设置背景的网格线为虚线的关键属性

yAxis: {
            splitLine: {
                show: true,
                lineStyle:{
                    type: dashed 
                }
            }
        },

示例代码：

<!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数据

{
    "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设置背景的网格线为虚线的效果

Echarts设置背景的网格线为虚线