在前端开发中，数据可视化能够将复杂的数据转化为直观的图表，帮助用户快速理解信息。JavaScript生态中有多个成熟的可视化库，其中D3.js和ECharts是最常用的两个选择，二者在定位和使用方式上有明显差异。
D3.js与ECharts的核心差异
在选择工具前，首先需要了解两个库的核心特点，方便根据项目需求做选择：
| 对比维度 | D3.js | ECharts |
|---|---|---|
| 定位 | 底层数据驱动文档操作库，灵活度高 | 开箱即用的图表库，封装完善 |
| 学习成本 | 较高，需要熟悉SVG、DOM操作 | 较低，配置项清晰易懂 |
| 适用场景 | 高度定制化的复杂可视化需求 | 常规业务图表快速开发 |
使用ECharts实现基础柱状图
ECharts由百度开源，目前由Apache基金会维护，内置了几十种常见图表类型，只需要通过配置项即可快速生成图表，适合快速开发场景。
基础使用步骤
- 引入ECharts库文件
- 准备一个具有宽高的DOM容器
- 初始化ECharts实例
- 设置图表配置项并渲染
完整代码示例
// 引入ECharts，这里使用CDN方式引入
// <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
// 1. 准备容器，需要确保容器有固定宽高
// <div id="echartsContainer" style="width: 600px; height: 400px;"></div>
// 2. 初始化ECharts实例
const chartInstance = echarts.init(document.getElementById('echartsContainer'));
// 3. 定义图表配置项
const chartOption = {
title: {
text: '月度销售额统计'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月']
},
yAxis: {
type: 'value',
name: '销售额（元）'
},
series: [
{
name: '销售额',
type: 'bar',
data: [1200, 1500, 1800, 1300, 2100, 2400],
itemStyle: {
color: '#5470c6'
}
}
]
};
// 4. 渲染图表
chartInstance.setOption(chartOption);
// 5. 监听窗口 resize 事件，自适应调整图表大小
window.addEventListener('resize', () => {
chartInstance.resize();
});
使用D3.js实现基础柱状图
D3.js全称Data-Driven Documents，核心是通过数据驱动DOM操作，底层基于SVG实现，开发者可以完全控制图表的每一个元素，适合需要高度定制化的场景。
基础使用步骤
- 引入D3.js库文件
- 准备SVG容器
- 绑定数据到DOM元素
- 设置图形属性完成绘制
完整代码示例
// 引入D3.js，这里使用CDN方式引入
// <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
// 1. 准备数据
const chartData = [
{ month: '1月', sales: 1200 },
{ month: '2月', sales: 1500 },
{ month: '3月', sales: 1800 },
{ month: '4月', sales: 1300 },
{ month: '5月', sales: 2100 },
{ month: '6月', sales: 2400 }
];
// 2. 设置画布尺寸和边距
const width = 600;
const height = 400;
const margin = { top: 40, right: 20, bottom: 40, left: 50 };
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
// 3. 创建SVG容器
const svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// 4. 设置比例尺
const xScale = d3.scaleBand()
.domain(chartData.map(d => d.month))
.range([0, innerWidth])
.padding(0.2);
const yScale = d3.scaleLinear()
.domain([0, d3.max(chartData, d => d.sales)])
.range([innerHeight, 0]);
// 5. 绘制坐标轴
svg.append('g')
.attr('transform', `translate(0, ${innerHeight})`)
.call(d3.axisBottom(xScale));
svg.append('g')
.call(d3.axisLeft(yScale));
// 6. 绘制柱状图
svg.selectAll('.bar')
.data(chartData)
.enter()
.append('rect')
.attr('class', 'bar')
.attr('x', d => xScale(d.month))
.attr('y', d => yScale(d.sales))
.attr('width', xScale.bandwidth())
.attr('height', d => innerHeight - yScale(d.sales))
.attr('fill', '#5470c6');
// 7. 添加标题
svg.append('text')
.attr('x', innerWidth / 2)
.attr('y', -10)
.attr('text-anchor', 'middle')
.style('font-size', '16px')
.text('月度销售额统计');
工具选择建议
如果是常规的业务系统开发，需要快速实现折线图、柱状图、饼图等常见图表，优先选择ECharts，其配置项文档完善，社区资源丰富，遇到问题容易找到解决方案。
如果是需要开发独特的、定制化程度很高的可视化效果，比如自定义的地图可视化、复杂的关系网络图，D3.js会更合适，虽然学习成本高，但可以实现几乎任何你能想到的可视化效果。
无论选择哪个工具，核心都是先明确数据结构和展示需求，再对应调整配置或编写绘制逻辑，同时需要注意图表的响应式适配，确保在不同屏幕尺寸下都能正常展示。
JavaScript数据可视化D3_jsECharts修改时间：2026-06-20 00:57:31