day19 part2：Echarts

最新推荐文章于 2022-09-13 16:29:17 发布

原创最新推荐文章于 2022-09-13 16:29:17 发布 · 346 阅读

CC 4.0 BY-SA版权

文章标签：

特性：一个纯Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的Canvas 类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

一、简单柱形图

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 引入Echarts文件 -->
<script src="echarts.js"></script>
</head>
<body>
	<!-- 为Echarts准备一个具备大小(宽高)的DOM -->
	<div id="main" style="width:600px;height:400px;"></div>
	<script type="text/javascript">
	//基于准备好的DOM初始化echarts实例
	var myChart=echarts.init(document.getElementById("main"));
	//指定图表的配置项和数据
	var option={
			title:{
				text:'Echarts入门示例'
			},
			tooltip:{},
			legend:{
				data:['销量']
			},
			xAxis:{
				data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
			},
			yAxis:{},
			series:[{
				name:'销量',
				type:'bar',
				data:[5,20,36,10,10,20]
			}]
	};
	//使用刚指定的配置项和数据显示图表
	myChart.setOption(option);
	</script>
</body>
</html>

二、个性化图表样式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 引入Echarts文件 -->
<script src="echarts.js"></script>
</head>
<body>
	<!-- 为Echarts准备一个具备大小(宽高)的DOM -->
	<div id="main" style="width:600px;height:400px;"></div>
	<script type="text/javascript">
	//基于准备好的DOM初始化echarts实例
	var myChart=echarts.init(document.getElementById("main"));
	//指定图表的配置项和数据
	var option={
			title:{
				text:'南丁格尔图'
			},
			//设置样式，例如阴影、透明度、颜色、边框颜色、边框宽度等
			itemStyle:{
				//normal是正常展示下的样式,emphasis是鼠标 hover时候的高亮样式
				normal:{
					//阴影的大小
					shadowBlur:200,
					//阴影水平方向上的偏移
					shadowOffsetX:0,
					//阴影垂直方向上的偏移
					shadowOffsetY:0,
					//阴影颜色
					shadowColor:'rgba(0,0,0,0.5)',
					//扇形颜色
					color:'#c23531'
				}
			},
			//背景色
			backgroundColor:'#2c343c',
			//文本样式
			textStyle:{
				color:'rgba(255,255,255,0.3)'
			},
			//视觉引导线颜色设置为浅色
			labelLine:{
				normal:{
					lineStyle:{
						color:'rgba(255,255,255,0.3)'
					}
				}
			},
			//明暗度 
			visualMap:{
				//不显示visualMap组件，只用于明暗度的映射
				show:false,
				//映射的最小值是80
				min:80,
				//映射的最大值是600
				max:600,
				inRange:{
					//明暗度范围0到1
					colorLightness:[0,1]
				}
			},
			series:[
			  {
				name:'访问来源',
				type:'pie',
				radius:'55%',
				data:[
				      {value:400,name:'搜索引擎'},
				      {value:335,name:'直接访问'},
				      {value:310,name:'邮件营销'},
				      {value:274,name:'联盟广告'},
				      {value:235,name:'视频广告'}
				   ]
			}
		]
	};
	//使用刚指定的配置项和数据显示图表
	myChart.setOption(option);
	</script>
</body>
</html>