使用Apache ECharts来绘制曲线图

最新推荐文章于 2024-03-12 09:52:18 发布

每个人心里有个死小孩

最新推荐文章于 2024-03-12 09:52:18 发布

阅读量864

点赞数

文章标签： echarts 前端

本文链接：https://blog.csdn.net/qq_40138803/article/details/130928906

版权

一、前言

首先说一下什么是Apache ECharts，它有什么作用以及它有什么优势。
Apache ECharts是一个基于JavaScript的开源的一个可视化图表库。通过这个js库，我们可以快捷方便的绘制出好看的图表在我们的页面上，比如曲线图、柱状图、饼状图等等可视化图表。这个js库的有点有很多，比如：

有丰富的可视化类型。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。除了这些内置的表，还支持自定义。
动态数据。只需要动态的修改填充的数据就可以很方便的实现表格的动态变化。
深度的交互式数据探索。提供图例，视觉映射等交互组件，按需过滤查看数据变得很方便。
······

二、获取ECharts

从github上获取。github地址为：github地址。该页面中的echarts.js就包含了完整的ECharts功能。
从CDN获取

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>

NPM获取

npm install echarts

三、一个使用ECharts绘制曲线图的例子

<html>
<header>
	<title>echarts示例</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</header>
<body>
	<div id='main'></div>
</body>
<script>
	var myChart = echarts.init(document.getElementById('main'),null,{width:1200,height:600});
	var option = {
		title:{ text:'echarts示例' },
		tooltip:{},
		legend:{
			data:['销量']
		},
		xAxis:{
			name:'水果',
			data:['🍊','🍇','🍏','🍌','🍐','🍋','🍎','🍉'],
			axisTick: {
			  show:false,
			  length: 6,
			  lineStyle: {
				type: 'dashed'
			  }
			}
		},
		yAxis:{
			name:'销量'	
		},
		series:[
			{
				name:'销量',
				type:'line',
				smooth:true,
				lineStyle:{
					normal:{
						color:'#07c160'
					}
				},
				itemStyle:{
					normal:{
						color:'#07c160',
						borderColor:'#07c160'
					}
				},
				data:[21,13,8,5,3,2,1,1],
			}
		]
	};
	
	myChart.setOption(option);
</script>
</html>

这是一个使用ECharts简单绘制的一个表格，表格的绘制主要分为3个步骤，首先初始化一个DOM元素为图表容器，然后再定义图表的相关数据，包含坐标轴、数据、示例、图表标题、样式等内容，最后依据定义好的图表数据在图表容器上绘制图表，下面通过这个简单的示例进行大概的讲解。

四、示例讲解

1、初始化图表容器和大小

图表是通过echarts.init()进行图表容器的初始化的。在图表容器初始化的时候，我们可以设置图表容器的大小通过width和height属性。如同示例，我初始化的时候设置了图表容器的大小为宽1200px，高度600px。然后将图表容器指定为id为main的DOM。

var myChart = echarts.init(document.getElementById('main'),null,{width:1200,height:600});

当然我们也可以直接通过设置DOM元素的大小直接定义容器大小。

<div id='main' style='width:1200px;height:600px'></div>
//js
var myChart = echarts.init(document.getElementById('main'));

2、介绍一下定义表格的各个参数

2.1 title

这是表格的标题组件，当表格不需要标题的时候可以通过如下设置取消。

title:{ show:false },

2.2 tooltip

这是表格提示框组件。当鼠标移动到图表中的数据点的时候会出现提示框组件提示在该点的数据信息。默认是开启的，一样可以通过show属性进行关闭。

2.3 legend

这个是图例组件，用来标注表格数据的图例，data属性是一个数组，可以定义多个图例标注不同的数据。需要注意的是，图例组件数组中的名称需要与数据series中的name相对应，否则可能无法生效。

2.4 xAxis和yAxis

图表的x轴和y轴。name代表x、y轴的名称，data数组表示类目数据，比如示例中的x轴的data代表各种水果类目。axisTick属性是关于x、y轴上的刻度，show控制刻度是否显示，length控制刻度的显示数量。

2.5 series

系列数据，这里主要定义图标坐标轴各个点的数据，name对应2.3legend图例中的名称，代表接下来的数据是这个图例的数据。type定义类型，line代表的是曲线图，bar代表柱状图，pie代表饼状图等等。smooth是曲线图才有的，表示让曲线图更加平滑。lineStyle定义曲线的样式。itemStyle定义数据点的那个点的样式。data就是数据数组了。
在同一个图标中是可以绘制多个同类型或不同类型的图表的，以示例为例，还可以通过在series中添加一个数据集绘制一个柱状图。

series:[
			{
				name:'销量',
				type:'line',
				smooth:true,
				lineStyle:{
					normal:{
						color:'#07c160'
					}
				},
				itemStyle:{
					normal:{
						color:'#07c160',
						borderColor:'#07c160'
					}
				},
				data:[21,13,8,5,3,2,1,1],
			},
			{
				name:'价格',
				type:'bar',
				data:[41,23,48,55,33,12,21,31],
			}
		]

效果图如下：
在这里插入图片描述