ECharts 的核心知识点总结及常见图表示例

以下是 ECharts 的核心知识点总结及常见图表（折线图、柱状图、饼图）的实现示例，助你快速上手：

---

一、ECharts 核心知识点

1. 安装引入

• CDN 引入：

  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
  

• npm 安装：

  npm install echarts --save
  

2. 基本步骤

1. 准备容器：HTML 中定义 <div> 并设置宽高。
2. 初始化实例：echarts.init(dom)。
3. 配置选项：定义 option 对象。
4. 渲染图表：chart.setOption(option)。
5. 响应式：监听窗口变化调用 chart.resize()。

3. 核心配置项

• 标题：title
• 提示框：tooltip
• 图例：legend
• 坐标轴：xAxis / yAxis（折线图、柱状图用）
• 系列：series（定义图表类型和数据）
• 工具箱：toolbox（保存图片、数据视图等工具）

---

二、快速实现常见图表

1. 折线图（Line Chart）

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

<script>
const lineChart = echarts.init(document.getElementById('lineChart'));
const option = {
  title: { text: '月度销售额趋势' },
  tooltip: { trigger: 'axis' },
  legend: { data: ['2023年', '2024年'] },
  xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月'] },
  yAxis: { type: 'value' },
  series: [
    { 
      name: '2023年',
      type: 'line',
      data: [150, 230, 224, 218, 135],
      smooth: true // 平滑曲线
    },
    {
      name: '2024年',
      type: 'line',
      data: [200, 180, 250, 190, 220]
    }
  ]
};
lineChart.setOption(option);

// 窗口变化自适应
window.addEventListener('resize', () => lineChart.resize());
</script>

2. 柱状图（Bar Chart）

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

<script>
const barChart = echarts.init(document.getElementById('barChart'));
const option = {
  title: { text: '产品销量对比' },
  tooltip: { trigger: 'axis' },
  xAxis: { 
    type: 'category',
    data: ['产品A', '产品B', '产品C', '产品D']
  },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: [120, 200, 150, 80],
    itemStyle: { color: '#5470c6' }, // 自定义颜色
    barWidth: '40%' // 柱条宽度
  }]
};
barChart.setOption(option);
</script>

3. 饼图（Pie Chart）

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

<script>
const pieChart = echarts.init(document.getElementById('pieChart'));
const option = {
  title: { text: '用户访问来源' },
  tooltip: { trigger: 'item' },
  legend: { orient: 'vertical', left: 'left' },
  series: [{
    type: 'pie',
    radius: '50%', // 饼图半径
    data: [
      { value: 1048, name: '搜索引擎' },
      { value: 735, name: '直接访问' },
      { value: 580, name: '邮件营销' }
    ],
    label: {
      formatter: '{b}: {d}%' // 显示名称和百分比
    }
  }]
};
pieChart.setOption(option);
</script>

---

三、进阶技巧

1. 动态更新数据

// 更新数据
const newData = [30, 50, 70, 90, 110];
lineChart.setOption({
  series: [{ data: newData }]
});

2. 主题定制

// 使用内置主题
echarts.init(dom, 'dark');

// 或注册自定义主题
echarts.registerTheme('myTheme', {
  color: ['#c23531', '#2f4554', '#61a0a8']
});
echarts.init(dom, 'myTheme');

3. 交互事件

lineChart.on('click', (params) => {
  console.log('点击了数据:', params.name, params.value);
});

---

四、常见问题

1. 图表不显示

• 确保容器设置了宽高。
• 检查 option 配置是否正确。

2. 数据更新不生效

• 使用 setOption(newOption, { notMerge: true }) 强制更新。

3. 性能优化

• 大数据量使用 dataset 管理数据。
• 分页加载或使用数据采样。

---

通过掌握这些核心知识点和示例，你可以快速实现常见图表并定制交互效果。更多配置参考 ECharts 官方文档。