Echarts绘制折线图，超简单，源码点击即可运行！【文末源码地址】

最新推荐文章于 2024-02-23 21:10:08 发布

帅帅的Python

最新推荐文章于 2024-02-23 21:10:08 发布

阅读量569

点赞数

分类专栏：数据可视化数据分析 echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_42060598/article/details/130868236

版权

数据分析同时被 3 个专栏收录

25 篇文章 3 订阅

订阅专栏

数据可视化

8 篇文章 1 订阅

订阅专栏

echarts

6 篇文章 0 订阅

订阅专栏

前言

本文包含的代码仅为部分片段，完整源码有详细注释，可在文末领取！

在当今数字化时代，数据可视化已成为一种必不可少的工具。它可以帮助我们更好地理解数据，从而做出更明智的决策。以下是数据可视化的一些重要性：

帮助我们更好地理解数据

通过将数据可视化，我们可以更轻松地理解数据。图表和图形可以帮助我们发现数据中的模式、趋势和异常值，从而更好地理解数据。

帮助我们做出更好的决策

通过可视化数据，我们可以更好地了解数据中的信息，从而做出更好的决策。例如，如果我们正在分析销售数据，我们可以使用可视化工具来查看哪些产品最畅销，哪些产品需要进一步推销。

帮助我们与他人分享数据

通过将数据可视化，我们可以更好地与他人分享数据。图表和图形可以帮助我们向他人传达数据中的信息，使他们更容易理解数据。

Apache Echarts

官网地址：https://echarts.apache.org/zh/index.html

Apache Echarts 的优点：

官网提供超过200款图表案例
基于 JavaScript 的开源可视化图表库
提供详细的API文档方便查找图表配置

本文就讲解如何用 Apache Echarts 绘制常见的折线图。

折线图： 折线图用于显示数值变量随时间变化的趋势。每个数据点表示一个时间点的值。

绘制基础折线图

折线图如下：

在这里插入图片描述

图表包含内容有：

标题、图例、坐标轴
当鼠标移动到折线图上会有提示框出现
还可以将曲线设置为平滑

源码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flask+echarts项目</title>
	<!-- 导入下载的 echarts.min.js -->
    <script src="../../static/js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>

<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart=echarts.init(document.getElementById('main'));

// 自定义图表的宽高
// var myChart=echarts.init(document.getElementById('main'),null,{width:500,height:400});

// 跟随浏览器的宽度自适应图表大小
// var myChart=echarts.init(document.getElementById('main'));
// window.addEventListener('resize',function(){myChart.resize();});

// 指定图表的配置项和数据
var option={
	// 图表标题配置
	title:{
		text:'基础折线图'
	},
	// 提示框组件
	tooltip:{
		// 是否显示提示框
		show:true,
		// 触发类型，axis 移动到坐标轴就触发
		trigger:'axis'
	},
	// 图例配置项
	legend:{
		// 图例的数据数组，
		data:["销量"],
	},
	// X 轴配置项
	xAxis:{
		// 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴
		type:'category',
		// 坐标轴名称，可以对每一个名称进行单独配置，比如：Mon 显示为红色
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	},
	// y 轴配置项
	yAxis:{
		// 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴
		type:'value',
	},
	// 系列配置，根据不同图表有不同的配置
	series:[
		{
			// 系列名称，用于tooltip显示，legend图例筛选
			name:'销量',
			// 图表类型
			type:'line',
			// 数据内容
			data:[150, 230, 224, 218, 135, 147, 260],
			// 是否平滑曲线显示
			smooth: true
		}
	]
};
//使用刚指定的配置项和数据显示图像
myChart.setOption(option);
</script>
</body>
</html>

绘制带标记的折线图

折线图如下：

在这里插入图片描述

图表包含内容有：

标题、图例、坐标轴
当鼠标移动到折线图上会有提示框出现
每条折线数据的最高点、最低点
每条折现数据的平均值线

源码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flask+echarts项目</title>
	<!-- 导入下载的 echarts.min.js -->
    <script src="../../static/js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:800px;height:500px;"></div>

<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart=echarts.init(document.getElementById('main'));


// 指定图表的配置项和数据
var option={
	// 图表标题配置
	title:{
		text:'折线图'
	},
	// 提示框组件
	tooltip:{
		// 是否显示提示框
		show:true,
		// 触发类型，axis 移动到坐标轴就触发
		trigger:'axis'
	},
	// 图例配置项
	legend:{},
	// 辅助工具栏：保存图片、图表切换、区域缩放、展示数据、重置
	toolbox:{
		// 各工具的配置项
		feature:{
			// 保存图片工具设置
			saveAsImage:{show:true},
			// 动态类型转换设置，
			magicType:{show:true,type:['line','bar']},
			// 重置按钮
			restore:{}
		}
	},
	// X 轴配置项
	xAxis:{
		// 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴
		type:'category',
		// x轴标签与坐标轴刻度的位置：false对齐，true中间
		boundaryGap:false,
		// 坐标轴名称，可以对每一个名称进行单独配置，比如：Mon 显示为红色
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	},
	// y 轴配置项
	yAxis:{
		// 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴
		type:'value',
		// 坐标轴刻度标签的相关设置。
		axisLabel:{
			formatter:"{value} °C"
		}
	},
	// 系列配置，根据不同图表有不同的配置
	series:[
		{
			// 系列名称，用于tooltip显示，legend图例筛选
			name:'Heighest',
			// 图表类型
			type:'line',
			// 数据内容
			data:[10, 11, 13, 11, 12, 12, 9],
			// 图表标注内容
			markPoint:{
				data:[
					{type:"max",name:"最大值"},
					{type:"min",name:"最小值"},
				]
			},
			// 图线标注
			markLine:{
				data:[{type:"average",name:"平均值"}]
			}
		},
		{
			// 系列名称，用于tooltip显示，legend图例筛选
			name:'Lowest',
			// 图表类型
			type:'line',
			// 数据内容
			data:[1, -2, 2, 5, 3, 2, 0],
			// 图表标注内容
			markPoint:{
				data:[
					{type:"min",name:"最小值"}
				]
			},
			// 图线标注
			markLine:{
				data:[{type:"average",name:"平均值"}]
			}
		},
	]
};
//使用刚指定的配置项和数据显示图像
myChart.setOption(option);
</script>
</body>
</html>

绘制多条折线图

折线图如下：

在这里插入图片描述

图表包含内容有：

标题、图例、坐标轴
当鼠标移动到折线图上会显示多条折现数据提示框

源码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flask+echarts项目</title>
	<!-- 导入下载的 echarts.min.js -->
    <script src="../../static/js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:800px;height:500px;"></div>

<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart=echarts.init(document.getElementById('main'));


// 指定图表的配置项和数据
var option={
	// 图表标题配置
	title:{
		text:'折线图',
		subtext:'点击右上方图标试试'
	},
	// 提示框组件
	tooltip:{
		// 是否显示提示框
		show:true,
		// 触发类型，axis 移动到坐标轴就触发
		trigger:'axis'
	},
	// 图例配置项
	legend:{
		// 图例的数据数组，
		data:["Email","Union Ads","Video Ads","Direct","Search Engine"],
	},
	// 直角坐标系内绘图网格
	grid:{
		// grid 组件离容器左侧的距离
		left:"3%",
		// grid 组件离容器右侧的距离。
		right:"3%",
		// grid 组件离容器下侧的距离
		bottom:"3%",
		// grid 区域是否包含坐标轴的刻度标签。
		containLabel:true
	},
	// 辅助工具栏：保存图片、图表切换、区域缩放、展示数据、重置
	toolbox:{
		// 各工具的配置项
		feature:{
			// 保存图片工具设置
			saveAsImage:{show:true},
			// 动态类型转换设置，
			magicType:{show:true,type:['line','bar','stack']}
		}
	},
	// X 轴配置项
	xAxis:{
		// 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴
		type:'category',
		// x轴标签与坐标轴刻度的位置：false对齐，true中间
		boundaryGap:false,
		// 坐标轴名称，可以对每一个名称进行单独配置，比如：Mon 显示为红色
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	},
	// y 轴配置项
	yAxis:{
		// 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴
		type:'value',
	},
	// 系列配置，根据不同图表有不同的配置
	series:[
		{
			// 系列名称，用于tooltip显示，legend图例筛选
			name:'Email',
			// 图表类型
			type:'line',
			// 数据内容
			data:[120, 132, 101, 134, 90, 230, 210],
			// 是否平滑曲线显示
			smooth: true
		},
		{
			// 系列名称，用于tooltip显示，legend图例筛选
			name:'Union Ads',
			// 图表类型
			type:'line',
			// 数据内容
			data:[220, 182, 191, 234, 290, 330, 310],
			// 是否平滑曲线显示
			smooth: true
		},
		{
			// 系列名称，用于tooltip显示，legend图例筛选
			name:'Video Ads',
			// 图表类型
			type:'line',
			// 数据内容
			data:[150, 232, 201, 154, 190, 330, 410],
			// 是否平滑曲线显示
			smooth: true
		},
		{
			// 系列名称，用于tooltip显示，legend图例筛选
			name:'Direct',
			// 图表类型
			type:'line',
			// 数据内容
			data:[320, 332, 301, 334, 390, 330, 320],
			// 是否平滑曲线显示
			smooth: true
		},
		{
			// 系列名称，用于tooltip显示，legend图例筛选
			name:'Search Engine',
			// 图表类型
			type:'line',
			// 数据内容
			data:[820, 932, 901, 934, 1290, 1330, 1320],
			// 是否平滑曲线显示
			smooth: true
		}
	]
};
//使用刚指定的配置项和数据显示图像
myChart.setOption(option);
</script>
</body>
</html>

绘制带标签的折线图

折线图如下：

在这里插入图片描述

图表包含内容有：

标题、图例、坐标轴
折线图上展示数据标签
当鼠标移动到折线图上会显示多条折现数据提示框

源码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flask+echarts项目</title>
	<!-- 导入下载的 echarts.min.js -->
    <script src="../../static/js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:800px;height:500px;"></div>

<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart=echarts.init(document.getElementById('main'));


// 指定图表的配置项和数据
var option={
	// 图表标题配置
	title:{
		text:'折线图',
		subtext:'点击右上方图标试试'
	},
	// 提示框组件
	tooltip:{
		// 是否显示提示框
		show:true,
		// 触发类型，axis 移动到坐标轴就触发
		trigger:'axis'
	},
	// 图例配置项
	legend:{
		// 图例的数据数组，
		data:["Email","Union Ads","Video Ads","Direct","Search Engine"],
	},
	// 直角坐标系内绘图网格
	grid:{
		// grid 组件离容器左侧的距离
		left:"3%",
		// grid 组件离容器右侧的距离。
		right:"3%",
		// grid 组件离容器下侧的距离
		bottom:"3%",
		// grid 区域是否包含坐标轴的刻度标签。
		containLabel:true
	},
	// 辅助工具栏：保存图片、图表切换、区域缩放、展示数据、重置
	toolbox:{
		// 各工具的配置项
		feature:{
			// 保存图片工具设置
			saveAsImage:{show:true},
			// 动态类型转换设置，
			magicType:{show:true,type:['line','bar','stack']}
		}
	},
	// X 轴配置项
	xAxis:{
		// 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴
		type:'category',
		// x轴标签与坐标轴刻度的位置：false对齐，true中间
		boundaryGap:false,
		// 坐标轴名称，可以对每一个名称进行单独配置，比如：Mon 显示为红色
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	},
	// y 轴配置项
	yAxis:{
		// 坐标轴类型，category 类目轴、value数值轴、time时间轴、log对数轴
		type:'value',
	},
	// 系列配置，根据不同图表有不同的配置
	series:[
		{
			// 系列名称，用于tooltip显示，legend图例筛选
			name:'Email',
			// 图表类型
			type:'line',
			// 数据内容
			data:[120, 132, 101, 134, 90, 230, 210],
			// 是否平滑曲线显示
			smooth: true
		},
		{
			// 系列名称，用于tooltip显示，legend图例筛选
			name:'Union Ads',
			// 图表类型
			type:'line',
			// 数据内容
			data:[220, 182, 191, 234, 290, 330, 310],
			// 是否平滑曲线显示
			smooth: true
		},
		{
			// 系列名称，用于tooltip显示，legend图例筛选
			name:'Video Ads',
			// 图表类型
			type:'line',
			// 数据内容
			data:[150, 232, 201, 154, 190, 330, 410],
			// 是否平滑曲线显示
			smooth: true
		},
		{
			// 系列名称，用于tooltip显示，legend图例筛选
			name:'Direct',
			// 图表类型
			type:'line',
			// 数据内容
			data:[320, 332, 301, 334, 390, 330, 320],
			// 是否平滑曲线显示
			smooth: true
		},
		{
			// 系列名称，用于tooltip显示，legend图例筛选
			name:'Search Engine',
			// 图表类型
			type:'line',
			// 添加标签
			label:{
				show:true,
				position:"top"
			},
			// 数据内容
			data:[820, 932, 901, 934, 1290, 1330, 1320],
			// 是否平滑曲线显示
			smooth: true
		}
	]
};
//使用刚指定的配置项和数据显示图像
myChart.setOption(option);
</script>
</body>
</html>

完整源码地址

链接：https://pan.baidu.com/s/1cNwjkaG1-nZQPqjcnWiDfA?pwd=8c9v
提取码：8c9v

帅帅的Python

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Echarts绘制折线图，超简单，源码点击即可运行！【文末源码地址】

本文包含的代码仅为部分片段，完整源码有详细注释，可在文末领取！在当今数字化时代，数据可视化已成为一种必不可少的工具。它可以帮助我们更好地理解数据，从而做出更明智的决策。以下是数据可视化的一些重要性：通过将数据可视化，我们可以更轻松地理解数据。图表和图形可以帮助我们发现数据中的模式、趋势和异常值，从而更好地理解数据。通过可视化数据，我们可以更好地了解数据中的信息，从而做出更好的决策。例如，如果我们正在分析销售数据，我们可以使用可视化工具来查看哪些产品最畅销，哪些产品需要进一步推销。通过将数据可视化，我们可以更
复制链接

扫一扫