ECharts怎么绑定数据

在 ECharts 中，“绑定数据”本质就是：准备数据 → 配置 option → setOption 渲染。下面用最常见的方式一步步说明。

一、最基础的绑定方式（静态数据）

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

// 1. 初始化
const chart = echarts.init(document.getElementById('chart'));

// 2. 配置 option（数据写死）
const option = {
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      data: [120, 200, 150, 80, 70]
    }
  ]
};

// 3. 绑定数据并渲染
chart.setOption(option);

✅ 这里：

• xAxis.data → X 轴数据
• series.data → 图表数据

二、动态绑定数据（最常见）

const xData = [];
const yData = [];

// 模拟接口数据
fetch('/api/chart')
  .then(res => res.json())
  .then(data => {
    data.forEach(item => {
      xData.push(item.date);
      yData.push(item.value);
    });

    chart.setOption({
      xAxis: { type: 'category', data: xData },
      yAxis: { type: 'value' },
      series: [{ type: 'line', data: yData }]
    });
  });

三、更新已有图表的数据

// 只更新 series 数据，不会重置图表
chart.setOption({
  series: [
    {
      data: [300, 400, 500, 600]
    }
  ]
});

四、不同图表的数据绑定位置

折线 / 柱状图

series: [{
  type: 'line',
  data: [10, 20, 30]
}]

饼图

series: [{
  type: 'pie',
  data: [
    { value: 40, name: 'A' },
    { value: 60, name: 'B' }
  ]
}]

散点图

series: [{
  type: 'scatter',
  data: [[10, 20], [30, 40], [50, 60]]
}]

五、Vue / React 中的绑定（简述）

Vue

this.chart.setOption({
  series: [{ data: this.chartData }]
})

React

useEffect(() => {
  chartRef.current.setOption({
    series: [{ data: data }]
  });
}, [data]);

六、常见坑提醒

• ✅ 必须 echarts.init 后再 setOption
• ✅ 数据格式要和图表类型匹配
• ✅ 容器必须有宽高
• ✅ 数据更新用 setOption（不是重新 init）

如果你有：

• 具体图表类型（折线 / 柱状 / 地图）
• 数据格式（数组 / 对象 / 接口返回）
• 使用框架（Vue / React / 原生）

可以直接发出来，我可以给你写完整示例。