echarts窗口变化适配字体大小

在使用ECharts进行数据可视化时，确保图表在不同窗口大小下字体大小适配是一个常见的需求。ECharts提供了多种方法来动态调整图表元素的大小，以适应窗口的变化。以下是一些实现方法：

1. **使用响应式布局**：
ECharts默认支持响应式布局，可以通过设置`responsive: true`来启用。这样，图表会根据容器的大小自动调整。

   var chart = echarts.init(document.getElementById('main'));
   var option = {
       title: {
           text: '响应式图表',
           textStyle: {
               fontSize: 16
           }
       },
       tooltip: {},
       xAxis: {
           data: ['A', 'B', 'C', 'D', 'E', 'F']
       },
       yAxis: {},
       series: [{
           name: '销量',
           type: 'bar',
           data: [5, 20, 36, 10, 10, 20]
       }]
   };
   chart.setOption(option);

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

2. **动态调整字体大小**：
在窗口大小变化时，可以通过监听`resize`事件，动态调整字体大小。

   var chart = echarts.init(document.getElementById('main'));
   var option = {
       title: {
           text: '动态调整字体大小',
           textStyle: {
               fontSize: 16
           }
       },
       tooltip: {},
       xAxis: {
           data: ['A', 'B', 'C', 'D', 'E', 'F']
       },
       yAxis: {},
       series: [{
           name: '销量',
           type: 'bar',
           data: [5, 20, 36, 10, 10, 20]
       }]
   };
   chart.setOption(option);

   window.addEventListener('resize', function() {
       var fontSize = Math.max(12, Math.round(16 * window.innerWidth / 1920));
       chart.setOption({
           title: {
               textStyle: {
                   fontSize: fontSize
               }
           }
       });
   });

3. **使用`media`属性**：
ECharts的`media`属性可以根据不同的屏幕尺寸应用不同的样式。

   var chart = echarts.init(document.getElementById('main'));
   var option = {
       title: {
           text: '使用media属性',
           textStyle: {
               fontSize: 16
           }
       },
       tooltip: {},
       xAxis: {
           data: ['A', 'B', 'C', 'D', 'E', 'F']
       },
       yAxis: {},
       series: [{
           name: '销量',
           type: 'bar',
           data: [5, 20, 36, 10, 10, 20]
       }],
       media: [{
           query: {
               maxWidth: 600
           },
           option: {
               title: {
                   textStyle: {
                       fontSize: 12
                   }
               }
           }
       }, {
           query: {
               minWidth: 601
           },
           option: {
               title: {
                   textStyle: {
                       fontSize: 16
                   }
               }
           }
       }]
   };
   chart.setOption(option);

通过以上方法，可以确保ECharts图表在不同窗口大小下字体大小适配。