echarts怎么导入数据源

在 ECharts 中，“导入数据源”本质上就是：准备好数据（数组 / 对象 / JSON）→ 传给 ECharts 的 option。下面按常见场景给你说明。

一、最基础：直接在代码中写数据

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

<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script>
  const chart = echarts.init(document.getElementById('main'));

  const option = {
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
    yAxis: { type: 'value' },
    series: [{
      type: 'bar',
      data: [120, 200, 150]
    }]
  };

  chart.setOption(option);
</script>

✅ 适合：写死的数据、示例

二、从 JSON 文件导入（常用）

1️⃣ 准备 data.json

{
  "categories": ["Mon", "Tue", "Wed"],
  "values": [120, 200, 150]
}

2️⃣ 使用 fetch 导入

<script>
  fetch('data.json')
    .then(res => res.json())
    .then(data => {
      chart.setOption({
        xAxis: { type: 'category', data: data.categories },
        yAxis: { type: 'value' },
        series: [{
          type: 'bar',
          data: data.values
        }]
      });
    });
</script>

✅ 适合：静态数据、前后端分离

三、从后端接口导入（AJAX / API）

fetch('https://api.example.com/chart-data')
  .then(res => res.json())
  .then(res => {
    chart.setOption({
      xAxis: { type: 'category', data: res.xData },
      yAxis: { type: 'value' },
      series: [{ type: 'line', data: res.yData }]
    });
  });

✅ 适合：动态数据、实时更新

四、从 Excel / CSV 导入（进阶）

使用 PapaParse（CSV）

<script src="https://cdn.jsdelivr.net/npm/papaparse@5/papaparse.min.js"></script>

Papa.parse('data.csv', {
  download: true,
  header: true,
  complete: function(results) {
    const rows = results.data;
    chart.setOption({
      xAxis: { type: 'category', data: rows.map(r => r.date) },
      series: [{ type: 'bar', data: rows.map(r => r.value) }]
    });
  }
});

五、Vue / React 中导入数据

Vue 示例

import * as echarts from 'echarts'

export default {
  mounted() {
    const chart = echarts.init(this.$refs.chart)
    chart.setOption({
      series: [{ type: 'pie', data: this.chartData }]
    })
  },
  data() {
    return {
      chartData: [
        { value: 1048, name: 'A' },
        { value: 735, name: 'B' }
      ]
    }
  }
}

六、常见数据源总结

如果你能告诉我：

• 用什么框架（原生 / Vue / React）
• 数据来源（文件 / 接口 / Excel）
• 图表类型（折线 / 柱状 / 地图）

我可以直接给你一套完整可运行代码。