当前位置: 首页>编程语言>正文

可视化配置lvs 可视化配置生成图表

[ECharts] 实现你的第一个可视化图表/常用图表配置

ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。

目录

开始第一个ECharts实例

多柱状图实例及优化

折线图实例

通用配置

最终案例

开始第一个ECharts实例

  1. 准备好ECharts源码文件,这里我使用 echarts.min.js,可以到官方网站下载,也可以到github下载
官方网站
GitHub
  1. 新建一个html文件,准备一个容器,将echarts源码引入其中(一定要为容器设置宽高)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			#app{
				width:600px;
				height:400px;
			}
		</style>
	</head>
	<body>
		<div id="app"></div>
		<script type="text/javascript">
			// 接下来的代码全部在此处
		</script>
	</body>
</html>
  1. 初始化echarts,将其与容器绑定

let e = echarts.init(document.querySelector("#app"));

  1. 创建一个配置对象,并将其与echarts实例绑定
let option = {};
e.setOption(option);
  1. 准备x轴分类数据,y轴数值数据,这里以成绩为例
let xdata = ["小明","小王","小刚"];
let ydata = [84,65,90];
  1. 配置option对象(详见注释)
let option = {
	xAxis:{		// 这里配置的是x轴 也就是横轴数据
		type:"category",	// 分类类型
		data:xdata		// x轴的分类数据 这里每个分类就是每个人
	},
	yAxis:{		// 这里配置的是y轴 也就是纵轴数据
		type:"value"		// 值类型
	},
	series:[	// 这里配置的就是图表中的数据
		{
			name:"数学",	// 名字 后期会有用
			type:"bar",		// 柱状图类型
			data:ydata		// 数据源
		}
	]
};
  1. 实例效果

可视化配置lvs 可视化配置生成图表,可视化配置lvs 可视化配置生成图表_js,第1张

  • 源码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			#app{
				width:600px;
				height:400px;
			}
		</style>
	</head>
	<body>
		<div id="app"></div>
		<script type="text/javascript">
			let e = echarts.init(document.querySelector("#app"));
			let xdata = ["小明","小王","小刚"];
			let ydata = [84,65,90];
			let option = {
				xAxis:{
					type:"category",
					data:xdata
				},
				yAxis:{
					type:"value"
				},
				series:[
					{
						name:"数学",
						type:"bar",
						data:ydata
					}
				]
			};
			e.setOption(option);
		</script>
	</body>
</html>

多柱状图实例及优化

如果每个人有多个成绩,那么应该如何来实现呢?

可视化配置lvs 可视化配置生成图表,可视化配置lvs 可视化配置生成图表_数据可视化_02,第2张

  1. 准备好数据
let xdata = ["小明","小王","小刚"];
let ydata = [84,65,90];
let ydata2 = [77,88,99];
let ydata3 = [69,59,100];
  1. 修改option配置对象
let option = {
	xAxis:{
		type:"category",
		data:xdata
	},
	yAxis:{
		type:"value"
	},
	series:[	// 这里的修改,其实就是多加了两个数据对象
		{
			name:"数学",
			type:"bar",
			data:ydata
		},{
			name:"语文",
			type:"bar",
			data:ydata2
		},{
			name:"英语",
			type:"bar",
			data:ydata3
		}
	]
};

优化

1. 增加各项数据 最大值 最小值标记

markPoint:{
	data:[
		{type: 'max', name: '最大值'},
		{type: 'min', name: '最小值'}
	]
}
  • 修改之后
let option = {
	xAxis:{type:"category",data:xdata},
	yAxis:{type:"value"},
	series:[
		{
			name:"数学",
			type:"bar",
			data:ydata,
			markPoint:{
				data:[
					{type: 'max', name: '最大值'},
					{type: 'min', name: '最小值'}
				]
			}
		},{
			name:"语文",
			type:"bar",
			data:ydata2,
			markPoint:{
				data:[
					{type: 'max', name: '最大值'},
					{type: 'min', name: '最小值'}
				]
			},
		},{
			name:"英语",
			type:"bar",
			data:ydata3,
			markPoint:{
				data:[
					{type: 'max', name: '最大值'},
					{type: 'min', name: '最小值'}
				]
			},
		}
	]
};
  • 效果图

可视化配置lvs 可视化配置生成图表,可视化配置lvs 可视化配置生成图表_可视化配置lvs_03,第3张

2. 增加各项数据平均值

markLine:{
	data:[
		{type:'average',name:'平均'}
	]
}
  • 用法如下,哪个数据需要就加在哪个数据上面
{
	name:"数学",
	type:"bar",
	data:ydata,
	markLine:{
		data:[
			{type:'average',name:'平均'}
		]
	}
}
  • 效果

可视化配置lvs 可视化配置生成图表,可视化配置lvs 可视化配置生成图表_可视化配置lvs_04,第4张

3. 增加数值显示 旋转数值 数值位置

label:{
	show:true,	// 是否显示数值
	rotate:40,	// 旋转角度
	position:'top'	// 数值显示位置
}
  • 修改配置对象
let option = {
	xAxis:{
		type:"category",
		data:xdata
	},
	yAxis:{
		type:"value"
	},
	series:[
		{
			name:"数学",
			type:"bar",
			data:ydata,
			label:{
					show:true,
					rotate:40,
					position:'top'
			}
		},{
			name:"语文",
			type:"bar",
			data:ydata2,
			label:{
					show:true,
					rotate:40,
					position:'top'
			}
		},{
			name:"英语",
			type:"bar",
			data:ydata3,
			label:{
				show:true,
				rotate:40,
				position:'top'
			}
		}
	]
};
  • 效果

可视化配置lvs 可视化配置生成图表,可视化配置lvs 可视化配置生成图表_数据可视化_05,第5张

4. 柱宽度 横向柱状图

  • 设置柱宽度

barWidth:“30%”

{
	name:"数学",
	type:"bar",
	data:ydata,
	label:{show:true},
	barWidth:"30%",
}
  • 横向柱状图的实现,要颠倒xy轴的配置
let option = {
				xAxis:{
					type:"value"
				},
				yAxis:{
					type:"category",
					data:xdata
				},
				series:[
					{
						name:"数学",
						type:"bar",
						data:ydata,
						label:{show:true},
					},{
						name:"语文",
						type:"bar",
						data:ydata2,
						label:{show:true}
					},{
						name:"英语",
						type:"bar",
						data:ydata3,
						label:{show:true}
					}
				]
			};
  • 效果

可视化配置lvs 可视化配置生成图表,可视化配置lvs 可视化配置生成图表_可视化配置lvs_06,第6张

折线图实例

最顶级的食材往往只需要最简单的烹饪。。。跑题了

  • 将 bar 改为 line 一个最基本的折线图就出来了
let option = {
				xAxis:{
					type:"category",
					data:xdata
				},
				yAxis:{
					type:"value"
				},
				series:[
					{
						name:"数学",
						type:"line",
						data:ydata,
						label:{show:true},
					},{
						name:"语文",
						type:"line",
						data:ydata2,
						label:{show:true}
					},{
						name:"英语",
						type:"line",
						data:ydata3,
						label:{show:true}
					}
				]
			};

可视化配置lvs 可视化配置生成图表,可视化配置lvs 可视化配置生成图表_数据可视化_07,第7张

通用配置

标题 title

  • 文字样式 textStyle
  • color 文字颜色
  • fontStyle 字体风格
  • fontWeight 文字粗细
let option = {
	title:{
		text:"成绩单",
		textStyle:{
			color:"#ff8800"
		}
}
  • 标题边框
  • borderWidth
  • borderColor
  • borderRadius
title:{
	text:"成绩单",
	textStyle:{
		color:"#ff8800"
	},
	borderWidth:3,
	borderColor:"#eeeeee",
	borderRadius:6
}
  • 标题位置
  • left
  • top
  • right
  • bottom
title:{
	text:"成绩单",
	textStyle:{
		color:"#ff8800"
	},
	left:100,
	top:10
}

提示 tooltip

提示框组件,用于配置鼠标划过或点击图表时的显示框

  • 触发类型 trigger
  • item
  • axis
  • 触发时机 triggerOn
  • mouseover
  • click
  • 格式化 formatter
  • 字符串模板
  • 回调函数
tooltip:{
	trigger:'axis',
	triggerOn:"click",
	// formatter:"{b} 的成绩是 {c}"
	formatter:function(arg){
		return arg[0].name + '的分数是:'+arg[0].data
	}
}

工具按钮 toolbox

toolbox ECharts提供的工具栏

  • 内置有到处图片、数据视图,动态类型切换,数据区域缩放,重置五个工具
toolbox:{
	feature:{
		saveAsImage:{},	// 保存为图片
		dataView:{},	// 数据视图
		restore:{},		// 重置
		dataZoom:{},		// 区域缩放
		magicType:{		// 动态类型切换
				type:['bar','line']
		}
	}
}

图例 legend

图例,用于筛选系列,需要和series配合使用

  • legend 中的 data 是一个数组
  • legend 中的 data 的值需要和 series 数组中某组数据的name值一致
legend:{data:['数学','语文']},

series:[
	{
		name:'数学',
		type:'bar',
		data:ydata
	},
	{
		name:"语文",
		type:'bar',
		data:ydata2,
	}
]

最终案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./lib/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#app{
				width:600px;
				height:400px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			
		</div>
		<script type="text/javascript">
			let mCharts = echarts.init(document.querySelector("#app"));
			let xdata = ['小张','小王','小明','小红','小芳']
			let ydata = [80,88,99,82,68];
			let ydata2 = [66,59,100,80,73];
			
			let option = {
				title:{
					text:"成绩单",
					textStyle:{
						color:"#ff8800"
					},
					borderWidth:3,
					borderColor:"#eeeeee",
					borderRadius:6,
					left:100,
					top:10
				},
				tooltip:{
					trigger:'axis',
					triggerOn:"click",
					// formatter:"{b} 的成绩是 {c}"
					formatter:function(arg){
						return arg[0].name + '的分数是:'+arg[0].data
					}
				},
				toolbox:{
					feature:{
						saveAsImage:{},	// 保存为图片
						dataView:{},	// 数据视图
						restore:{},		// 重置
						dataZoom:{},		// 区域缩放
						magicType:{		// 动态类型切换
							type:['bar','line']
						}
					}
				},
				legend:{
					data:['数学','语文']
				},
				xAxis:{
					type:'value'
				},
				yAxis:{
					type:'category',
					data:xdata
				},
				series:[
					{
						name:'数学',
						type:'bar',
						markPoint:{
							data:[
								{type: 'max', name: '最大值'},
								{type: 'min', name: '最小值'}
							]
						},
						markLine:{
							data:[{type:'average',name:'平均'}]
						},
						label:{
							show:true,
							rotate:40,
							position:'top'
						},
						barWidth:"30%",
						data:ydata
					},
					{
						name:"语文",
						type:'bar',
						data:ydata2,
						label:{
							show:true,
							rotate:40,
							position:'bottom'
						},
						barWidth:"30%"
					}
				]
			}
			mCharts.setOption(option);
		</script>
	</body>
</html>
  • 效果

可视化配置lvs 可视化配置生成图表,可视化配置lvs 可视化配置生成图表_可视化配置lvs_08,第8张


https://www.xamrdz.com/lan/5cj1924835.html

相关文章: