折线图是一种常见的数据可视化方式，在 echarts 中也有很好的支持。以下是一个
酷炫的折线图的完整代码示例：
HTML 代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 折线图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px; height: 600px;"></div>
</body>
</html>
```
JavaScript 代码：
```javascript
var chart = echarts.init(document.getElementById('chart'));
var data = [
[0, 0],
[0.5, 1.4],
[1, 1.8],
[1.5, 2.4],
[2, 2.8],
[2.5, 3.4],
[3, 3.8],
[3.5, 4.4],
[4, 4.8],
[4.5, 5.4],
[5, 5.8],
[5.5, 6.4],
[6, 6.8],
[6.5, 7.4],
[7, 7.8],
[7.5, 8.4],
[8, 8.8],
[8.5, 9.4],
[9, 9.8],
];
var option = {
xAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
lineStyle: {
color: '#ddd',
type: 'dashed'
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
lineStyle: {
color: '#ddd',
type: 'dashed'
}
}
},
series: [{
type: 'line',
data: data,
showSymbol: false,
lineStyle: {
width: 2,
color: '#ff8c00'
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#ff8c00'
}, {
offset: 1,
color: '#fff'
}]
}
},
smooth: true
}]
};
chart.setOption(option);
```
解释：
1. 创建一个 ECharts 实例，并指定容器元素的 ID。
2. 定义图表数据，这里使用了一个包含横纵坐标值的二维数组。
3. 定义图表配置项，包括 X 轴和 Y 轴的样式，以及折线图的数据和样式。
4. 调用 `setOption` 方法，将配置项应用到图表中。
这个示例中，我们使用了 `smooth` 属性来让折线变得更加平滑，使用了 `areaStyle` 属性来给折线下方填充渐变色。同时，我们还对 X 轴和 Y 轴的分割线进行了样式设置。最终，我们得到了一个简单但
酷炫的折线图。
,
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
