Echarts图表占满整个盒子

最新推荐文章于 2025-03-01 16:53:24 发布

堕落年代

最新推荐文章于 2025-03-01 16:53:24 发布

阅读量579

点赞数 3

分类专栏： vue 文章标签： echarts javascript java

本文链接：https://blog.youkuaiyun.com/qq_45153375/article/details/145504783

版权

vue 专栏收录该内容

22 篇文章

订阅专栏


const chartPlan = (idName, chartTitle, title, titleData, valueData) => {
  var option;

  var option = {
    title: {
      text: chartTitle,
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: [
        titleData[0],
        titleData[1],
        titleData[2],
        titleData[3],
        titleData[4],
        titleData[5],
      ],
      right: "10%", // 图例在右边
    },
    grid: {
      left: "0%",
      right: "0%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: title,
      name: "日期", // 横向标识
    },
    yAxis: {
      type: "value",
      name: "数量", // 竖向标识
    },
    series: [
      {
        name: titleData[0],
        type: "line",
        data: valueData[0],
      },
      {
        name: titleData[1],
        type: "line",
        data: valueData[1],
      },
      {
        name: titleData[2],
        type: "line",
        data: valueData[2],
      },
      {
        name: titleData[3],
        type: "line",
        data: valueData[3],
      },
      {
        name: titleData[4],
        type: "line",
        data: valueData[4],
      },
      {
        name: titleData[5],
        type: "line",
        data: valueData[5],
      },
    ],
  };
  var chartDom = document.getElementById(idName);
  var myChart = echarts.init(chartDom);
  option && myChart.setOption(option);
};

就是这里要添加就可以了：

  grid: {
      left: "0%",
      right: "0%",
      containLabel: true,
    },

在这里插入图片描述