# 怎么用ECharts畫折線圖
## 一、ECharts簡介
ECharts（Enterprise Charts）是百度開源的一個基于JavaScript的數據可視化庫，它提供了豐富的圖表類型和靈活的配置選項。自2013年開源以來，ECharts已成為國內最流行的前端可視化工具之一，具有以下核心優勢：
1. **豐富的圖表類型**：支持折線圖、柱狀圖、餅圖、散點圖等30+種標準圖表
2. **移動端優化**：完善的響應式設計和跨平臺兼容性
3. **動態特性**：支持數據的實時更新和動畫效果
4. **可視化設計器**：提供在線配置工具降低使用門檻
5. **活躍的社區**：持續更新維護，中文文檔完善
## 二、環境準備
### 1. 安裝方式
#### (1) CDN引入（推薦初學者）
```html
<!-- 引入echarts核心庫 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
npm install echarts --save
// 項目中引入
import * as echarts from 'echarts';
# 克隆倉庫
git clone https://github.com/apache/echarts.git
cd echarts
npm install
npm run build
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts折線圖示例</title>
<!-- 引入ECharts -->
<script src="echarts.min.js"></script>
<style>
#chart-container {
width: 800px;
height: 500px;
margin: 30px auto;
}
</style>
</head>
<body>
<div id="chart-container"></div>
<script src="your-script.js"></script>
</body>
</html>
// 獲取DOM容器
const chartDom = document.getElementById('chart-container');
// 初始化實例
const myChart = echarts.init(chartDom);
const option = {
title: {
text: '基礎折線圖示例'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['銷量']
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月']
},
yAxis: {
type: 'value'
},
series: [{
name: '銷量',
type: 'line',
data: [150, 230, 224, 218, 135, 147]
}]
};
myChart.setOption(option);
window.addEventListener('resize', function() {
myChart.resize();
});
series: [
{
name: '產品A',
type: 'line',
data: [120, 132, 101, 134, 90, 230]
},
{
name: '產品B',
type: 'line',
data: [220, 182, 191, 234, 290, 330]
}
]
series: [{
// ...其他配置
itemStyle: {
color: '#c23531', // 折線顏色
borderColor: '#000', // 數據點邊框色
borderWidth: 2
},
lineStyle: {
width: 4,
type: 'dashed' // 可選：'solid', 'dotted', 'dashed'
},
symbol: 'circle', // 數據點形狀
symbolSize: 10,
smooth: true // 平滑曲線
}]
series: [{
// ...其他配置
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(58,77,233,0.8)' },
{ offset: 1, color: 'rgba(58,77,233,0.1)' }
])
}
}]
series: [{
// ...其他配置
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
}]
function fetchData() {
return Array(6).fill(0).map(() => Math.round(Math.random() * 300));
}
setInterval(() => {
const newData = fetchData();
myChart.setOption({
series: [{
data: newData
}]
});
}, 2000);
myChart.on('click', function(params) {
console.log('點擊數據:', params);
alert(`您點擊了 ${params.name}，值為 ${params.value}`);
});
dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex: [0],
start: 0,
end: 50
},
{
type: 'inside',
xAxisIndex: [0],
start: 0,
end: 50
}
]
// 正確做法（保留其他配置）
myChart.setOption({
series: [{
data: newData
}]
}, true); // 第二個參數表示不合并配置
large: true選項dataSampling進行數據采樣setOption<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高級折線圖示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
#container {
width: 900px;
height: 600px;
margin: 30px auto;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
const chart = echarts.init(document.getElementById('container'));
const option = {
title: {
text: '多系列動態折線圖',
subtext: '數據僅供參考'
},
tooltip: {
trigger: 'axis',
formatter: '<br/>{a0}: {c0}<br/>{a1}: {c1}'
},
legend: {
data: ['實際銷量', '預測銷量']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} 件'
}
},
series: [
{
name: '實際銷量',
type: 'line',
smooth: true,
data: [120, 132, 101, 134, 90, 230, 210],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
}
},
{
name: '預測銷量',
type: 'line',
smooth: true,
data: [220, 182, 191, 234, 290, 330, 310],
markLine: {
data: [{ type: 'average', name: '平均值' }]
}
}
]
};
chart.setOption(option);
// 窗口縮放自適應
window.addEventListener('resize', function() {
chart.resize();
});
</script>
</body>
</html>
提示：在實際項目中，建議結合Vue/React等框架使用封裝好的ECharts組件，如
vue-echarts或echarts-for-react，可以更好地與現代前端工程配合。 “`
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
