JavaScript大数据图表（饼状）的实现

最新推荐文章于 2022-05-07 20:09:08 发布

疑似忘川落九天

最新推荐文章于 2022-05-07 20:09:08 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： javascript big data echarts

本文链接：https://blog.csdn.net/qq_47801382/article/details/121908650

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<!-- 本地JS -->
	<!-- <script src="js/echarts-all.js" type="text/javascript" charset="utf-8"></script> -->
	<!-- 网络JS -->
	<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<body>
		<!-- 图表 -->
		<div id="mycharts">
			
		</div>
	</body>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</html>

CSS

#mycharts{
	width: 500px;
	height: 500px;
	
}

JavaScript

/*
1.获取div元素，初始化为echarets
2.声明图表
3、将声明好的图表，添加至div元素中
*/ 
//1.获取div元素，初始化为echarets
var myCharts = echarts.init(
document.getElementById("mycharts"))

//2.声明图表
var option = {
	//图表标题
	title:{
		text:"男女比例",
		left:"center"
	},
	//鼠标悬浮时，提示框内容
	tooltip:{
		trigger: 'item',
		formatter: '{a} <br/>{b} : {c} ({d}%)'
	},
	// 小图表标记样式
	legend:{
		left:"center",
		data:["男生","女生"],
		orient:"horizontal"
	},
	//图表详细内容：形状、数据
	series:[{
		name:"男女比例",
		type:"pie",
		radius:'50%',
		center:['50%','60%'],
		data:[{
			value:49,
			name:"男生"
		},{
			value:2,
			name:"女生"
		}],
		//图表选中时的样式
		emphasis:{
			itemStyle:{
				shadowBlur:10,
				shadowOffsetX:0,
				shadowColor:'rgb(0, 255, 127)'
			}
		}
	}],
};

//3、将声明好的图表，添加至div元素中
myCharts.setOption(option);

疑似忘川落九天

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript大数据图表（饼状）的实现

HTML<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head>  <!-- <script src="js/echarts-all.js" type="text/javascript" charset="utf-8"></script>
复制链接

扫一扫