ECharts入门：基础概念与安装配置
(5) feilong.org 修订于2026-07-13 11:35:23 echarts教程什么是ECharts？
ECharts 是百度开源的 JavaScript 数据可视化库，提供丰富的图表类型和交互功能。它基于 SVG、Canvas 和 HTML5 Canvas 渲染，适用于网页端数据展示需求。其核心特性包括：动态数据更新、多维度数据映射、响应式布局以及高度可定制化的设计。
核心概念解析
1. 图表容器
ECharts 需要一个 DOM 容器作为渲染目标，通常通过 div 元素定义。例如：
|
1 |
<div id="chart" style="width: 600px; height: 400px;"></div> |
2. 初始化配置项
通过 echarts.init() 创建图表实例，并传入配置对象定义数据、样式和交互行为。基础结构如下：
|
1 2 3 4 5 6 7 8 |
const chart = echarts.init(document.getElementById('chart')); chart.setOption({ title: { text: '示例图表' }, tooltip: {}, xAxis: { type: 'category', data: ['A', 'B', 'C'] }, yAxis: { type: 'value' }, series: [{ data: [10, 20, 30], type: 'line' }] }); |
3. 数据格式规范
- 维度数据（xAxis）：分类标签，如
|
1 |
['周一', '周二', ...] |
- 数值数据（series.data）：对应每个维度的值，支持多维数组（如
|
1 |
[10, 20], [30, 40] |
）
安装与配置方法
方法一：CDN 快速引入
通过 CDN 链接直接加载 ECharts 库，无需本地部署。
|
1 2 |
<!-- 引入 ECharts --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script> |
方法二：npm 安装（Node.js 环境）
1. 初始化项目：
|
1 |
npm init -y |
2. 安装依赖：
|
1 |
npm install echarts --save |
3. 在代码中引入：
|
1 |
import * as echarts from 'echarts'; |
方法三：本地文件引用
下载 ECharts 压缩包后，将 echarts.min.js 放置在项目目录，并通过
|
1 |
<script> |
标签引入。
第一个完整示例
以下代码展示一个简单的折线图实现：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 示例</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> const chart = echarts.init(document.getElementById('chart')); chart.setOption({ title: { text: '销售数据趋势' }, tooltip: {}, xAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] }, yAxis: { type: 'value' }, series: [{ name: '销售额', type: 'line', data: [120, 200, 150, 280], itemStyle: { color: '#5470C6' } }] }); </script> </body> </html> |
常见问题与解决方案
1. 图表未显示
- 检查 DOM 容器是否正确加载（确保 div 在 script 之前定义）
- 验证网络请求是否成功获取 ECharts 脚本文件
2. 样式不生效
- 使用浏览器开发者工具检查 CSS 样式覆盖问题
- 确保配置项中的 itemStyle、color 等属性书写正确
3. 响应式布局失效
在容器中添加 resize 事件监听：
|
1 2 3 |
window.addEventListener('resize', () => { chart.resize(); }); |
通过以上步骤，开发者可快速搭建 ECharts 基础环境。后续文章将深入讲解图表类型、数据更新机制及高级交互功能实现。
更新网址：https://feilong.org/echarts-get-started
最初发布：20260713 11:35:23 feilong.org 于广州
加入收藏夹，查看更方便。