echart取消坐标轴bug_echart 取消y轴标题-CSDN博客

本文链接：https://blog.csdn.net/qq_60309085/article/details/134751503

最近有一个项目要使用echart绘制一个三维散点图，遇见了一个bug，不太清楚具体原因，但却绕开了，成功实现了目的，在此立贴做个记录

功能介绍：页面加载时使用ajax请求数据返回前端，渲染echart图表，这部分实现没问题

<body>
    <!-- 绘制 3D 散点图的容器 -->
    <div id="scatter-chart" style="width: 1000px;height: 700px"></div>

    <script>
        $.ajaxSetup({data:{csrfmiddlewaretoken:'{{ csrf_token }}'}});//这句好像是有一个csrf啥啥的报错，
                                                                    // 有关于ajax请求的，加了就不报错了
        var data
        $(document).ready(function (){
            $.ajax({
                url:'appTest/get3D_data' ,
                success:function (resp) {
                    data = JSON.parse(resp);
                    var myChart = echarts.init(document.getElementById('scatter-chart'));

                    // 绘制3D散点图
                    myChart.setOption({
                    // 图表标题
                    title: {
                        text: 'ECharts 3D Scatter Plot Demo'
                    },
                    // 图表类型，3D散点图
                    series: [{
                        type: 'scatter3D',
                        // 数据
                        data: data,
                        // 点大小
                        symbolSize: 2,
                        // 控制点的透明度
                        itemStyle: {
                            opacity: 0.3,
                            color: function(params) {
                                // 通过第四个参数获取颜色信息，并返回对应的颜色值
                             return params.data[3];
                            }
                        },
                        label: {
                            formatter: function(params) { // 设置标签格式化函数，这里将第五个参数（点的提示信息）显示为标签
                                return params.data[4];
                            }
                        }
                    }],

                    // X轴的3D坐标系，相关设置
                    xAxis3D: {
                        type: 'value',
                        scale: true,
                    },
                    // Y轴的3D坐标系，相关设置
                    yAxis3D: {
                        type: 'value',
                        scale: true,
                    },
                    // Z轴的3D坐标系，相关设置
                    zAxis3D: {
                        type: 'value',
                        scale: true,
                    },
                    // 旋转3D图表
                    grid3D: {
                        viewControl: {
                            // 摄像机视角
                            alpha: 45,
                            beta: 30,
                            zoomSensitivity:2 , //缩放操作的灵敏度，值越大越灵敏。默认为1。
                            panSensitivity:5 , //平移操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的平移灵敏度默认为1。
                        }
                    }
                });
                }
            })
        })
    </script>
</body>

但是呢，我不想要这个网格，于是就网上翻了翻方法，找到的大部分都是在各个坐标轴下配置一些项

xAxis: {
    show:false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
    axisTick:{
          show:false // 不显示坐标轴刻度线
    },
    axisLine: {
          show: false, // 不显示坐标轴线
    },
    axisLabel: {
          show: false, // 不显示坐标轴上的文字
    },
    splitLine:{
         show:false // 不显示网格线
    },
},

其他坐标轴类似

我就试了一下。发现show：false没用

// X轴的3D坐标系，相关设置
                    xAxis3D: {
                        type: 'value',
                        scale: true,
                        show:false
                    },
                    // Y轴的3D坐标系，相关设置
                    yAxis3D: {
                        type: 'value',
                        scale: true,
                        show:false
                    },
                    // Z轴的3D坐标系，相关设置
                    zAxis3D: {
                        type: 'value',
                        scale: true,
                        show:false
                    },

试了试其他的几个配置项

    axisTick:{
          show:false // 不显示坐标轴刻度线
    },
    axisLine: {
          show: false, // 不显示坐标轴线
    },
    axisLabel: {
          show: false, // 不显示坐标轴上的文字
    },
    splitLine:{
         show:false // 不显示网格线
    },

发现Tick，Label，splitLine都行

// X轴的3D坐标系，相关设置
                    xAxis3D: {
                        type: 'value',
                        scale: true,
                        show:false,
                        {#axisLine:{show:false},#}
                        axisLabel:{show:false},
                        axisTick:{show:false},
                        splitLine:{show:false}
                    },
                    // Y轴的3D坐标系，相关设置
                    yAxis3D: {
                        type: 'value',
                        scale: true,
                        show:false,
                        {#axisLine:{show:false},#}
                        axisLabel:{show:false},
                        axisTick:{show:false},
                        splitLine:{show:false}
                    },
                    // Z轴的3D坐标系，相关设置
                    zAxis3D: {
                        type: 'value',
                        scale: true,
                        show:false,
                        {#axisLine:{show:false},#}
                        axisLabel:{show:false},
                        axisTick:{show:false},
                        splitLine:{show:false}
                    },

唯独加了axisLine就会直接报错，图像不能转动。淦

查了查文档，发现坐标轴信息也可以在grid3D下配置，于是重新做了一番，问题是一样的，Tick，Label，splitLine都行，axisLine一加就报错，最终是在grid3D下配置了show：false成功了的，很迷，成功的代码如下

<body>
    <!-- 绘制 3D 散点图的容器 -->
    <div id="scatter-chart" style="width: 1000px;height: 700px"></div>

    <script>
        $.ajaxSetup({data:{csrfmiddlewaretoken:'{{ csrf_token }}'}});//这句好像是有一个csrf啥啥的报错，
                                                                    // 有关于ajax请求的，加了就不报错了
        var data
        $(document).ready(function (){
            $.ajax({
                url:'appTest/get3D_data' ,
                success:function (resp) {
                    data = JSON.parse(resp);
                    var myChart = echarts.init(document.getElementById('scatter-chart'));

                    // 绘制3D散点图
                    myChart.setOption({
                    // 图表标题
                    title: {
                        text: 'ECharts 3D Scatter Plot Demo'
                    },
                    // 图表类型，3D散点图
                    series: [{
                        type: 'scatter3D',
                        // 数据
                        data: data,
                        // 点大小
                        symbolSize: 2,
                        // 控制点的透明度
                        itemStyle: {
                            opacity: 0.3,
                            color: function(params) {
                                // 通过第四个参数获取颜色信息，并返回对应的颜色值
                             return params.data[3];
                            }
                        },
                        label: {
                            formatter: function(params) { // 设置标签格式化函数，这里将第五个参数（点的提示信息）显示为标签
                                return params.data[4];
                            }
                        }
                    }],

                    // X轴的3D坐标系，相关设置
                    xAxis3D: {
                        type: 'value',
                        scale: true
                    },
                    // Y轴的3D坐标系，相关设置
                    yAxis3D: {
                        type: 'value',
                        scale: true
                    },
                    // Z轴的3D坐标系，相关设置
                    zAxis3D: {
                        type: 'value',
                        scale: true
                    },
                    // 旋转3D图表
                    grid3D: {
                        viewControl: {
                            // 摄像机视角
                            alpha: 45,
                            beta: 30,
                            zoomSensitivity:2 , //缩放操作的灵敏度，值越大越灵敏。默认为1。
                            panSensitivity:5 , //平移操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的平移灵敏度默认为1。
                        },
                        show:false,
                    }
                });
                }
            })
        })
    </script>
</body>