Echarts隐藏背景的网格线

简介: Echarts隐藏背景的网格线

网格线未处理之前,默认是这样的,这个背景的网格线,我们现在如果不需要,就去掉吧。

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
    }]
}

隐藏背景的网格线之后

界面看起来就很清爽了

相关文章
|
11月前
|
JSON 数据格式
Echarts设置背景的网格线为虚线
Echarts设置背景的网格线为虚线
236 0
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
2119 0
|
11月前
Echarts去掉中间的网格线
Echarts去掉中间的网格线
114 1
【Echarts】去除网格线
【Echarts】去除网格线
317 0
【Echarts】去除网格线
|
JavaScript 前端开发
|
10天前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
2月前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
198 1
微信小程序使用echarts图表(ec-canvas)
|
2月前
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
|
2月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作