Echarts中如何调整图表大小

在 ECharts 中，可以通过以下几种方式来调整图表的大小：

1. 设置容器大小：

   • 确保你的图表容器（通常是一个 div 元素）有明确的宽度和高度。你可以使用 CSS 来设置这些样式。

   <div id="main" style="width: 600px;height:400px;"></div>
   

2. 使用 resize 方法：

   • 如果图表容器的大小是动态变化的，可以在容器大小变化后调用 ECharts 实例的 resize 方法来重新调整图表大小。

   var myChart = echarts.init(document.getElementById('main'));
   
   // 初始化图表配置项和数据
   var option = {
       // ... 图表配置 ...
   };
   
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option);
   
   // 监听窗口大小变化，调整图表大小
   window.addEventListener('resize', function() {
       myChart.resize();
   });
   

3. 设置 media 查询：

   • ECharts 支持使用媒体查询来根据不同的屏幕尺寸自动调整图表大小和配置。

   var option = {
       baseOption: {
           series: [{
               type: 'bar',
               data: [10, 20, 30]
           }]
       },
       media: [
           {
               query: {
                   maxWidth: 500
               },
               option: {
                   series: [{
                       type: 'bar',
                       data: [5, 15, 25]
                   }]
               }
           },
           {
               query: {
                   minWidth: 501
               },
               option: {
                   series: [{
                       type: 'line',
                       data: [10, 20, 30]
                   }]
               }
           }
       ]
   };
   
   var myChart = echarts.init(document.getElementById('main'));
   myChart.setOption(option);
   

4. 使用 setOption 的 notMerge 参数：

   • 如果你希望在调整大小时重置图表配置，可以使用 setOption 方法的 notMerge 参数。

   window.addEventListener('resize', function() {
       myChart.setOption(option, true); // 第二个参数为 true 表示不合并配置
   });
   

通过以上几种方式，你可以灵活地调整 ECharts 图表的大小，以适应不同的布局需求。