echarts 网格线无法删除，试了各种办法都没有解决_echarts绘图后有水平网格线-CSDN博客

本文链接：https://blog.csdn.net/weixin_56856344/article/details/134438625

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <style>
        /* 添加上述的 CSS 样式 */
        .echarts-x-axis {
            stroke: transparent !important;
        }
        .echarts-grid{
            display: none !important;
        }

        .echarts-y-axis {
            stroke: transparent !important;
        }
    </style>
    <style>
        /* 使用 CSS Flex 布局来排列图表 */
        .chart-row {
            display: flex;
            justify-content: space-between; /* 在每个图表之间均匀分配空间 */
        }

        .chart {
            width: calc(25% - 10px); /* 让每个图表占据一行的 1/4 宽度，减去一些间距 */
            height: 400px;
            margin-right: 10px; /* 添加一些右边距来分隔图表 */
        }
    </style>

   <script>
        // 使用ECharts创建图表
        var chartContainer1 = document.getElementById('chart-container1');
        var myChart1 = echarts.init(chartContainer1);

        // 定义获取数据的函数
        function fetchDataAndRenderChart1() {
            fetch('http://192.168.1.37:8000/marketinfo/a1/')  // 向Django的API端点请求数据
                .then(response => response.json())
                .then(result => {
                    // 提取data部分的内容
                    var data = result.data;

                    // 转换data对象为ECharts所需的数据格式
                    var categories = Object.keys(data);
                    var values = Object.values(data);

                    // 使用data渲染图表
                    var option = {
                        title: {
                            text: '市场涨跌分布图',
                            left: 'center',
                        },
                        xAxis: {
                            type: 'category',
                            data: categories,  // 使用categories作为x轴数据
                            splitLine: {show:false}, //隐藏横线栅格
                            // axisLine: {show:false},
                            // data:["跌停","<=-7%","-7-5%","-5-3%","-3-0%","0%","0-3%","3-5%","5-7%",">=7%","涨停"]
                        },
                        yAxis: {
                            type: 'value',
                            plitLine: {show:false}, //隐藏横线栅格
                        },
                        series: [{
                            data: values,  // 使用values作为y轴数据
                            type: 'bar',
                            itemStyle:{
                                color:function(params){
                                    var dataIndex=params.dataIndex; //指定索引范围，左边为绿色，右边为红色
                                    if (dataIndex<=4){return 'green';}
                                    else {return 'red';}
                                }
                            },label:{
                                show:true, //显示标签
                                position:'top', //标签位置
                                formatter: function(params){return params.values} //显示数据值
                            },
                            // backgroundColor: 'rgba(0,0,0,0)',// 设置背景为透明
                            loading:{
                                show:true, //loading 动画
                                text:'加载中...', //loading 文本提示
                                color:'#c23531', //loading颜色
                                textColor:'#000', //loading文本颜色
                                maskColor: 'rgba(255,255,255,0.8)', //loading 蒙层颜色
                            },
                            grid:{
                                show:false,
                                lineStyle:{
                                    color:'white'
                                }
                            }
                        }]
                    };
                    myChart1.setOption(option);
                });
        }

        // 初始获取数据并渲染图表
        fetchDataAndRenderChart1();

        // 定时更新数据和图表
        setInterval(fetchDataAndRenderChart1, 15000); // 每10秒更新一次
    </script>

grid 以及splitLine 这几种常用的方式都试了还是不行，有没有碰到类似情况的朋友们