使用echart做数据大屏，如何实现屏幕适配

李, 若俞 • 2024年4月2日下午10:37 • 前端开发 • 阅读 257

• 使用响应式布局：
• 使用百分比设置图表大小：
• 监听窗口大小变化事件：

在使用 ECharts 进行数据大屏开发时，实现屏幕适配可以通过以下几个步骤来完成：

使用响应式布局：

ECharts 提供了多种布局方式，如 grid、grid3D、geo 等，可以根据屏幕大小和分辨率的变化自动调整图表的大小和位置。使用这些布局方式可以确保图表在不同屏幕上都能够自适应。

使用百分比设置图表大小：

在设置图表的容器大小时，可以使用百分比来代替固定的像素值。例如，将图表容器的宽度设置为 “100%”，高度设置为 “80%”，这样无论屏幕的大小如何，图表都会自动按比例缩放。

监听窗口大小变化事件：

可以通过 JavaScript 监听窗口的 resize 事件，当窗口大小发生变化时，重新计算图表容器的大小，并调用 ECharts 的 resize 方法进行图表的重绘。这样可以保证图表在窗口大小变化时能够及时适应。

下面是一个简单的示例代码，演示如何实现屏幕适配：

// 监听窗口大小变化事件
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
  });
});

// 初始化图表
var chartContainer = document.getElementById('chart-container');
var containerWidth = chartContainer.offsetWidth;
var containerHeight = chartContainer.offsetHeight;
var myChart = echarts.init(chartContainer);

// 设置图表的配置项和数据
var option = {
  // ...
};

// 根据容器大小设置图表的宽度和高度
myChart.setOption(option, true);
myChart.resize({
  width: containerWidth,
  height: containerHeight
});