ECharts 安装使用教程
一、ECharts 简介
ECharts（Enterprise Charts）是百度开源的一款基于 JavaScript 的数据可视化图表库。它拥有丰富的图表类型（折线图、柱状图、饼图、地图等）、灵活的配置项和良好的跨平台支持，适用于仪表盘、数据大屏、报表系统等场景。
二、ECharts 安装方式
2.1 使用 CDN 引入（推荐快速入门）
<!-- 在 HTML 中引入 ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
2.2 使用 npm 安装（适用于工程项目）
npm install echarts --save
在模块中引入：
import * as echarts from 'echarts';
三、基本使用示例
3.1 HTML 示例
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>基本折线图</title><script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script><style>#main { width: 600px; height: 400px; }</style></head><body><div id="main"></div><script>var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option = {title: {text: '示例折线图'},tooltip: {},xAxis: {data: ['周一','周二','周三','周四','周五','周六','周日']},yAxis: {},series: [{name: '销量',type: 'line',data: [120, 200, 150, 80, 70, 110, 130]}]};myChart.setOption(option);</script></body>
</html>
四、常用图表类型
| 图表类型 | type 配置值 |
|---|---|
| 折线图 | line |
| 柱状图 | bar |
| 饼图 | pie |
| 散点图 | scatter |
| 雷达图 | radar |
| 地图 | map |
| 仪表盘 | gauge |
| K 线图 | candlestick |
五、响应式与主题切换
5.1 图表自适应容器大小
window.addEventListener('resize', () => {myChart.resize();
});
5.2 更换主题
使用 echarts.init(dom, themeName)，可通过官网提供的主题包使用黑色主题等：
var myChart = echarts.init(document.getElementById('main'), 'dark');
六、与框架集成
- Vue：使用
vue-echarts或手动挂载echarts.init() - React：使用
echarts-for-react - Angular：手动封装组件使用
七、常见问题
Q1: 图表不显示？
- 检查容器是否有明确宽高（必须有）
- 检查是否正确调用
setOption
Q2: 图表刷新不更新？
- 可以手动调用
myChart.setOption(option, true)强制更新
Q3: 控制台报错？
- 检查 ECharts 是否加载成功
- 检查 option 数据结构是否符合格式
八、学习资源推荐
- ECharts 官网
- ECharts 示例库
- ECharts 中文手册
- 菜鸟教程 ECharts 教程
本文由“小奇Java面试”原创发布，转载请注明出处。
可以搜索【小奇JAVA面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。
