Echarts设置背景的网格线为虚线_祈澈菇凉

网络 02-07 4478

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