echarts数据可视化

st紫月

已于 2022-05-01 17:26:15 修改

阅读量689

点赞数

分类专栏： HTML/CSS 文章标签：前端

于 2021-10-12 19:19:11 首次发布

本文链接：https://blog.csdn.net/ziyue13/article/details/120695915

版权

HTML/CSS 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

ECharts是一个使用JavaScript实现的可视化开源库
网址：https://echarts.apache.org/zh/index.html

ECharts的基本使用：
1.引入echarts.js文件(下载地址https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js)
2.准备一个呈现图表的盒子
3.初始化echarts实例对象
4.准备配置项
5.将配置项设置给echarts实例对象

除了配置项不一样以外，其他的代码都一样

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 400px;
				height: 400px;
				border: 1px solid red;
			}
		</style>
		1.引入echarts.js文件(下载地址https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js)
		<script src="echarts.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		2.准备一个呈现图表的盒子
		<div class="div1">
			
			
		</div>
		
		<script type="text/javascript">
			//3.初始化echarts实例对象
			var div1 = document.querySelector('.div1');
			var charts = echarts.init(div1);
			//4.准备配置对象
			var option = {
				xAxis:{
					type:'category',//类目轴
					data:['小明','小红','小王']
				},
				yAxis:{
					type:'value'//数值轴
				},
				series:[{
					name:'语文',
					type:'bar',//柱状图line,pie
					data:[70,92,87]
				}]
			}
			//将配置项设置给echarts实例对象
			charts.setOption(option);
		</script>
	</body>
</html>

效果如下：
在这里插入图片描述
相关配置讲解：
xAxis：直角坐标系中的x轴
yAxis：直角坐标系中的y轴
series：系列列表。每个系列通过type决定自己的图表类型,series显示数据,sries是一个数组，就可以存放多种数据，就可以实现一表多用的功能

ECharts常用图表：
1.柱状图
2.折线图
3.散点图
4.饼图
5.地图
6.雷达图
7.仪表盘图

通用配置指的就是任何图标都能用的配置

标题:title
提示:tooltip
工具按钮:toolbox
图例:legend

通用配置:title{
text:图表名称；
textStyle:{
//文字样式
},
标题边框
borderWith、borderColor、borderRadius
标题位置
left、top、right、bottom
}

通用配置tooltip：提示框组件，用于配置鼠标滑过或点击图表时的显示框
触发类型trigger：item/axis

触发时机triggerOn：mouseover，click

格式化formatter：字符串模板，回调函数

通用配置toolbox
toolbox:{
feature:{
saveAsImage:{},//导出图片
dataView:{},//数据视图
restore:{},//重置
dataZoom:{},//区域缩放
magicType:{
type:[‘bar’,‘line’];
}//类型切换
}
}

折线图：
常见效果：效果都写在series当中
标记：最大值，最小值，平均值，标注区间
markPiont,markLine,markArea

series:{
markPoint:{
data:[
{
type:‘max’
},
{
type:‘min’
},
]
}
}

在这里插入图片描述

饼图：

在这里插入图片描述

地图：
1.百度地图
2.矢量地图

在这里插入图片描述

st紫月

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
echarts数据可视化

ECharts是一个使用JavaScript实现的可视化开源库网址：https://echarts.apache.org/zh/index.htmlECharts的基本使用：1.引入echarts.js文件2.准备一个呈现图表的盒子3.初始化echarts实例对象4.准备配置项5.将配置项设置给echarts实例对象...
复制链接

扫一扫

专栏目录