echarts小总结

最新推荐文章于 2024-09-14 19:44:09 发布

Firework梦魇

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量594

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/Fireworkmeng/article/details/121665028

版权

echarts01-基本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.min.js"></script>
		<script src="js/purple-passion.js"></script>
		<style type="text/css">
			#container{width: 1200px;height: 600px;}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script type="text/javascript">
			// 01 修改主题 dark light，自定义
			// 02 修改调色盘,全局,color:[]
			// 初始化echart实例
			var echart=echarts.init(document.getElementById("container"))//dark深色，light亮色
			// 定义选项
			var option={
				// 调色盘
				// color:["pink","#f70","#f07"],
				// 标题
				title:{text:"前端大讲堂数据"},
				// 鼠标提示
				tooltip:{},
				// 图例
				legend:{data:["人数","人气","年龄分布"]},
				// x轴线
				xAxis:{data:["12-1","12-2","12-3","12-4","12-5"]},
				// y轴线
				yAxis:{},
				// 系列数据
				series:[
					// 名称name,类型:柱状图,数据data
					{name:"人数",type:"bar",data:[1000,800,1200,1600,600]},
					// ,areaStyle:{color:"pink"}面积区域
					{name:"人气",type:"line",smooth:true,data:[200,350,1500,800,1400]},
					{name:"年龄分布",type:"pie",left:"-50%",top:"-50%",radius:"20%",// ["20%","10%"]空心圆设置
						// color:["pink","#f70","#f07","#0f7"],
						data:[
							{name:"少年",value:20},
							{name:"青年",value:50},
							{name:"中年",value:30,
								// 条目样式
								itemStyle:{
									// 正常样式
									normal:{color:"#f70"},
									// hover事件颜色
									emphasis:{color:"#f3ff00"}
								}
									
							},
							{name:"老年",value:8},
							]}
				]
			};
			// 设置参数
			echart.setOption(option)
		</script>
	</body>
</html>

echarts02-特殊样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.min.js"></script>
		<style type="text/css">
			#container{width: 1200px;height: 600px;}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script type="text/javascript">
			var mycolor={
				type:'linear',
				x:0,
				y:0,
				x2:0,
				y2:1,
				colorStops:[{
						offset:0,color:'aqua',
					},{
						offset:1,color:'rgba(10,50,128,1)',
					}],
				global:false
			}
			// 初始化echart实例
			var echart=echarts.init(document.getElementById("container"),"dark")//dark深色，light亮色
			// 定义选项
			var option={
				title:{text:"特殊样式"},
				loged:{data:"人数"},
				tooltip:{},
				xAxis:{data:["12-1","12-2","12-3","12-4","12-5"]},
				yAxis:{},
				series:[
					{name:"人数",type:"bar",data:[10,20,50,80,60], //渐变颜色，圆角
					itemStyle:{color:mycolor,borderRadius:[100,100,0,0]}},
					// {name:"人数",type:"bar",data:[10,20,50,80,60],}
					]
			};
			// 设置参数
			echart.setOption(option)
		</script>
	</body>
</html>

echarts03-工具箱

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.min.js"></script>
		<style type="text/css">
			#container{width: 1200px;height: 600px;}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script type="text/javascript">
			var mycolor={
				type:'linear',
				x:0,
				y:0,
				x2:0,
				y2:1,
				colorStops:[{
						offset:0,color:'aqua',
					},{
						offset:1,color:'rgba(10,50,128,1)',
					}],
				global:false
			}
			// 初始化echart实例
			var echart=echarts.init(document.getElementById("container"),"dark")//dark深色，light亮色
			// 定义选项
			var option={
				title:{text:"工具箱"},
				toolbox: {
				    show: true,
				    feature: {
				      dataZoom: {
				        yAxisIndex: 'none'
				      },
				      dataView: { readOnly: false },
				      magicType: { type: ['line', 'bar'] },
				      restore: {},
				      saveAsImage: {},
					  }
				 },
				loged:{data:"人数"},
				tooltip:{},
				xAxis:{data:["12-1","12-2","12-3","12-4","12-5"]},
				yAxis:{},
				series:[
					{name:"人数",type:"bar",data:[10,20,50,80,60], //渐变颜色，圆角
					itemStyle:{color:mycolor,borderRadius:[100,100,0,0]}}]
			};
			// 设置参数
			echart.setOption(option)
		</script>
	</body>
</html>

好了今天总结到此结束（划水）