echarts图表

最新推荐文章于 2024-05-28 11:11:34 发布

青云梦尘

最新推荐文章于 2024-05-28 11:11:34 发布

阅读量251

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/ambition_freedom/article/details/129801616

版权

一、数据可视化

1. 数据可视化的概念和作用

将数据以图表的形式呈现
更有效的传达数据中的信息

2. 常见的可视化工具

报表类
BI类
编程类

二、echarts

1. echarts介绍

ECharts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender,提供直观，交互丰富，可高度个性化定制的数据可视化图表。

2. ECharts的特点

2.1 丰富的可视化类型

2.2 多种数据格式支持

key-value数据格式
二维表
TypedArray格式

2.3 流数据的支持

3. echarts的使用

<!--
步骤1:引入echarts.js文件
步骤2:准备一个呈现图表的盒子
步骤3:初始化echarts实例对象
步骤4:准备配置项
步骤5:将配置项设置给echarts实例对象
-->
<!-- 步骤1:引入echarts.js文件 -->
<script src="lib/echarts.min.js"></script>

<body>
	<!-- 步骤2:准各一个呈现图表的盒子-->
	<div style= "width: 600px;height: 400px"></div>
	<script>
	//步骤3:初始化echarts实例对象
	//参数，dom,决定图衣最终呈现的位H
	var mCharts = echarts.init(document.querySelector('div'))
	//步骤4:准备配置项
	var option = {
		xAxis:{
			type: 'category',
			data: ['小明','小红','小王']
		},
		yAxis:{
			type: 'value'
		},
		series: [
			{
				name: '语文',
				type: 'bar',
				data: [70, 92, 87]
			}
		]
	}
	//步骤5:将配置项设置给echarts实例对象
	mCharts.setoption(option)
	</script>
</body>