响应式设计配置

响应式设计配置让ECharts图表能够根据容器尺寸变化自动调整自身布局和样式，适用于多终端场景。通过配置项和API的结合，可以实现动态适配不同屏幕尺寸的需求。

响应式基础配置

ECharts通过resize方法和responsive配置项实现基础响应式功能。当容器尺寸发生变化时，需要显式调用resize方法触发重绘：

const chart = echarts.init(document.getElementById('chart-container'));
window.addEventListener('resize', function() {
  chart.resize();
});

核心响应式配置参数包括：

• responsive：设为true启用响应式布局
• media数组：定义不同断点下的样式规则
• option中的grid/legend等定位属性支持百分比值

断点媒体查询配置

通过media数组可以实现类似CSS媒体查询的效果，每个媒体查询规则包含：

• query：媒体查询条件
• option：匹配条件时应用的配置

option = {
  media: [
    {
      query: {
        maxWidth: 500  // 当容器宽度小于500px时
      },
      option: {
        legend: {
          right: 10,
          top: '15%',
          orient: 'vertical'
        },
        series: [
          {
            radius: [0, '30%'],
            center: ['50%', '50%']
          }
        ]
      }
    },
    {
      query: {
        minWidth: 501  // 宽度大于500px时
      },
      option: {
        legend: {
          right: '5%',
          top: '5%',
          orient: 'horizontal'
        },
        series: [
          {
            radius: ['50%', '70%'],
            center: ['50%', '50%']
          }
        ]
      }
    }
  ]
}

动态数据适配方案

响应式设计不仅需要考虑布局，还需要处理数据展示的适配。通过dataset结合数据转换可以实现：

function generateOption(width) {
  return {
    dataset: {
      dimensions: ['product', 'sales'],
      source: width > 768 ? 
        // 大屏显示完整数据
        [
          ['Mon', 120],
          ['Tue', 200],
          ['Wed', 150],
          ['Thu', 80],
          ['Fri', 70],
          ['Sat', 110],
          ['Sun', 130]
        ] : 
        // 小屏显示精简数据
        [
          ['Mon', 120],
          ['Wed', 150],
          ['Fri', 70],
          ['Sun', 130]
        ]
    },
    xAxis: {
      type: 'category'
    },
    yAxis: {},
    series: [{ type: 'bar' }]
  };
}

组件级响应式控制

ECharts支持对各个组件单独设置响应式规则，常见配置模式：

option = {
  title: {
    text: '销售数据',
    // 标题字体大小响应式
    textStyle: {
      fontSize: function(width) {
        return width / 20;
      }
    }
  },
  tooltip: {
    // 小屏禁用动画
    animation: function(width) {
      return width > 480;
    }
  },
  legend: {
    // 根据宽度切换布局方向
    orient: function(width) {
      return width > 600 ? 'horizontal' : 'vertical';
    }
  }
}

移动端特殊处理

针对移动端触摸操作需要额外配置：

option = {
  // 禁用移动端数据区域缩放
  dataZoom: [{
    type: 'slider',
    filterMode: 'filter',
    start: 0,
    end: 100,
    // 只在PC端显示
    show: (function() {
      return window.innerWidth > 768;
    })()
  }],
  // 触摸延迟设置
  tooltip: {
    enterable: true,
    extraCssText: 'max-width: 300px;',
    hideDelay: 100
  }
}

性能优化策略

响应式场景下的性能注意事项：

1. 使用throttle控制resize触发频率
2. 复杂图表建议关闭animation
3. 预生成不同尺寸的配置对象

// 节流处理resize
function throttle(fn, delay) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

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

服务端渲染适配

SSR环境下需要特殊处理容器尺寸检测：

// 在Next.js等框架中的处理示例
useEffect(() => {
  const handleResize = () => {
    if (chartRef.current) {
      const chart = echarts.getInstanceByDom(chartRef.current);
      chart && chart.resize();
    }
  };

  window.addEventListener('resize', handleResize);
  
  // 初始化时手动触发一次resize
  const timer = setTimeout(() => {
    handleResize();
  }, 100);

  return () => {
    window.removeEventListener('resize', handleResize);
    clearTimeout(timer);
  };
}, []);

多实例联动响应

多个图表需要同步响应时的处理方案：

const charts = [];

function initCharts() {
  const containers = document.querySelectorAll('.chart-container');
  containers.forEach(container => {
    const chart = echarts.init(container);
    charts.push(chart);
  });
}

window.addEventListener('resize', function() {
  charts.forEach(chart => {
    chart.resize();
  });
});

自定义响应规则

通过API扩展实现更复杂的响应逻辑：

function createResponsiveRule(chart) {
  const baseOption = chart.getOption();
  
  return function() {
    const width = chart.getWidth();
    const newOption = {};
    
    if (width < 400) {
      newOption.grid = { top: '15%', bottom: '25%' };
      newOption.series = baseOption.series.map(series => {
        return { ...series, label: { show: false } };
      });
    } else {
      newOption.grid = { top: '10%', bottom: '15%' };
    }
    
    chart.setOption(newOption, true);
  };
}

const chart = echarts.init(document.getElementById('main'));
chart.setOption(baseOption);
const responsiveHandler = createResponsiveRule(chart);
window.addEventListener('resize', responsiveHandler);