以下是 ECharts 的核心知识点总结及常见图表(折线图、柱状图、饼图)的实现示例,助你快速上手:
一、ECharts 核心知识点
1. 安装引入
- CDN 引入:
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
- npm 安装:
npm install echarts --save
2. 基本步骤
- 准备容器:HTML 中定义
<div>
并设置宽高。 - 初始化实例:
echarts.init(dom)
。 - 配置选项:定义
option
对象。 - 渲染图表:
chart.setOption(option)
。 - 响应式:监听窗口变化调用
chart.resize()
。
3. 核心配置项
- 标题:
title
- 提示框:
tooltip
- 图例:
legend
- 坐标轴:
xAxis
/yAxis
(折线图、柱状图用) - 系列:
series
(定义图表类型和数据) - 工具箱:
toolbox
(保存图片、数据视图等工具)
二、快速实现常见图表
1. 折线图(Line Chart)
<div id="lineChart" style="width: 600px; height: 400px;"></div>
<script>
const lineChart = echarts.init(document.getElementById('lineChart'));
const option = {
title: { text: '月度销售额趋势' },
tooltip: { trigger: 'axis' },
legend: { data: ['2023年', '2024年'] },
xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月'] },
yAxis: { type: 'value' },
series: [
{
name: '2023年',
type: 'line',
data: [150, 230, 224, 218, 135],
smooth: true // 平滑曲线
},
{
name: '2024年',
type: 'line',
data: [200, 180, 250, 190, 220]
}
]
};
lineChart.setOption(option);
// 窗口变化自适应
window.addEventListener('resize', () => lineChart.resize());
</script>
2. 柱状图(Bar Chart)
<div id="barChart" style="width: 600px; height: 400px;"></div>
<script>
const barChart = echarts.init(document.getElementById('barChart'));
const option = {
title: { text: '产品销量对比' },
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
data: ['产品A', '产品B', '产品C', '产品D']
},
yAxis: { type: 'value' },
series: [{
type: 'bar',
data: [120, 200, 150, 80],
itemStyle: { color: '#5470c6' }, // 自定义颜色
barWidth: '40%' // 柱条宽度
}]
};
barChart.setOption(option);
</script>
3. 饼图(Pie Chart)
<div id="pieChart" style="width: 600px; height: 400px;"></div>
<script>
const pieChart = echarts.init(document.getElementById('pieChart'));
const option = {
title: { text: '用户访问来源' },
tooltip: { trigger: 'item' },
legend: { orient: 'vertical', left: 'left' },
series: [{
type: 'pie',
radius: '50%', // 饼图半径
data: [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' }
],
label: {
formatter: '{b}: {d}%' // 显示名称和百分比
}
}]
};
pieChart.setOption(option);
</script>
三、进阶技巧
1. 动态更新数据
// 更新数据
const newData = [30, 50, 70, 90, 110];
lineChart.setOption({
series: [{ data: newData }]
});
2. 主题定制
// 使用内置主题
echarts.init(dom, 'dark');
// 或注册自定义主题
echarts.registerTheme('myTheme', {
color: ['#c23531', '#2f4554', '#61a0a8']
});
echarts.init(dom, 'myTheme');
3. 交互事件
lineChart.on('click', (params) => {
console.log('点击了数据:', params.name, params.value);
});
四、常见问题
1. 图表不显示
- 确保容器设置了宽高。
- 检查
option
配置是否正确。
2. 数据更新不生效
- 使用
setOption(newOption, { notMerge: true })
强制更新。
3. 性能优化
- 大数据量使用
dataset
管理数据。 - 分页加载或使用数据采样。
通过掌握这些核心知识点和示例,你可以快速实现常见图表并定制交互效果。更多配置参考 ECharts 官方文档。