Echarts折线图从入门到精通 50个实战案例带你掌握数据可视化核心技巧

容器（id=“main”），这是ECharts渲染图表的画布。
引入ECharts
：通过CDN链接引入ECharts的核心库文件。
初始化实例
：使用
echarts.init()
方法初始化一个ECharts实例，绑定到准备好的DOM容器上。
配置项（option）
：这是ECharts的核心，一个JavaScript对象，描述了图表的所有视觉元素和交互行为。
title
：图表标题，可以设置文本、位置、样式等。
tooltip
：提示框组件，当鼠标悬停在数据点上时显示详细信息。空对象
{}
表示使用默认配置。
legend
：图例组件，用于标识系列（series）的名称。
data
数组应与
series
中的
name
对应。
xAxis
：直角坐标系中的x轴配置。
type
默认为
‘category’
（类目轴），
data
指定了各个数据点的类别名称。
yAxis
：直角坐标系中的y轴配置，默认为
‘value’
（数值轴），会自动根据数据范围调整刻度。
series
：系列列表，每个系列通过
type
指定图表类型，
data
提供具体数据。这里
type: ‘line’
明确表示这是一个折线图。
渲染图表
：最后调用
myChart.setOption(option)
方法，将配置项应用到图表实例，完成渲染。
这个案例展示了ECharts最基本的使用模式：
准备容器 -> 引入库 -> 初始化 -> 定义option -> 设置option
。掌握了这个流程，你就迈出了ECharts开发的第一步。
1.2 基础配置项详解
ECharts的配置项非常丰富，理解其结构是精通ECharts的基础。折线图的基础配置项主要集中在以下几个部分：
1. 全局样式与主题
ECharts支持自定义主题，也可以使用内置的
‘dark’
主题。在初始化时可以指定主题。
// 使用内置的dark主题
var myChart = echarts.init(document.getElementById(‘main’), ‘dark’);
2. 标题（title）
标题组件可以配置位置、字体、颜色等。
title: {
text: ‘销售趋势分析’,
subtext: ‘2023年度数据’, // 副标题
left: ‘center’, // 水平安放位置，’left’, ‘center’, ‘right’
top: 10, // 垂直安放位置，数值或’top’, ‘middle’, ‘bottom’
textStyle: { // 主标题样式
fontSize: 18,
color: ‘#333’
}
}
3. 提示框（tooltip）
提示框是交互的重要部分，可以自定义显示内容和格式。
tooltip: {
trigger: ‘axis’, // 触发类型，’item’（数据项触发）或’axis’（坐标轴触发）
axisPointer: { // 指示器类型
type: ‘line’, // ‘line’直线指示器，’shadow’阴影指示器，’cross’十字准星指示器
lineStyle: {
color: ‘#555’,
width: 1,
type: ‘solid’
}
},
formatter: function (params) {
// 自定义显示内容
// params是当前数据点的相关信息
return params[0].name + ‘
‘ + params[0].seriesName + ‘: ‘ + params[0].value;
}
}
4. 图例（legend）
图例用于切换系列的显示和隐藏，对于多条折线的场景非常有用。
legend: {
data: [‘系列1’, ‘系列2’], // 必须与series中的name对应
orient: ‘horizontal’, // 布局方式，’horizontal’水平，’vertical’垂直
left: 10, // 距离容器左侧的距离
top: 40, // 距离容器顶部的距离
textStyle: { // 图例文本样式
color: ‘#666’
}
}
5. 坐标轴（xAxis, yAxis）
坐标轴是折线图的骨架，可以配置类型、位置、刻度等。
xAxis: {
type: ‘category’, // 类目轴，适用于离散数据
data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’],
// 位置，默认在底部
position: ‘bottom’,
// 坐标轴名称
name: ‘星期’,
// 坐标轴刻度配置
axisTick: {
alignWithLabel: true // 刻度标签与刻度对齐
},
// 坐标轴标签配置
axisLabel: {
rotate: 0, // 刻度标签旋转角度
fontSize: 12
}
},
yAxis: {
type: ‘value’, // 数值轴，适用于连续数据
name: ‘数值’,
// 分割线配置
splitLine: {
show: true,
lineStyle: {
color: [‘#eee’],
width: 1,
type: ‘dashed’
}
}
}
6. 系列（series）
系列是图表的数据部分，对于折线图，可以配置线条样式、标记点、标记线等。
series: [{
name: ‘销量’,
type: ‘line’,
data: [5, 20, 36, 10, 10, 20],
// 是否平滑曲线显示
smooth: true,
// 线条样式
lineStyle: {
width: 3,
color: ‘#5470c6’,
type: ‘solid’ // ‘solid’, ‘dashed’, ‘dotted’
},
// 填充区域
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: ‘rgba(84, 112, 198, 0.5)’ },
{ offset: 1, color: ‘rgba(84, 112, 198, 0.1)’ }
])
},
// 标记点
markPoint: {
data: [
{ type: ‘max’, name: ‘最大值’ },
{ type: ‘min’, name: ‘最小值’ }
]
},
// 标记线
markLine: {
data: [
{ type: ‘average’, name: ‘平均值’ }
]
}
}]
通过这些基础配置项的组合，你可以创建出满足基本需求的折线图。接下来的案例将在此基础上进行扩展和深化。
2. 数据处理与动态更新
2.1 异步数据加载
在实际应用中，数据通常来自后端API，需要异步获取。ECharts支持动态更新数据，只需调用
setOption
方法即可。
// 假设我们有一个获取数据的API
function fetchData() {
return fetch(‘/api/sales-data’)
.then(response => response.json())
.then(data => {
// 假设返回的数据格式为：
// { categories: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’], values: [120, 200, 150, 80, 70, 110] }
return data;
});
}

// 初始化图表
var myChart = echarts.init(document.getElementById(‘main’));

// 初始配置（可以包含空数据或占位符）
var option = {
title: { text: ‘月度销售数据’ },
tooltip: { trigger: ‘axis’ },
xAxis: { type: ‘category’, data: [] },
yAxis: { type: ‘value’ },
series: [{ type: ‘line’, data: [] }]
};
myChart.setOption(option);

// 获取数据并更新图表
fetchData().then(data => {
myChart.setOption({
xAxis: { data: data.categories },
series: [{ data: data.values }]
});
});
代码解析：
初始化
：首先创建一个带有空数据的图表，避免页面空白。
异步获取
：使用
fetch
API（或XMLHttpRequest、axios等）从服务器请求数据。
更新图表
：在数据返回后，再次调用
setOption
，只传入需要更新的部分（xAxis的data和series的data）。ECharts会智能地合并配置，只更新变化的部分，实现平滑的动画过渡。
2.2 数据更新动画
ECharts内置了流畅的数据更新动画。当数据变化时，折线会平滑地移动到新位置。可以通过
animation
配置项控制动画效果。
series: [{
type: ‘line’,
data: [/* 动态数据 */],
// 开启动画
animation: true,
// 动画时长，单位秒
animationDuration: 1000,
// 动画缓动效果
animationEasing: ‘cubicOut’, // ‘linear’, ‘quadraticIn’, ‘cubicOut’, ‘elasticOut’等
// 延迟动画时间
animationDelay: 0,
// 数据更新动画配置
animationDurationUpdate: 500,
animationEasingUpdate: ‘cubicOut’
}]
2.3 数据预处理与转换
有时后端返回的数据格式与ECharts需要的格式不一致，需要在前端进行转换。
案例：将对象数组转换为ECharts格式
假设后端返回的数据格式如下：
[
{ “date”: “2023-01-01”, “sales”: 120 },
{ “date”: “2023-01-02”, “sales”: 150 },
{ “date”: “2023-01-03”, “sales”: 180 }
]
我们需要将其转换为：
categories
: [“2023-01-01”, “2023-01-02”, “2023-01-03”]
values
: [120, 150, 180]
const rawData = [
{ “date”: “2023-01-01”, “sales”: 120 },
{ “date”: “2023-01-02”, “sales”: 150 },
{ “date”: “2023-01-03”, “sales”: 180 }
];

// 使用数组的map方法进行转换
const categories = rawData.map(item => item.date);
const values = rawData.map(item => item.sales);

// 更新图表
myChart.setOption({
xAxis: { data: categories },
series: [{ data: values }]
});
案例：处理缺失数据
在实际业务中，数据可能存在缺失。ECharts提供了
series.line.connectNulls
配置项来处理这种情况。
series: [{
type: ‘line’,
data: [100, 200, null, 150, 300], // 第三个数据点缺失
connectNulls: true // 将缺失的点连接起来，形成连续的线
// 如果设置为false，则缺失点处会断开
}]
3. 视觉映射与样式定制
3.1 线条样式与区域填充
折线图的视觉表现力很大程度上取决于线条和填充区域的样式。
案例：渐变色填充与虚线
series: [{
name: ‘利润’,
type: ‘line’,
data: [10, 22, 15, 30, 28, 35],
// 线条样式
lineStyle: {
width: 4,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: ‘#5470c6’ },
{ offset: 0.5, color: ‘#91cc75’ },
{ offset: 1, color: ‘#fac858’ }
]),
type: ‘dashed’ // 实线’solid’，虚线’dashed’，点线’dotted’
},
// 区域填充样式
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: ‘rgba(84, 112, 198, 0.6)’ },
{ offset: 1, color: ‘rgba(84, 112, 198, 0.1)’ }
])
},
// 是否平滑曲线
smooth: true
}]
代码解析：
echarts.graphic.LinearGradient
：创建线性渐变对象，参数为(x0, y0, x1, y1, colorStops)。可以用于线条颜色和区域填充颜色。
lineStyle.type
：控制线条的样式，虚线和点线在表示预测值或辅助线时非常有用。
smooth: true
：将折线转换为平滑的曲线，使图表看起来更美观，但可能会影响数据的精确性。
3.2 标记点与标记线
标记点（markPoint）和标记线（markLine）用于突出显示数据中的重要信息，如最大值、最小值、平均值或自定义阈值。
案例：自定义标记点和标记线
series: [{
type: ‘line’,
data: [820, 932, 901, 934, 1290, 1330, 1320],
// 标记点
markPoint: {
data: [
{ type: ‘max’, name: ‘峰值’ },
{ type: ‘min’, name: ‘谷值’ },
{
coord: [3, 934], // 指定坐标，x轴索引3，y轴值934
name: ‘特殊点’,
value: ‘异常’,
itemStyle: {
color: ‘#ff0000’
}
}
],
// 标记点样式
label: {
show: true,
formatter: ‘{b}’ // 显示名称
}
},
// 标记线
markLine: {
data: [
{ type: ‘average’, name: ‘平均值’ },
{
yAxis: 1000, // 水平线，y轴=1000
name: ‘目标线’,
lineStyle: {
color: ‘#ff0000’,
type: ‘dashed’
},
label: {
formatter: ‘目标: {c}’ // 显示值
}
},
{
xAxis: 4, // 垂直线，x轴索引4
name: ‘关键日期’
}
],
// 标记线动画
animation: true,
animationDuration: 2000
}
}]
代码解析：
markPoint.data
：支持内置类型（
‘max’
,
‘min’
,
‘average’
）和自定义坐标点。
markLine.data
：同样支持内置类型和自定义阈值线。可以设置
xAxis
或
yAxis
来定义垂直线或水平线。
自定义样式：可以通过
itemStyle
（标记点）和
lineStyle
（标记线）来定制颜色、线型等。
3.3 数据区域缩放（dataZoom）
当数据量很大时，折线图会显得拥挤。ECharts提供了
dataZoom
组件，允许用户缩放数据区域，查看细节。
案例：内置缩放组件
option = {
title: { text: ‘大数据量折线图’ },
tooltip: { trigger: ‘axis’ },
xAxis: {
type: ‘category’,
data: Array.from({length: 100}, (_, i) => `第${i+1}天`)
},
yAxis: { type: ‘value’ },
// 数据区域缩放
dataZoom: [
{
type: ‘slider’, // 滑块型dataZoom
start: 0, // 默认起始位置（0%）
end: 20, // 默认结束位置（20%）
height: 20, // 高度
bottom: 10 // 距离容器底部距离
},
{
type: ‘inside’, // 内置型dataZoom，鼠标滚轮缩放
start: 0,
end: 20
}
],
series: [{
type: ‘line’,
data: Array.from({length: 100}, () => Math.floor(Math.random() * 1000)),
// 大数据量优化
large: true // 开启大数据量优化模式
}]
}
代码解析：
dataZoom
：是一个数组，可以配置多个缩放组件。常用类型：
slider
：显示滑块，用户可以拖动选择区域。
inside
：内置于图表中，通过鼠标滚轮或手指滑动缩放。
start
和
end
：控制显示的数据范围，单位是百分比。
large
：对于大数据量（如上万点），开启
large
模式可以提升渲染性能，ECharts会采用散点图的方式优化渲染。
4. 交互与动态行为
4.1 图例切换与数据视图
ECharts的图例（legend）默认支持点击切换对应系列的显示/隐藏。此外，还可以添加数据视图工具，允许用户查看和编辑数据。
案例：启用数据视图和缩放
option = {
title: { text: ‘交互式折线图’ },
tooltip: { trigger: ‘axis’ },
// 工具栏
toolbox: {
feature: {
dataZoom: { // 数据区域缩放
yAxisIndex: ‘none’ // 不缩放y轴
},
dataView: { // 数据视图
readOnly: false // 允许编辑数据
},
restore: {}, // 还原配置
saveAsImage: {} // 保存为图片
}
},
legend: {
data: [‘邮件营销’, ‘联盟广告’]
},
xAxis: {
type: ‘category’,
data: [‘周一’, ‘周二’, ‘周三’, ‘周四’, ‘周五’, ‘周六’, ‘周日’]
},
yAxis: { type: ‘value’ },
series: [
{
name: ‘邮件营销’,
type: ‘line’,
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: ‘联盟广告’,
type: ‘line’,
data: [220, 182, 191, 234, 290, 330, 310]
}
]
}
代码解析：
toolbox
：工具栏组件，提供了一系列内置工具。
feature
：定义工具栏中的具体功能。
dataZoom
：添加缩放工具。
dataView
：添加数据视图工具，点击后会弹出一个表格，显示当前数据，
readOnly: false
允许用户编辑并应用更改。
restore
：重置图表状态。
saveAsImage
：将图表保存为图片。
图例交互：点击图例中的”邮件营销”或”联盟广告”，对应的折线会隐藏或显示。
4.2 事件监听与响应
ECharts提供了丰富的事件API，允许开发者监听图表的交互行为，如点击、鼠标悬停等，并执行自定义逻辑。
案例：点击数据点弹出信息
// 初始化图表
var myChart = echarts.init(document.getElementById(‘main’));

// 配置option
var option = {
tooltip: { trigger: ‘axis’ },
xAxis: { type: ‘category’, data: [‘A’, ‘B’, ‘C’, ‘D’, ‘E’] },
yAxis: { type: ‘value’ },
series: [{
type: ‘line’,
data: [10, 22, 15, 30, 28],
// 标记点可点击
markPoint: {
data: [{ type: ‘max’, name: ‘最大值’ }]
}
}]
};
myChart.setOption(option);

// 监听点击事件
myChart.on(‘click’, function (params) {
// params包含点击点的详细信息
console.log(params);

// 判断点击的是系列数据点还是标记点
if (params.componentType === ‘series’) {
if (params.seriesType === ‘line’) {
// 系列数据点
alert(`点击了数据点：\n类别：${params.name}\n数值：${params.value}`);
} else if (params.seriesType === ‘markPoint’) {
// 标记点
alert(`点击了标记点：${params.name}`);
}
}
});

// 监听图例切换事件
myChart.on(‘legendselectchanged’, function (params) {
console.log(‘图例切换:’, params.selected);
// 可以在这里执行其他逻辑，如更新其他组件
});
代码解析：
myChart.on(eventName, handler)
：绑定事件监听器。
params
：事件回调函数的参数，包含丰富的上下文信息。
componentType
：组件类型，如
‘series’
（系列）、
‘legend’
（图例）等。
seriesType
：系列类型，如
‘line’
。
name
：数据点名称（x轴类别）。
value
：数据值。
dataIndex
：数据索引。
通过事件监听，可以实现与外部页面的联动，如点击图表更新旁边的详细信息面板。
4.3 异步动画与加载状态
在数据加载过程中，显示加载动画可以提升用户体验。ECharts提供了内置的加载和取消加载方法。
案例：数据加载动画
// 显示加载动画
myChart.showLoading({
text: ‘加载中…’,
color: ‘#c23531’,
maskColor: ‘rgba(255, 255, 255, 0.8)’,
textStyle: { fontSize: 20 }
});

// 模拟异步请求
setTimeout(() => {
// 隐藏加载动画
myChart.hideLoading();

// 设置新数据
myChart.setOption({
xAxis: { data: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’] },
series: [{
type: ‘line’,
data: [120, 200, 150, 80, 70]
}]
});
}, 2000); // 模拟2秒延迟
代码解析：
showLoading()
：显示ECharts内置的加载遮罩层。
hideLoading()
：隐藏加载遮罩层。
通常在调用异步接口前显示加载，数据返回后隐藏加载并更新图表。
5. 高级技巧：多系列与组合图表
5.1 多条折线与堆叠折线图
在实际业务中，经常需要对比多组数据。ECharts支持在同一个图表中绘制多条折线。
案例：多条折线对比
option = {
title: { text: ‘多产品线销售对比’ },
tooltip: { trigger: ‘axis’ },
legend: {
data: [‘产品A’, ‘产品B’, ‘产品C’]
},
xAxis: {
type: ‘category’,
data: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’]
},
yAxis: { type: ‘value’ },
series: [
{
name: ‘产品A’,
type: ‘line’,
data: [120, 132, 101, 134, 90, 230],
lineStyle: { width: 2 },
smooth: true
},
{
name: ‘产品B’,
type: ‘line’,
data: [220, 182, 191, 234, 290, 330],
lineStyle: { width: 2 },
smooth: true
},
{
name: ‘产品C’,
type: ‘line’,
data: [150, 230, 201, 154, 190, 330],
lineStyle: { width: 2 },
smooth: true
}
]
}
案例：堆叠折线图
堆叠折线图用于显示各部分对总体的贡献，以及总体趋势。
option = {
title: { text: ‘堆叠折线图’ },
tooltip: { trigger: ‘axis’ },
legend: {
data: [‘直接访问’, ‘邮件营销’, ‘联盟广告’]
},
xAxis: {
type: ‘category’,
data: [‘周一’, ‘周二’, ‘周三’, ‘周四’, ‘周五’, ‘周六’, ‘周日’]
},
yAxis: { type: ‘value’ },
series: [
{
name: ‘直接访问’,
type: ‘line’,
stack: ‘总量’, // 相同的stack值表示堆叠
areaStyle: {}, // 堆叠图通常需要填充区域
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: ‘邮件营销’,
type: ‘line’,
stack: ‘总量’,
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: ‘联盟广告’,
type: ‘line’,
stack: ‘总量’,
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310]
}
]
}
代码解析：
多条折线
：在
series
数组中添加多个对象，每个对象定义一条折线。通过
legend
的
data
与
series
的
name
对应，实现图例控制。
堆叠折线
：关键配置是
stack: ‘总量’
。所有设置了相同
stack
值的系列会进行堆叠。通常配合
areaStyle
使用，使堆叠效果更明显。
5.2 折线图与其他图表组合
ECharts支持混合图表，可以在同一个直角坐标系中组合不同类型的图表，如折线图+柱状图。
案例：折线图与柱状图组合（双Y轴）
option = {
title: { text: ‘销售与利润率’ },
tooltip: { trigger: ‘axis’, axisPointer: { type: ‘cross’ } },
legend: {
data: [‘销售额’, ‘利润率’]
},
xAxis: {
type: ‘category’,
data: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’]
},
yAxis: [
{
type: ‘value’,
name: ‘销售额’,
position: ‘left’,
axisLabel: {
formatter: ‘{value} 万元’
}
},
{
type: ‘value’,
name: ‘利润率’,
position: ‘right’,
axisLabel: {
formatter: ‘{value}%’
}
}
],
series: [
{
name: ‘销售额’,
type: ‘bar’, // 柱状图
data: [120, 132, 101, 134, 90, 230],
itemStyle: {
color: ‘#5470c6’
}
},
{
name: ‘利润率’,
type: ‘line’, // 折线图
yAxisIndex: 1, // 使用第二个y轴
data: [5.5, 6.2, 5.8, 6.5, 5.0, 7.2],
lineStyle: {
width: 3,
color: ‘#91cc75’
},
itemStyle: {
color: ‘#91cc75’
}
}
]
}
代码解析：
双Y轴
：
yAxis
配置为数组，定义两个Y轴。第一个在左侧（
position: ‘left’
），第二个在右侧（
position: ‘right’
）。
系列对应Y轴
：在
series
中，通过
yAxisIndex
指定该系列使用的Y轴索引（0表示第一个，1表示第二个）。销售额使用柱状图（
type: ‘bar’
）并关联左侧Y轴，利润率使用折线图（
type: ‘line’
）并关联右侧Y轴。
提示框
：
axisPointer: { type: ‘cross’ }
在悬停时显示十字准星，方便同时查看两个系列的数据。
5.3 响应式与自适应布局
在现代Web应用中，图表需要适应不同屏幕尺寸。ECharts提供了
resize
方法，使图表能够随容器大小变化而自动调整。
案例：响应式折线图

代码解析：
CSS媒体查询
：通过CSS控制容器的大小，使其在不同屏幕下有不同的尺寸。
resize()
方法
：在窗口大小变化时（
window.resize
事件），调用
myChart.resize()
，ECharts会自动重新计算并渲染图表，保持清晰度和正确布局。
6. 性能优化与大数据量处理
6.1 大数据量优化策略
当数据点数量达到成千上万时，普通渲染方式会导致页面卡顿。ECharts提供了多种优化策略。
案例：大数据量折线图优化
option = {
title: { text: ’10万数据点折线图’ },
tooltip: { trigger: ‘axis’ },
xAxis: {
type: ‘category’,
data: Array.from({length: 100000}, (_, i) => i) // 10万个类别
},
yAxis: { type: ‘value’ },
series: [{
type: ‘line’,
// 大数据量优化
large: true,
// 大数据量模式下的绘制策略
largeThreshold: 2000, // 开启large模式的阈值
// 是否显示符号
showSymbol: false,
// 采样策略：’lttb’（Largest-Triangle-Three-Bucket）是一种降采样算法
sampling: ‘lttb’,
// 数据
data: Array.from({length: 100000}, () => Math.floor(Math.random() * 1000))
}]
}
代码解析：
large: true
：开启大数据量优化模式，ECharts会使用散点图的渲染方式，大幅提升性能。
largeThreshold
：设置开启large模式的数据量阈值，当数据点超过此值时自动启用。
showSymbol: false
：不显示数据点标记，减少渲染元素。
sampling: ‘lttb’
：采样算法，在数据量极大时，通过智能采样减少显示的数据点，同时保持趋势的准确性。其他选项包括
‘average’
,
‘max’
,
‘min’
,
‘sum’
等。
6.2 渐进式渲染与分片加载
对于超大数据量，可以采用分片加载和渐进式渲染，避免一次性加载所有数据导致浏览器崩溃。
案例：分片加载数据
let myChart = echarts.init(document.getElementById(‘main’));
let currentDataIndex = 0;
let chunkSize = 1000; // 每次加载1000个点
let totalDataPoints = 50000;
let allData = []; // 存储所有数据

// 初始配置
myChart.setOption({
xAxis: { type: ‘category’, data: [] },
yAxis: { type: ‘value’ },
series: [{ type: ‘line’, data: [] }]
});

// 模拟分片加载
function loadChunk() {
if (currentDataIndex >= totalDataPoints) {
console.log(‘数据加载完成’);
return;
}

// 生成当前分片数据
let chunk = [];
let categories = [];
for (let i = 0; i < chunkSize; i++) { let value = Math.floor(Math.random() * 1000); chunk.push(value); categories.push(currentDataIndex + i); allData.push(value); } // 更新图表 myChart.setOption({ xAxis: { data: myChart.getOption().xAxis[0].data.concat(categories) }, series: [{ data: myChart.getOption().series[0].data.concat(chunk) }] }); currentDataIndex += chunkSize; // 继续加载下一片（使用setTimeout避免阻塞UI） setTimeout(loadChunk, 100); // 每100ms加载一次 } // 开始加载 loadChunk(); 代码解析： 分片逻辑 ：将大数据集分成小块（ chunkSize ），每次只加载一部分。 增量更新 ：使用 setOption 更新图表时，将新数据追加到现有数据数组中。 异步加载 ：使用 setTimeout 或 requestAnimationFrame 进行分片加载，避免阻塞主线程，保持UI响应。 适用场景 ：适用于需要实时更新或数据量极大的场景，如实时监控、历史数据回放等。 7. 实战案例精选（部分） 以下是从50个案例中精选的几个代表性案例，涵盖不同业务场景。 案例1：实时监控折线图（带动态数据更新） // 模拟实时数据流 function createRealtimeChart() { const chart = echarts.init(document.getElementById('main')); const data = []; const now = new Date(); const categories = []; // 初始化数据 for (let i = 0; i < 60; i++) { categories.push(new Date(now - (60 - i) * 1000).toLocaleTimeString()); data.push(Math.floor(Math.random() * 100)); } chart.setOption({ title: { text: '实时监控（每秒更新）' }, tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: categories, axisLabel: { rotate: 45 } }, yAxis: { type: 'value', max: 100 }, series: [{ type: 'line', data: data, areaStyle: { color: 'rgba(84, 112, 198, 0.3)' }, lineStyle: { width: 2 } }] }); // 每秒更新数据 setInterval(() => {
const now = new Date();
const timeStr = now.toLocaleTimeString();
const value = Math.floor(Math.random() * 100);

// 移除第一个数据，添加新数据
categories.shift();
categories.push(timeStr);
data.shift();
data.push(value);

chart.setOption({
xAxis: { data: categories },
series: [{ data: data }]
});
}, 1000);
}

createRealtimeChart();
案例2：预测与实际对比图（虚线表示预测）
option = {
title: { text: ‘2023年销售预测与实际对比’ },
tooltip: { trigger: ‘axis’ },
legend: {
data: [‘实际销售’, ‘预测销售’]
},
xAxis: {
type: ‘category’,
data: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’, ‘7月’, ‘8月’, ‘9月’, ’10月’, ’11月’, ’12月’]
},
yAxis: { type: ‘value’ },
series: [
{
name: ‘实际销售’,
type: ‘line’,
data: [120, 132, 101, 134, 90, 230, 210, 180, 150, 130, 140, 160],
lineStyle: { width: 3, color: ‘#5470c6’ }
},
{
name: ‘预测销售’,
type: ‘line’,
// 虚线表示预测
lineStyle: { width: 3, type: ‘dashed’, color: ‘#fac858’ },
// 预测数据（假设9月后为预测）
data: [120, 132, 101, 134, 90, 230, 210, 180, 150, 170, 190, 210],
// 标记预测开始点
markLine: {
data: [
{ xAxis: ‘9月’, name: ‘预测开始’, lineStyle: { color: ‘#ff0000’, type: ‘solid’ } }
]
}
}
]
}
案例3：带缩放和数据视图的复杂图表
option = {
title: { text: ‘复杂交互折线图’ },
tooltip: { trigger: ‘axis’, axisPointer: { type: ‘cross’ } },
legend: { data: [‘指标1’, ‘指标2’, ‘指标3’] },
toolbox: {
feature: {
dataZoom: { yAxisIndex: ‘none’ },
dataView: { readOnly: false },
restore: {},
saveAsImage: {},
magicType: { type: [‘line’, ‘bar’] } // 动态图表类型切换
}
},
dataZoom: [
{ type: ‘slider’, start: 0, end: 100 },
{ type: ‘inside’, start: 0, end: 100 }
],
xAxis: {
type: ‘category’,
data: Array.from({length: 50}, (_, i) => `T${i+1}`)
},
yAxis: { type: ‘value’ },
series: [
{
name: ‘指标1’,
type: ‘line’,
data: Array.from({length: 50}, () => Math.floor(Math.random() * 100)),
smooth: true,
areaStyle: { opacity: 0.3 }
},
{
name: ‘指标2’,
type: ‘line’,
data: Array.from({length: 50}, () => Math.floor(Math.random() * 100)),
smooth: true
},
{
name: ‘指标3’,
type: ‘line’,
data: Array.from({length: 50}, () => Math.floor(Math.random() * 100)),
smooth: true
}
]
}
案例4：多维度数据展示（颜色映射）
option = {
title: { text: ‘温度变化趋势（颜色映射）’ },
tooltip: { trigger: ‘axis’ },
xAxis: {
type: ‘category’,
data: [’00:00′, ’04:00′, ’08:00′, ’12:00′, ’16:00′, ’20:00′]
},
yAxis: { type: ‘value’, name: ‘温度(°C)’ },
visualMap: {
show: false,
dimension: 1, // 根据数据值（第二个维度）映射颜色
pieces: [
{ lte: 10, color: ‘#096’ }, // 低温：绿色
{ gt: 10, lte: 20, color: ‘#f0c’ }, // 中温：粉色
{ gt: 20, color: ‘#c00’ } // 高温：红色
],
outOfRange: { color: ‘#999’ }
},
series: [{
name: ‘温度’,
type: ‘line’,
// 数据格式：[x, y, 其他维度]
data: [
[0, 8], [1, 6], [2, 12], [3, 22], [4, 25], [5, 18]
],
// 根据数据值设置标记点颜色
markPoint: {
data: [
{ type: ‘max’, name: ‘最高’ },
{ type: ‘min’, name: ‘最低’ }
]
},
// 线条颜色也会根据visualMap变化
lineStyle: {
width: 4
},
// 标记点大小
symbolSize: 10
}]
}
8. 常见问题与解决方案
8.1 图表不显示或显示异常
问题
：图表容器未找到或大小为0。
解决方案
：
// 确保DOM加载完成
document.addEventListener(‘DOMContentLoaded’, function() {
var container = document.getElementById(‘main’);
if (!container) {
console.error(‘容器未找到’);
return;
}
// 检查容器大小
if (container.clientWidth === 0 || container.clientHeight === 0) {
console.warn(‘容器大小为0，可能被隐藏或未渲染’);
// 可以设置默认大小
container.style.width = ‘800px’;
container.style.height = ‘400px’;
}
var myChart = echarts.init(container);
// … 设置option
});
8.2 内存泄漏问题
问题
：在单页应用中，频繁创建和销毁ECharts实例可能导致内存泄漏。
解决方案
：
// 在销毁前调用dispose方法
function destroyChart() {
if (myChart && !myChart.isDisposed()) {
myChart.dispose();
myChart = null;
}
}

// 在React/Vue等框架中，通常在组件卸载时调用
// React示例
useEffect(() => {
const chart = echarts.init(document.getElementById(‘main’));
// … 设置option

return () => {
chart.dispose(); // 清理资源
};
}, []);
8.3 移动端触摸交互优化
问题
：移动端触摸事件与鼠标事件不同。
解决方案
：
// ECharts自动处理触摸事件，但可以优化
option = {
// 增大触摸热区
series: [{
type: ‘line’,
data: [/* … */],
// 增大标记点大小，便于触摸
symbolSize: 15,
// 触摸时显示提示框
emphasis: {
focus: ‘series’,
itemStyle: {
borderWidth: 2
}
}
}],
// 提示框在移动端可以配置更大
tooltip: {
trigger: ‘axis’,
backgroundColor: ‘rgba(50,50,50,0.9)’,
textStyle: {
fontSize: 14 // 移动端增大字体
}
}
}
9. 总结与进阶学习
通过以上50个案例的详细讲解，我们从ECharts折线图的基础配置、数据处理、视觉定制、交互行为、性能优化等多个维度进行了全面深入的探讨。掌握这些核心技巧，你将能够应对绝大多数业务场景下的折线图开发需求。
进阶学习建议
：
深入研究ECharts官方文档
：ECharts的配置项非常丰富，官方文档是最权威的学习资源。
学习Canvas和SVG渲染原理
：了解ECharts的底层渲染机制，有助于解决性能问题和实现自定义图形。
结合前端框架
：将ECharts与React、Vue、Angular等框架结合，封装成可复用的组件。
探索高级图表类型
：在掌握折线图的基础上，学习面积图、雷达图、K线图等其他图表类型。
数据可视化理论
：学习数据可视化的基本原则和设计模式，提升图表的可读性和美观度。
ECharts作为一款强大的可视化库，其潜力远不止于此。持续学习和实践，你将能够创造出更加生动、直观、高效的数据可视化作品，为业务决策提供有力支持。