Echarts基础折线图

Térébentine

已于 2022-02-01 10:39:40 修改

阅读量370

点赞数

分类专栏： Echarts 文章标签： echarts javascript ecmascript

于 2022-02-01 10:29:38 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43790703/article/details/122762974

版权

Echarts 专栏收录该内容

7 篇文章

订阅专栏

这篇博客主要介绍了如何利用Echarts库在JavaScript中绘制基础的折线图，通过关键的option配置来实现数据的可视化展示。文章提供了一个详细的option代码示例，并提示如果遇到问题，可以查看完整的代码来解决报错。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键部分（即option）代码如下：

var option = {
			//设置x轴
			xAxis:{
				type:'category',
				data:['1/30','1/27','1/24','1/21','1/18','1/15','1/12','1/9','1/6','1/3','12/31']
			},
			//设置y轴
			yAxis:{
				type:'value'
			},
			//设置series系列
			series:[
				{
					data:[50,45,120,100,60,80,50,100,90,90,110],
					type:'line'
				}
			]
		};

如果输入关键部分代码仍然报错，可以看下完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!--title表示网页名称-->
		<title>折线图</title>
		<!--引入Echarts.min.js和Echarts-liquidfill.js文件-->
		<script src="echarts.min.js"></script>
	</head>
	<body>
		<!--为Echarts准备一个定义了宽和高的DOM容器-->
		<div id="main"
		        style="width: 600px;height: 400px;"></div>
		<script type="text/javascript">
		//基于准备好的DOM,初始化echart实例
		var myChart = echarts.init(document.getElementById('main')); 
		//指定图表的配置项和数据
		var option = {
			//设置x轴
			xAxis:{
				type:'category',
				data:['1/30','1/27','1/24','1/21','1/18','1/15','1/12','1/9','1/6','1/3','12/31']
			},
			//设置y轴
			yAxis:{
				type:'value'
			},
			//设置series系列
			series:[
				{
					data:[50,45,120,100,60,80,50,100,90,90,110],
					type:'line'
				}
			]
		};
		//使用刚指定的配置项和数据显示图表
		myChart.setOption(option);
		</script>
	</body>
</html>