ECharts 响应式

ECharts 是一个基于JavaScript的可视化图表库，适用于 Web 和移动端。随着移动端设备和不同屏幕尺寸的广泛应用，如何实现图表的响应式布局已经成为许多人关注的问题。ECharts 提供了多种方式来实现图表的响应式布局。

1. 百分比设置

可以通过设置图表的宽高的百分比来实现响应式布局。当浏览器窗口大小发生变化时，图表的宽高会随之自动调整。例如：

<div id="chart" style="width: 100%; height: 80%;"></div>

2. Resize 事件

ECharts 提供了一个 resize 事件，可以通过监听这个事件来实现图表的响应式布局。当浏览器窗口大小发生变化时，触发 resize 事件，然后对图表进行重绘。

window.addEventListener('resize', function () {
  myChart.resize();
});

3. 自适应容器

使用 ECharts 自带的 echarts.init 方法创建图表实例时，如果传入的容器元素宽高为0，会自动将图表宽高设置为容器元素的宽高。当容器元素发生变化时，图表的宽高也会自动发生变化。

var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);

4. 媒体查询

可以通过媒体查询来针对不同的屏幕尺寸设置不同的图表样式。例如，在屏幕宽度小于500px时，将图表的 legend 放到底部：

@media screen and (max-width: 500px) {
  .chart-legend {
    position: absolute;
    bottom: 0;
    left: 0;
  }
}

以上是几种实现 ECharts 响应式布局的方法，可以根据具体需求选择合适的方式实现响应式图表。同时，需要注意的是在使用 resize 事件或自适应容器的时候，要确保图表容器元素的宽高不为0，否则图表会无法显示。