echarts(百度版本)学习记录（个人使用，或者复制过去自行学习）

最新推荐文章于 2023-05-05 17:27:12 发布
曦和百里
最新推荐文章于 2023-05-05 17:27:12 发布
阅读量3.1w
点赞数 1
分类专栏： echarts html js 文章标签： echarts html5 es6
本文链接：https://blog.csdn.net/weixin_44647865/article/details/114632041
版权
js 同时被 3 个专栏收录
43 篇文章 0 订阅
订阅专栏
html
7 篇文章 0 订阅
订阅专栏
echarts
1 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/theme.js" type="text/javascript" charset="utf-8"></script>
		<style>
		</style>
	</head>
	<body>
		<div style="width: 600px;height: 400px;"></div>		
		<button id='modify'>修改数据</button>
		<button id="add">增加数据</button>
		<button id="btn1">触发行为</button>
	</body>
	<script>
		
		//柱状图
		// var mCharts= echarts.init(document.querySelector('div'))
		// var xDataArr=['小明','小红','小王','小明','小红','小王','小王','小明','小红','小王']
		// var yDataArr=[70,92,87,85,89,90,101,56,89,90]
		// var yDataArr2=[70,92,89,85,89,77,101,150,89,89]
		// var option={
		// 	dataZoom:[
		// 			{
		// 				type:'slider',
		// 				xAxisIndex:0
		// 			},
		// 			{
		// 				type:'slider',
		// 				yAxisIndex:0
		// 			}
		// 	],
		// 	grid:{
		// 		show:true,
		// 		borderWidth:1	
		// 	},
		// 	title:{
		// 		text:'成绩',
		// 		textStyle:{
		// 			color:'blue',
		// 			size:'20px'
		// 		},
		// 		borderWidth:10,
		// 		borderColor:'red',
		// 		top:20,
		// 		left:30
				
		// 	},
		// 	tooltip:{
		// 		trigger:'item',
		// 		// trigger:'axis',
		// 		triggerMove:'',
		// 		formatter: function(arg){
		// 			// console.log(arg)
		// 			return arg.name+'的分数是:'+arg.data
		// 		}
		// 	},
		// 	toolbox:{
		// 		feature:{
		// 			saveAsimage:{
						
		// 			},
		// 			dataView:{},
		// 			restore:{},
		// 			dataZoom:{},
		// 			magicType:{
		// 				type:['bar','line']
		// 			}
		// 		}
		// 	},
		// 	xAxis:{
		// 		type:'category',
		// 		data:xDataArr,
		// 		},
		// 	yAxis:{
				
		// 		type:'value'
		// 	},
		// 	series:[{
		// 		name:'语文',
		// 		type:'bar',
		// 		// barWidth:'30%',
		// 		itemStyle:{
		// 			normal:{
		// 				color:{
		// 					type:'linear',
		// 					x:0,
		// 					y:0,
		// 					x2:0,
		// 					y2:1,
		// 					colorStops:[
		// 						{offset:0,color:'red'},
		// 						{offset:1,color:'blue'}
		// 					]
		// 				}
		// 			}
		// 		},
		// 		markPoint:{
		// 			data:[
		// 				{
		// 					type:'max',name:'最大值'
		// 				},
		// 				{
		// 					type:'min',name:'最小值'
		// 				}
		// 			]
		// 		},
		// 		markLine:{
		// 			data:[{
		// 				type:'average',name:'平均值'
		// 			}],
					
		// 		},
		// 		label:{
		// 			show:false,
		// 			rotate:60,
		// 			position:'top'
		// 		},
		// 		data:yDataArr,
		// 	},
		// 	{
		// 		name:'数学',
		// 		type:'bar',
		// 		data:yDataArr2
		// 	}
		// 	],
			
		// }
		// mCharts.setOption(option)
		// //修改数据
		// var btnmodify=document.querySelector('#modify')
		// btnmodify.onclick=()=>{
		// 	var newYData=[70,11,11,11,99,90,30,56,89,90]
		// 	var option={
		// 		series:{
		// 			data:newYData
		// 		}
		// 	}
		// 	mCharts.setOption(option)
		// }
		// var btnadd=document.querySelector('#add')
		// btnadd.onclick=()=>{
		// 	xDataArr.push('傻强')
		// 	yDataArr.push(88)
		// 	yDataArr2.push(90)
		// 	var option={
		// 		xAxis:{
		// 			data:xDataArr
		// 		},
		// 		series:[
		// 			{
		// 				data:yDataArr
		// 			},
		// 			{
		// 				data:yDataArr2
		// 			}
		// 		]
		// 	}
		// 	mCharts.setOption(option)
		// }
		//折线图
		// var mCharts=echarts.init(document.querySelector('div'))
		// var xDataArr=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',]
		// var yDataArr=[2000,3000,4000,2500,7300,5200,1300,1522,8893,1000,6346,4155]
		// var yDataArr2=[2000,3000,1111,2500,2222,5200,3333,1522,8893,3333,6346,4155]
		// var  option={
		// 	xAxis:{
		// 		type:'category',
		// 		data:xDataArr,
		// 	},
		// 	yAxis:{
		// 		type:'value',
		// 		scale:true
		// 	},
		// 	series:[
		// 		{
		// 			neme:'欧师傅',
		// 			data:yDataArr,
		// 			stack:'all',
		// 			type:'line',
		// 			boundaryGap:true,
		// 			areaStyle:{
		// 				color:'green'
		// 			},
		// 			markPoint:{
		// 				data:[
		// 					{
		// 						type:'max'
		// 					},
		// 					{
		// 						type:'min'
		// 					}
		// 				]
		// 			},
		// 			markArea:{
		// 				data:[
		// 					[
		// 						{
		// 							xAxis:'1月'
		// 						},
		// 						{
		// 							xAxis:'2月'
		// 						}
		// 					],
		// 					[
		// 						{
		// 							xAxis:'5月'
		// 						},
		// 						{
		// 							xAxis:'7月'
		// 						}
		// 					],
							
		// 				]
		// 			},
		// 			smooth:true,
		// 			lineStyle:'green'
		// 		},
		// 		{
		// 			neme:'欧师傅',
		// 			data:yDataArr2,
		// 			type:'line',
		// 			smooth:true,
		// 			stack:'all',
		// 			areaStyle:{},
		// 			boundaryGap:true
		// 		}
		// 	]
		// }
		// mCharts.setOption(option)
		//饼状图
		var mCharts=echarts.init(document.querySelector('div'))
		mCharts.showLoading()	
		var pieData=[{name:'淘宝',value:'11231',emphasis:{color:'blue'}},{name:'京东',value:'22673'},{name:'唯品会',value:'6123'},{name:'1号店',value:'8989'},{name:'聚美优品',value:'6700'}]
		var option={
			legend:{
				data:['淘宝','京东','唯品会','1号店','聚美优品']
			},
			series:[
				{
					type:'pie',
					data:pieData,
					label:{
						normal:{
							show:true,
							formatter:function(arg){
								return arg.name+'平台'+arg.value+'元\n'+arg.percent+'%'
							}
						}
					},
					// radius:['50%','85%']
					roseType:'radius',
					selectedMode:'single'
				}
			]
		}
		setTimeout(function(){
			mCharts.hideLoading()
		},3000)
		mCharts.setOption(option)
		mCharts.on('legendselectchanged',function(arg){
			console.log(arg)
		})
		console.log($('#btn'))
		$('#btn1').click(()=>{
			mCharts.dispatchAction({
				type:'highlight',
				seriesIndex:0,
				dataIndex:1
			})
		})
		// //地图应用
		// var mCharts=echarts.init(document.querySelector('div'))
		// $.get('lib/China.json',function(ret){
		// 	echarts.registerMap('chinaMap',ret)
		// 	var option={
		// 		geo:{
		// 			type:'map',
		// 			map:'chinaMap',
		// 			roam:true,
		// 			label:{
		// 				normal:{
		// 					show:true
		// 				}
		// 			},
		// 			zoom:1,
		// 			center:[87.617733,43.792818]
		// 		},
				
		// 	}
		// 	mCharts.setOption(option)
		// })
		//雷达图
		// var mCharts=echarts.init(document.querySelector('div'))
		// var mdata=[{name:'华为手机',value:[80,90,35,65,88]},{name:'中兴手机',value:[86,20,99,80,8]}]
		// var dataMax=[{name:'易用性',max:100},{name:'功能',max:100},{name:'拍照',max:100},{name:'跑分',max:100},{name:'续航',max:100},]
		// var option={
		// 	radar:{
		// 		indicator:dataMax,//配置维度最大值
		// 		shape:'squar'
		// 	},
		// 	series:[{
		// 		type:'radar',
		// 		label:{normal:{
		// 			show:true
		// 		}},
		// 		areaStyle:{normal:{
					
		// 		}},
		// 		data:mdata
		// 	}
				
		// 	]
		// }
		// mCharts.setOption(option)
		//仪表盘
		// var mCharts=echarts.init(document.querySelector('div'),'light')
		// var mdata=[{value:100}]
		// var option={
		// 	series:{
		// 		type:'gauge',
		// 		data:mdata,
		// 		min:0,
		// 		max:100
		// 	}
		// }
		// mCharts.setOption(option)
	</script>
</html>