echart 视图显示宽度适配 宽度给的100% 为啥初始化 宽度是100px呢？

持续前行
951 阅读4分钟

在ECharts中，如果你将图表的容器宽度设置为100%，但初始化时显示的宽度却是100px，这通常是由于以下几个原因造成的：

  1. 容器父元素宽度问题：

    • 如果容器的父元素（或更上级的祖先元素）没有明确的宽度，或者宽度被设置为0或auto（在某些情况下可能解析为默认宽度），那么即使你设置了容器宽度为100%，它也可能无法正确计算出实际的宽度。

  2. CSS样式冲突：

    • 可能有其他CSS样式影响了容器的宽度。例如，padding、margin、box-sizing等属性都可能影响最终计算出的宽度。
    • 特别注意box-sizing属性，如果设置为border-box，则宽度和高度会包括padding和border，这可能会影响你期望的宽度。

  3. JavaScript或框架问题：

    • 如果你在使用某些JavaScript框架（如Vue、React等），并且是在框架渲染完成之前就初始化了ECharts，那么容器的宽度可能还没有被正确计算。
    • 确保在DOM元素完全加载和渲染后再初始化ECharts。

  4. 浏览器渲染问题：

    • 有时候，浏览器的渲染顺序和时机可能会导致在初始化ECharts时容器的宽度还没有被正确应用。
    • 可以通过在window.onload事件或框架的生命周期钩子（如Vue的mounted）中初始化ECharts来避免这个问题。

  5. ECharts初始化时机：

    • 确保在调用echarts.init方法之前，容器的宽度已经被正确设置。

为了解决这个问题，你可以尝试以下步骤：

  • 确保容器的父元素有明确的宽度。
  • 检查并调整容器的CSS样式，确保没有样式冲突。
  • 如果使用JavaScript框架，确保在框架的生命周期钩子中初始化ECharts。
  • 使用window.onload或DOMContentLoaded事件来确保DOM完全加载后再初始化ECharts。
  • 监听窗口的resize事件，并在事件触发时调用myChart.resize()方法来重新计算图表的尺寸。

此外，你还可以通过浏览器的开发者工具来检查容器的实际宽度和计算后的样式，这有助于你诊断问题所在。在开发者工具中，你可以看到元素的“Computed”或“Box Model”视图，它会显示元素的最终宽度、高度以及边距、填充等信息。

例如1：

image.png

1：解决方案如下：给父盒子添加width度值；

image.png

2：解决方案如下:

image.png

完整代码：

// 单因素折线图
const categoryEcharts = (data) => {
  console.log(data);
  var chartContainer = document.getElementById("categoryEcharts");
  let myChart = echarts.init(chartContainer);
  let option;
  option = {
    tooltip: {
      trigger: "axis",
      // 相对位置
      // position: ['40%', '-10%'],
      // position: 'top',
      position: function (point, params, dom, rect, size) {
        // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
        // 提示框位置
        var x = 0; // x坐标位置
        var y = 0; // y坐标位置

        // 当前鼠标位置
        var pointX = point[0];
        var pointY = point[1];

        // 外层div大小
        // var viewWidth = size.viewSize[0];
        // var viewHeight = size.viewSize[1];

        // 提示框大小
        var boxWidth = size.contentSize[0];
        var boxHeight = size.contentSize[1];

        // boxWidth > pointX 说明鼠标左边放不下提示框
        if (boxWidth > pointX) {
          x = 5;
        } else {
          // 左边放的下
          x = pointX - boxWidth;
        }

        // boxHeight > pointY 说明鼠标上边放不下提示框
        if (boxHeight > pointY) {
          y = 5;
        } else {
          // 上边放得下
          y = pointY - boxHeight;
        }

        return [x, y];
      },

      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      //调整图表位置
      left: "2%",
      right: "11%",
      bottom: "40px",
       top: "30px",
      containLabel: true,
    },
    title: {
      text: "", //视图标题
      left: "center",
      // subtext: "可作为描述", //描述
    },
    legend: {
      // type: "scroll",
      // data: ["#1bar1", "#2bar2", "error1", "error2"],
      // data: seriesDataYName,
      left: "right",
      bottom: 100,
      top: 100,
      orient: "vertical", //值为’horizontal’（水平默认），‘vertical’（垂直）
      itemWidth: 10, // 宽
      itemHeight: 10, // 高
    },
    dataZoom: [
      {
        type: "slider",
        start: 0,
        end: 100,
      },
      {
        type: "inside",
        start: 0,
        end: 100,
      },
    ],
    xAxis: {
      name: checkedMapis.value[0].name, //y轴坐标轴名称位置自定义
      type: "category",
      data: data.category,
      axisLine: {
        lineStyle: {
          color: "#fff", // X轴颜色
          width: 1, // X轴宽度
        },
      },
      axisLabel: {
        rotate: 45, // X轴标签旋转45度
      },
    },
    yAxis: {
      name: " " + "分析結果" + " ", //y轴坐标轴名称位置自定义
      type: "value",
      // nameLocation: "center", //end、start、center三种选项
      // nameRotade: "180", //字体旋转
      // nameGap: 28, //字体左右移动距离
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed", // 将y轴网格线设置为虚线
          color: "#ccc", // 颜色
          width: 1, // 宽度
        },
      },
      nameTextStyle: {
        padding: [0, 0, 0, -10], // 四个数字分别为上右下左与原位置距离
      },
      axisLabel: {
        // formatter: "{value}" + unitY, //单位
        formatter: "{value}", //单位
      },

      axisLine: {
        lineStyle: {
          color: "#fff", // Y轴颜色
          // width: 1, // Y轴宽度
        },
      },
    },
    series: [
      {
        data: data.line,
        type: "line",
        smooth: true,
        itemStyle: {
          color: "#ccc",
        },
        legendHoverLink: true, //是否启用图例 hover 时的联动高亮。
        colorBy: "#123456", //同一系列中的所有数据都是用相同的颜色;'auto'：默认，如果有足够空间则显示标志图形，否则随主轴标签间隔隐藏策略。true：显示所有图形。false：随主轴标签间隔隐藏策略。
      },
    ],
  };

  option && myChart.setOption(option);
 var chartContainer = document.getElementById("yBox2");
  
  var containerWidth = chartContainer.offsetWidth;
  var containerHeight = chartContainer.offsetHeight;
  // 调用 ECharts 的 resize 方法重绘图表
  myChart.resize({
    width: containerWidth,
    height: containerHeight-30,
  });
  
};

在合适的地方添加监听窗口大小变化事件

// 监听窗口大小变化事件
window.addEventListener('resize', function() {
  // 重新计算图表容器的大小
  var chartContainer = document.getElementById('chart-container');
  var containerWidth = chartContainer.offsetWidth;
  var containerHeight = chartContainer.offsetHeight;

  // 调用 ECharts 的 resize 方法重绘图表
  myChart.resize({
    width: containerWidth,
    height: containerHeight
  });
});
```
```
avatar
文章
阅读
粉丝