------------数据可视化必备，一篇搞定折线图、柱状图、饼图、散点图
什么是 ECharts？
ECharts 是一款由百度开源、Apache 基金会孵化的纯 JavaScript 图表库。它底层依赖轻量级的 Canvas 库 ZRender，提供直观、交互丰富、可高度个性化定制的数据可视化图表。支持折线图、柱状图、饼图、散点图、地图、雷达图、K线图等几十种图表类型，且兼容绝大多数现代浏览器（包括移动端）。
**核心优势**：
-
丰富的图表类型和交互效果（缩放、拖拽、tooltip）
-
大数据量下高性能渲染
-
支持 Canvas 和 SVG 双引擎
-
配置文件完全基于 JSON，上手简单
快速上手
引入 ECharts
**方法一：直接下载或 CDN**
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 示例</title>
<!-- 引入 ECharts 主库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="main" style="width: 800px; height: 500px;"></div>
<script>
// 此处写初始化代码
</script>
</body>
</html>
```
**方法二：npm 安装（用于 Vue/React 项目）**```bash
npm install echarts --save
```
```javascript
import * as echarts from 'echarts';
// 或按需引入：import { init, use } from 'echarts/core';
```
ECharts绘图
折线图：
**效果**：一条带平滑曲线和填充区域的折线图，鼠标悬停显示数据点。
option = {
title: {
text: '2025年某商品销量趋势'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月']
},
yAxis: {
type: 'value',
name: '销量（件）'
},
series: [
{
name: '销量',
type: 'line',
data: [120, 200, 150, 80, 70, 110],
smooth: true,
lineStyle: { width: 3, color: '#5470c6' },
areaStyle: { opacity: 0.2 }
}
]
};柱状图：
多系列柱状图（分组或堆叠）只需在 `series` 数组中添加更多对象，并配置
var option = {
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
xAxis: { type: 'category', data: ['苹果', '华为', '小米', 'OPPO', 'vivo'] },
yAxis: { type: 'value', name: '市场份额 (%)' },
series: [{
name: '2024年Q4',
type: 'bar',
data: [28, 22, 18, 15, 12],
itemStyle: {
borderRadius: [5, 5, 0, 0],
color: '#ee6666'
},
label: { show: true, position: 'top' } // 显示数值标签
}]
};饼图（Pie Chart）:
展示各部分占总体的比例。
var option = {
title: { text: '某网站用户来源', left: 'center' },
tooltip: { trigger: 'item', formatter: '{b}: {d}%' },
series: [{
name: '来源',
type: 'pie',
radius: '55%', // 饼图半径（可设为 ['40%', '70%'] 变成环形图）
data: [
{ value: 1048, name: '搜索引擎', itemStyle: { color: '#5470c6' } },
{ value: 735, name: '直接访问' },
{ value: 580, name: '社交媒体' },
{ value: 484, name: '邮件营销' }
],
emphasis: { scale: true, label: { show: true } },
label: { show: true, position: 'outside', formatter: '{b}: {d}%' }
}]
};散点图（Scatter Plot）：
观察两个变量间的相关性，如身高与体重。
var option = {
xAxis: { name: '身高 (cm)', min: 140, max: 200 },
yAxis: { name: '体重 (kg)', min: 40, max: 100 },
series: [{
type: 'scatter',
data: [
[160, 55], [170, 65], [180, 75], [155, 50],
[175, 70], [185, 80], [165, 60], [190, 85]
],
symbolSize: 12,
itemStyle: { color: '#fac858' }
}]
};南丁格尔玫瑰图：
在饼图基础上突出量级差异，适合周期性数据。
var option = {
series: [{
type: 'pie',
radius: ['20%', '80%'],
roseType: 'radius', // 关键：半径模式
data: [
{ value: 30, name: '玫瑰1' }, { value: 45, name: '玫瑰2' },
{ value: 28, name: '玫瑰3' }, { value: 60, name: '玫瑰4' }
]
}]
};仪表盘：
展示完成率、KPI指标。
var option = {
series: [{
type: 'gauge',
center: ['50%', '50%'],
radius: '70%',
min: 0,
max: 100,
progress: { show: true, width: 18 },
axisLine: { lineStyle: { width: 18, color: [[0.8, '#91cc75']] } },
axisTick: { show: false },
splitLine: { show: false },
axisLabel: { show: false },
pointer: { show: true, length: '60%', width: 8 },
detail: { valueAnimation: true, fontSize: 24, offsetCenter: [0, 20] },
title: { show: false },
data: [{ value: 78, name: '完成率' }]
}]
};大模型微调：（代码评论区回复获取）
**学习资源**：
希望这篇指南能帮你快速产出漂亮的图表。如果你有更好的实践或疑问，欢迎评论区交流。