<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 第一步 引入echartsjs -->
		<script src="js/echarts.js"></script>
	</head>
	<body>
		<!-- 第二步 创建一个dom元素-->
		<div id="app" style="width: 800px;height:400px;margin: auto;"></div>
		<!-- 第三步 -->
		<script>
			var myChart = echarts.init(document.getElementById("app"),'dark')
			option = {
				title:{
					text:"我是标题",
					left:"center"  //标题位置  left right center  也可以是数值 如 100 表示距离左边100像素
				},
				legend: { //可以配置 切换
					data: ["张三", "李四"], //必须和series里面的对象数据里的name名字一致
					left: "left", //left center right
					//orient: 'vertical',//竖排显示  不写默认是横排

				},
				tooltip: {
					trigger: 'axis',
					triggerOn: 'click', //设为点击   不写默认为移入
					/*
					formatter:function(res){ //手动配置展示信息 查看res
						// return res  要展示的信息
					}
					*/
				},
				// 配置工具栏
				toolbox: {
					feature: {
						saveAsImage: {
							"name":"哈哈"
						}, //导出为图片
						dataView: {}, //数据视图
						restore: {}, //重置
						dataZoom: {}, //区域缩放
						magicType: {
							type: ["bar", "line"]
						}
					}
				},
				// 配置x轴信息 常用于列表项
				xAxis: {
					type: "category",//如果写成value则会与y轴交换位置
					// 我们的数据
					data: ["HTML", "CSS", "JavaScript", "jQuery", "bootstrap", "eCharts"],
					name: "学习科目"
				},
				// 配置Y轴的展示信息 一般默认为{}
				yAxis: {
					type: "value", //'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 yAxis.data 设置类目数据。'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据。
					name: "掌握(%)",
					data: [0,20,40,60,80,100] //自定义y轴数值  但是一般来说不用设置  如果设置了data那么就不能设置type
			 },
				// 配置我们的数据 一个对象就表示一个数据
				series: [{
						name: "张三",
						type: "bar", //类型请参考官网
						data: [-10, 50, 60, 80, 70, 59], //我们的数据信息
						markPoint: { //我们可以通过这个markPoint对象来实现最大值和最小值的展示
							data: [{
									type: 'max',
									name: "最大值"
								},
								{
									type: 'min',
									name: "最小值"
								}
							]
						},
						markLine: {
							data: [{
								type: 'average',
								name: "平均值"
							}]
						},
					 // 展示我们每条数据的详细值
						label: {
							show: true,//是否现实数值
							formatter: '哎哟不错哟！！！', //标签的文字。 但是写了这个 不会在显示当前数值
							position: '', //top bottom left right  不写默认为正中间
							color: "#fff", //字体的颜色
							textStyle: {
								fontSize: 12//字体大小
							}, 
							rotate: 45 //文字的旋转
							
						},
						// 柱条样式 设置所有的  但是也可以设置单独的柱条样式  只需要把他写到数据的data里面
						itemStyle: {
							barBorderRadius: 5, //柱条圆角的半径
							borderWidth: 1,//宽度
							borderType: 'solid',//样式
							borderColor: '#73c0de',//柱条的描边颜色
							shadowColor: '#5470c6',//阴影颜色
							shadowBlur: 3,//阴影模糊度
							color: '#91cc75',//柱条的颜色
							opacity: 0.5 //透明度
						}
					},
					{
						name: "李四",
						type: "bar",
						data: [89, 91, 95, 99, 86, 93]

					}
				]
			};
			myChart.setOption(option)
		</script>
	</body>
</html>