Echarts y轴高度设置（宽度铺满整个父级高度）

最新推荐文章于 2025-03-09 22:06:18 发布

start_f_scratch

最新推荐文章于 2025-03-09 22:06:18 发布

阅读量2w

点赞数 4

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

本文链接：https://blog.youkuaiyun.com/start_f_scratch/article/details/103276153

版权

echarts 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何调整Echarts图表的y轴设置，以使y轴的高度完全填充其父容器的高度，实现图表宽度自适应铺满的效果。

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

 // 折线图
  initLineEcharts() {
    let _this = this;
    let charts: any = _this.$echarts.init(document.getElementById("mainLine"));
    charts.setOption({
      grid: {
        x: "12%",//x 偏移量
        y: "7%", // y 偏移量
        width: "87%", // 宽度
        height: "79%"// 高度
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
          "00:00",
          "02:00",
          "04:00",
          "06:00",
          "08:00",
          "10:00",
          "12:00",
          "14:00",
          "16:00",
          "18:00",
          "20:00",
          "22:00"
        ],
        axisLabel: {
          interval: 0, // 让字体完全显示
          rotate: 20 // 字体旋转
        },
      },
      yAxis: {
        type: "value",
        // 隐藏y轴
        axisLine: {
          show: false
        },
        // 隐藏刻度线
        axisTick: {
          show: false
        },
        // 网格线设置
        splitLine: {
          type: "dashed",
          color: "#eeeeee"
        }
      },
      series: [
        {
          data: [820, 932, 901, 934, 1790, 1330, 1300, 190, 4500, 809, 400, 890],
          type: "line",
          lineStyle: {
            color: "#00A1FF"
          },
          areaStyle: {
            color: "#00A1FF"
          }
        }
      ]
    });
  }