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

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

想要实现的效果大致是这样,数据只有鼠标在上方时候才显示

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],
            },
          },
        ],
      };
posted @ 2025-05-09 10:30  Dy大叔  阅读(429)  评论(0)    收藏  举报