Echarts隐藏X轴和Y轴以及刻度和数值的简单实现

最新推荐文章于 2025-03-31 16:57:18 发布

iusugar

最新推荐文章于 2025-03-31 16:57:18 发布

阅读量9.4k

点赞数 5

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.youkuaiyun.com/qq_41461452/article/details/115659401

版权

echarts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用Echarts配置条形图，使其保持简洁风格，仅在鼠标悬停时显示数据。通过设置axisTick, axisLine, splitLine和axisLabel为false，隐藏了X轴和Y轴的刻度、线和标签。同时，展示了具体的数据只有在鼠标 hover 时才会显示的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用Echarts的条形图时候，想让图表变得干净清爽一点，只留下展示数据的条形，X轴和Y轴的所有数据都进行隐藏。

想要实现的效果大致是这样，数据只有鼠标在上方时候才显示
Echarts条形图
option对象的代码：

      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
        //设置图表的位置和宽高
          left: 0,
          top: 0,
          width: 480,
          height: 120,
        },
        xAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            scale: true,
            splitNumber: 1,
            axisLabel: {
              show: false
            }
          },
        ],
        yAxis: [
          {
            type: "category",
            data: ['电费'],
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '本月',
            type: "bar",
            data: [18],
            showBackground: true,
            itemStyle: {
              borderRadius: [0, 10, 10, 0],
            },
          },
          {
            name: '上月',
            type: "bar",
            data: [220],
            showBackground: true,
            itemStyle: {
              borderRadius: [0, 10, 10, 0],
            },
          },
        ],
      };