005_折线图

最新推荐文章于 2023-09-06 18:49:55 发布
最新推荐文章于 2023-09-06 18:49:55 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： Apache ECharts 文章标签： echarts 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aihiao/article/details/123506214
版权

1. 折线图主要用来展示数据项随着时间推移的趋势或变化。

2. 最简单的折线图

2.1. 我们通过xAxis将横坐标设为类目型, 并指定了对应的值; 将yAxis的类型设定为数值型。在series中, 我们将系列类型设为line, 并且通过data指定了折线图点的取值。这样, 就能得到一个最简单的折线图了。

2.2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>最简单的折线图</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 600px; height:400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '最简单的折线图'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['2020']
		        },
		        // 配置要在X轴显示的项
		        xAxis: {
    			  type: "category", // 类目
    			  data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
  				},
		        // 配置要在Y轴显示的项
		        yAxis: {
		          type: 'value' // 在实际的应用中, 如果是'value'类型, 也可以省略不写。
		        },
		        // 系列列表
		        series: [
		          {
		            name: '2020', // 系列名称
		            type: 'line', // 系列图表类型
		            data: [89.3, 92.1, 94.4, 85.4] // 系列中的数据内容
		          }
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

2.3. 效果图

3. 笛卡尔坐标系中的折线图

3.1. 如果我们希望折线图在横坐标和纵坐标上都是连续的, 即在笛卡尔坐标系中, 应该如何实现呢?答案也很简单, 只要把series的data每个数据用一个包含两个元素的数组表示就行了。

3.2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>笛卡尔坐标系中的折线图</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 600px; height:400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '笛卡尔坐标系中的折线图'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['月销售量']
		        },
		        // 配置要在X轴显示的项
		        xAxis: {},
		        // 配置要在Y轴显示的项
		        yAxis: {},
		        // 系列列表
		        series: [
		          {
		            name: '月销售量', // 系列名称
		            type: 'line', // 系列图表类型
		            data: [ // 系列中的数据内容
		            	[1, 100],
		            	[2, 300],
		            	[3, 90],
		            	[4, 110],
		            	[5, 120],
		            	[6, 100],
		            ]
		          }
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

3.3. 效果图

4. 笛卡尔坐标系中的折线图

4.1. 在一个系列中, 可能一个横坐标对应的取值是"空"的, 将其设为0有时并不能满足我们的期望, 空数据不应被其左右的数据连接。

4.2. 在ECharts中, 我们使用字符串'-'表示空数据, 这对其他系列的数据也是适用的。

4.3. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>空数据</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 600px; height:400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '空数据'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['2020']
		        },
		        // 配置要在X轴显示的项
		        xAxis: {
    			  type: "category", // 类目
    			  data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
  				},
		        // 配置要在Y轴显示的项
		        yAxis: {},
		        // 系列列表
		        series: [
		          {
		            name: '2020', // 系列名称
		            type: 'line', // 系列图表类型
		            data: [89.3, '-', 94.4, 85.4] // 系列中的数据内容
		          }
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

4.4. 效果图

5. 堆叠折线图

5.1. 与堆叠柱状图类似, 堆叠折线图也是用系列的stack设置哪些系列堆叠在一起。

5.2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>堆叠折线图</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 600px; height:400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '堆叠折线图'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['2020', '2021', '2022']
		        },
		        // 配置要在X轴显示的项
		        xAxis: {
    			  type: "category", // 类目
    			  data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
  				},
		        // 配置要在Y轴显示的项
		        yAxis: {},
		        // 系列列表
		        series: [
		          {
		            name: '2020', // 系列名称
		            type: 'line', // 系列图表类型
		            data: [29.3, 32.1, 34.4, 25.4], // 系列中的数据内容
		            stack: '销量'
		          },
		          {
		            name: '2021', // 系列名称
		            type: 'line', // 系列图表类型
		            data: [55.8, 49.4, 51.2, 36.9], // 系列中的数据内容
		            stack: '销量'
		          },
		          {
		            name: '2022', // 系列名称
		            type: 'line', // 系列图表类型
		            data: [97.7, 83.1, 92.5, 78.1], // 系列中的数据内容
		            stack: '销量'
		          }
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

5.3. 效果图

5.4. 但是不同的是, 如果不加说明的话, 我们很难判断出这是一个堆叠折线图, 还是一个普通的折线图。所以, 对于堆叠折线图而言, 一般建议使用区域填充色以表明堆叠的情况。

5.5. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>堆叠折线图+区域填充色</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 600px; height:400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '堆叠折线图+区域填充色'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['2020', '2021', '2022']
		        },
		        // 配置要在X轴显示的项
		        xAxis: {
    			  type: "category", // 类目
    			  data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
  				},
		        // 配置要在Y轴显示的项
		        yAxis: {},
		        // 系列列表
		        series: [
		          {
		            name: '2020', // 系列名称
		            type: 'line', // 系列图表类型
		            data: [29.3, 32.1, 34.4, 25.4], // 系列中的数据内容
		            stack: '销量',
		            areaStyle: {}
		          },
		          {
		            name: '2021', // 系列名称
		            type: 'line', // 系列图表类型
		            data: [55.8, 49.4, 51.2, 36.9], // 系列中的数据内容
		            stack: '销量',
		            areaStyle: {}
		          },
		          {
		            name: '2022', // 系列名称
		            type: 'line', // 系列图表类型
		            data: [97.7, 83.1, 92.5, 78.1], // 系列中的数据内容
		            stack: '销量',
		            areaStyle: {}
		          }
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

5.6. 效果图

6. 平滑曲线图

6.1. 平滑曲线图也是折线图的一种变形, 这种更柔和的样式也是一种不错的视觉选择。使用时, 只需要将折线图系列的smooth属性设置为true即可。

6.2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>平滑曲线图</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 600px; height:400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '平滑曲线图'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['2020', '2021', '2022']
		        },
		        // 配置要在X轴显示的项
		        xAxis: {
    			  type: "category", // 类目
    			  data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
  				},
		        // 配置要在Y轴显示的项
		        yAxis: {},
		        // 系列列表
		        series: [
		          {
		            name: '2020', // 系列名称
		            type: 'line', // 系列图表类型
		            data: [29.3, 32.1, 34.4, 25.4], // 系列中的数据内容
		            smooth: true
		          },
		          {
		            name: '2021', // 系列名称
		            type: 'line', // 系列图表类型
		            data: [55.8, 49.4, 51.2, 36.9], // 系列中的数据内容
		            smooth: true
		          },
		          {
		            name: '2022', // 系列名称
		            type: 'line', // 系列图表类型
		            data: [97.7, 83.1, 92.5, 78.1], // 系列中的数据内容
		            smooth: true
		          }
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

6.3. 效果图

7. 阶梯线图

7.1. 阶梯线图又称方波图, 它使用水平和垂直的线来连接两个数据点, 而普通折线图则直接将两个点连接起来。阶梯线图能够很好地表达数据的突变。

7.2. 在ECharts中, 系列的step属性用来表征阶梯线图的连接类型, 它共有三种取值: 'start'、'middle'和'end', 分别表示在当前点, 当前点与下个点的中间点, 下个点拐弯。

7.3. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>阶梯线图</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 600px; height:400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '阶梯线图'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['2020', '2021', '2022']
		        },
		        // 配置要在X轴显示的项
		        xAxis: {
    			  type: "category", // 类目
    			  data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
  				},
		        // 配置要在Y轴显示的项
		        yAxis: {},
		        // 系列列表
		        series: [
		          {
		            name: '2020', // 系列名称
		            type: 'line', // 系列图表类型
		            step: 'start',
		            data: [29.3, 32.1, 34.4, 25.4] // 系列中的数据内容
		          },
		          {
		            name: '2021', // 系列名称
		            type: 'line', // 系列图表类型
		            step: 'middle',
		            data: [55.8, 49.4, 51.2, 36.9] // 系列中的数据内容
		          },
		          {
		            name: '2022', // 系列名称
		            type: 'line', // 系列图表类型
		            step: 'end',
		            data: [97.7, 83.1, 92.5, 78.1] // 系列中的数据内容
		          }
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

7.4. 效果图

自由与束缚JavaJavaScript
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ehars柱状图实例
paul342的专栏
05-09 1649
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "> ECharts实例
echarts step line
bidepanm的博客
02-02 526
【代码】echarts step line。
23Echarts - 折线图（Step Line）
阿甘兄
04-30 3409
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
echarts学习笔记 各图配置(折线图、圆环图、柱形图、折线面积图)
weixin_33827965的博客
05-26 693
为什么80%的码农都做不了架构师？>>> ...
echarts 折线 step line x轴的线实线，y轴虚线
ana_9717的博客
12-05 5629
echarts 折线 step line x轴的线实线，y轴虚线
android折线图
03-12
005 import java.util.Iterator; 006 import java.util.Map; 007 import java.util.Set; 008 009 import android.annotation.SuppressLint; 010 import android.content.Context; 011 import ...
Python绘图matplotlib
11-15
Python 绘图 matplotlib 库是 Python 编程语言中的一个数据可视化库，提供了多种绘图方式，包括折线图、条形图、饼图等。matplotlib 库的使用非常广泛，能够帮助开发者快速生成高质量的图表，从而更好地展示数据。 ...
005 可视化监控管理.rar
03-17
ECharts是一个由百度开发的开源JavaScript图表库，支持丰富的图表类型，如折线图、柱状图、饼图等。在本项目中，ECharts可能被用于生成动态、实时的数据图形，以便用户能清晰地理解和分析监控数据。 `js` 文件夹里...
【前端素材】大数据模板-005车联网平台.zip
最新发布
03-26
大数据分析展示页面通过丰富的图表类型（如柱状图、折线图、饼图、散点图、热力图等）将大数据转化为直观、易于理解的图形展示。这些图表能够清晰地展示数据的分布、趋势和关联关系，帮助用户快速识别数据中的关键...
参考资料-CKO+005-CKO+028沟槽回填.zip
02-06
3. 数据可视化：Excel可以创建直观的图表，如柱状图、折线图，将复杂的工程数据转化为易于理解的图形，有助于团队成员和管理层快速理解和沟通项目状态。 4. 电子表格协作：如果多个团队成员需要同时访问和编辑这份...
echarts的 各种参数
Bruce__taotao的博客
10-14 1万+
[html] view plain copy   转载：http://blog.csdn.net/zou128865/article/details/42802671          %@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>         %         Str
Echarts数据可视化series-line线图，开发全解+完美注释
热门推荐
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-07 2万+
mytextStyle={ color:"#333",//文字颜色 fontStyle:"normal",//italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... fontFamily:"sans-serif", //字体系列
echarts三个y轴的例子
ericlee1994的博客
03-30 1万+
option = { title: { text: 'Step Line' }, tooltip: { trigger: 'axis' }, legend: { x: 'right', data:['NO1','NO2','NO3','NO4'], textStyle:{
ECharts详细说明
10-27 6189
简介 ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、...
echarts X轴、Y轴数据无规律随机动态变化展示实现，笛卡尔坐标系中的折线图
weixin_44293690的博客
09-06 617
echarts X轴、Y轴数据无规律随机动态变化展示实现，笛卡尔坐标系中的折线图
WPF-LiveChart
wanxiweilai的博客
01-28 2281
CartesianChart 添加曲线：如果需要每次重新绘制则每次重新声明字段。如果需要连续绘制则只需要修改vs的值即可自动更新。滚动显示时 在x轴的lable属性上绑定string数组。折线图：CartesianChart。直方图：CartesianChart。饼图：PieChart。
数据可视化——折线图
qq_46028841的博客
03-25 2426
数据可视化——折线图 代码 <body> <div id="main" style="width:600px;height:400px;border:1px solid black"> </div> <script src="js/echarts.min.js"></script> <script> /...
pyecharts绘制折线图参数
04-23
Pyecharts绘制折线图需要的参数包括： 1. x_axis：折线图的x轴数据，可以是list或者numpy数组 2. y_axis：折线图的y轴数据，可以是list或者numpy数组 3. legend_name：折线图的图例名称，可以是字符串 4. title...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值