echarts画饼图

最新推荐文章于 2023-10-21 16:41:50 发布

weihe_7306

最新推荐文章于 2023-10-21 16:41:50 发布

阅读量137

点赞数

本文链接：https://blog.csdn.net/weixin_43360488/article/details/106879268

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="echarts.min (1).js">
			
		</script>
	</head>
	<body>
		<img src="../Picture/1.jpg"/>
		<div id="main" style="width: 900px; height: 600px;">
			
		</div>
		<script type="text/javascript">
			var myChart=echarts.init(document.getElementById('main'));
			var option={
			//显示标题
				title:{
					text:'某站点用户访问来源',
					subtext:'纯属虚构',
					x:'center'
				},
				//浮动提示框，模版
				tooltip:{
					trigger:'item',  
					formatter:"{a}<br/>{b}:{c} ({d}%)"
				},
//				图例，竖直排列，在左边
				legend:{
					orient:'vertical',
					left:'left',
					data:['直接访问','永久的地位','张三','李四','送二']
				},
				series:[
					{
						name:'访问来源',
						type:'pie',
						radius:'55%',
						//圆心的位置
						center:['50%','60%'],
						//数据的值是多少，与上面的值绑定
						data:[
							{value:335,name:'直接访问'},
							{value:435,name:'永久的地位'},
							{value:535,name:'张三'},
							{value:635,name:'李四'},
							{value:735,name:'送二'}
						]
					}
				]
			}
			myChart.setOption(option);
		</script>
	</body>
</html>

weihe_7306

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts画饼图

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="echarts.min (1).js"> </script> </head> <body> <img src="../Picture/1.jp
复制链接

扫一扫