EChart隐藏xAxis、yAxis的问题。

cqwcns · 发表于 2022-10-20 16:19

如图和以下代码，我希望创建一个极简的bar图，不要希望显示 xAxis、yAxis。
只要bar条和tooltip就行。
各位查了一下官方配置项，未找到。
各位大佬有是否知道实现方法，请指教，感谢。

微信图片_20221020161622.png

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>

    <script type="text/javascript">
        var dom = document.getElementById('container');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var option = {
            tooltip: {},
            xAxis: {},
            yAxis: {
                data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
            },
            series: [
                {
                    type: 'bar',
                    data: [18203, 23489, 29034, 104970, 131744, 630230]
                }
            ]
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

        window.addEventListener('resize', myChart.resize);
    </script>
</body>

</html>

Sen · 发表于 2022-10-20 16:25

[JavaScript] 纯文本查看 复制代码

yAxis: {
					type: 'value',
					splitLine: { // 控制背景长横线
						show: true,
						color: '#e0e0e0'
					},
					axisLine: { // 控制Y轴刻度线
						show: false,
						lineStyle: {
							color: '#333333'
						}
					},
					axisTick: { // 控制Y轴显示
						show: false
					}
				}

cqwcns · 发表于 2022-10-20 16:27

各位大佬我错了，看文档找错了位置。

已解决。

[JavaScript] 纯文本查看 复制代码

 var option = {
            tooltip: {},
            xAxis: {
                show: false
            },
            yAxis: {
                show: false,
                data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
            },
            series: [
                {
                    type: 'bar',
                    data: [18203, 23489, 29034, 104970, 131744, 630230]
                }
            ]
        };

haoshu · 发表于 2022-10-20 16:30

本帖最后由 haoshu 于 2022-10-20 16:32 编辑

xAxis: {
show: false
},
yAxis: {
data: []
},

你的某些快乐 · 发表于 2022-10-20 17:11

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var option = {
      tooltip: {},
      xAxis: {
        axisLabel: {
          show: false,
        }
      },

      yAxis: {
        show: false,
        data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
      },
      series: [
        {
          type: 'bar',
          data: [18203, 23489, 29034, 104970, 131744, 630230]
        }
      ]
    };

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>

</html>

帐号		自动登录	找回密码
密码			注册[Register]

[求助] EChart隐藏xAxis、yAxis的问题。

免费评分

免费评分

免费评分