如何设置echarts图表没有接受到数据时依然显示xy坐标轴

在ECharts中，当数据尚未加载或者加载失败时，你可以通过配置项来保持坐标轴始终可见。以下是实现这个效果的步骤：

1. 首先，确保你在初始化图表时设置了`responsive`属性，这会让图表能够自适应其容器大小，即使数据未加载。

const chart = echarts.init(document.getElementById('main'), 'line', {
  responsive: true,
});

2. 接下来，在配置数据系列(`series`)时，添加一个`data`选项，并设置成空数组，如`[]`。同时，开启`visualMap`来展示数值范围，即使没有实际的数据点也可以看到坐标轴。

chart.setOption({
  series: [{
    name: '无数据时显示',
    type: 'line',
    data: [],
    visualMap: {
      show: false, // 这里关闭视觉映射，因为我们不需要颜色映射
      pieces: [{
        max: 100, // 设置一个最大值，即使数据为空也能看到坐标轴
        value: 100,
      }],
    },
    xAxis: {
      show: true, // 显示x轴
    },
    yAxis: {
      show: true, // 显示y轴
    }
  }]
});

3. 当你的数据准备好并填充到图表时，再更新`series.data`即可。如果数据为空或无法获取，上述配置将始终保持坐标轴可见。

async function loadData() {
  try {
    const data = await fetchData(); // 假设这是一个异步操作
    chart.setOption({ series: [{ data }] });
  } catch (error) {
    chart.setOption({ series: [{ data: [] }] }); // 数据无法获取时，显示空数据
  }
}