ECharts 是百度开源的可视化图表库，支持丰富的交互功能和多样的图表类型。以下为入门指南：

1. 快速入门

  • 安装方式： 

    npm install echarts --save

    或直接通过 CDN 引入：
    https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js

  • 基础结构： 

    // 示例代码
var chart = echarts.init(document.getElementById('main'));
var option = {
  title: { text: '示例图表' },
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: { type: 'value' },
  series: [{ data: [10, 20, 30], type: 'line' }]
};
chart.setOption(option);

2. 核心配置项

  • series: 数据系列，支持折线图、柱状图、饼图等
    柱状图
  • tooltip: 提示框，可配置触发方式（axis/item）
  • legend: 图例，用于区分多个系列
  • grid: 坐标系范围，控制图表位置

3. 常见图表类型

类型 适用场景 示例图片
柱状图 数据对比
柱状图_示例
折线图 趋势分析
折线图_示例
饼图 比例分布
饼图_示例
散点图 数据分布
散点图_示例

4. 扩展阅读

📌 通过 /zh/echarts_examples 可查看更多实际应用场景演示。