前端数据可视化指的是在浏览器里把后台数据用图形方式呈现出来，而JavaScript图表库就是实现这件事的主要工具。选对一个合适的库，能省下大量手写Canvas或SVG的时间。
常见JavaScript图表库对比
目前社区里比较常用的图表库有ECharts、Chart.js、D3.js等。它们定位不同，适用场景也有差别。
| 库名称 | 特点 | 适合场景 |
|---|---|---|
| ECharts | 功能全、文档中文友好、配置式 | 中后台报表、大屏 |
| Chart.js | 轻量、易上手 | 简单展示页 |
| D3.js | 灵活、偏底层 | 高度定制可视化 |
用ECharts画一个基础柱状图
ECharts采用配置项驱动，只要准备好option对象，就能渲染图表。下面演示最小可用代码。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>ECharts示例</title>
<script src="https://cdn.ipipp.com/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script>
// 初始化图表实例
var chart = echarts.init(document.getElementById('main'));
// 配置项
var option = {
title: { text: '月度销量' },
tooltip: {},
xAxis: { data: ['一月', '二月', '三月'] },
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [120, 200, 150]
}]
};
// 渲染
chart.setOption(option);
</script>
</body>
</html>
关键配置说明
xAxis与yAxis定义坐标轴，柱状图一般只需类目轴和数据轴。series里的type设为bar表示柱状图，data是具体数值。- 调用setOption之后图表才会绘制到页面。
选型建议
如果项目以中文环境为主、报表复杂，优先用ECharts；只是做个小页面统计，Chart.js更轻；需要完全自由绘制图形时再考虑D3.js。理解这些JavaScript图表库的差异，前端数据可视化工作会更顺手。
前端数据可视化JavaScript图表库ECharts修改时间：2026-07-25 15:15:27