通过媒体查询设置legend样式

在ECharts中，虽然ECharts本身并没有提供像CSS Media Queries那样的精确响应式布局能力来针对不同视口尺寸设置图例（legend）样式，但是你可以通过调整图例的位置和大小来间接实现类似的效果。比如，你可以利用ECharts提供的`layout`属性来改变图例的展示位置（如`horizontal`或`vertical`），并结合窗口缩放事件来调整其宽度。

如果你想在特定的屏幕尺寸下更改图例样式，可以考虑在创建图表时根据设备视口大小动态设置图例的相关选项，如大小、字体大小等。不过这需要你自己编写一些JavaScript代码，检测视口变化，并更新相应的配置。

下面是一个示例，展示了如何基于视口宽度来动态改变图例的宽度：

let resizeListener = () => {
  const width = document.documentElement.clientWidth;
  if (width < 768) { // 假设小于这个值才调整图例
    option.legend.width = 'auto'; // 自动调整宽度
  } else {
    option.legend.width = '200px'; // 或者设置固定宽度
  }
  echarts.getInstanceByDom(document.getElementById('myChart')).setOption(option);
};

window.addEventListener('resize', resizeListener);
resizeListener(); // 初始渲染时也调用一次

// 其他配置...
option.legend = {
  // ...其他样式
};