echart 饼图

最新推荐文章于 2022-09-20 09:36:01 发布

♕时光以北暮南城

最新推荐文章于 2022-09-20 09:36:01 发布

阅读量225

点赞数

分类专栏：前端文章标签： echart

本文链接：https://blog.csdn.net/qq_43742368/article/details/106506703

版权

前端专栏收录该内容

44 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用ECharts库来绘制饼图，包括配置项设置、数据绑定、自定义标签和交互效果等，适合需要在Web应用中展示数据比例的开发者。

摘要由CSDN通过智能技术生成

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
body,html{
	width:100%;height:100%;  //必须设置宽度和高度
}
</style>
<script src="./js/jquery-1.10.2.min.js"></script>
	  <script type="text/javascript" src="./js/echarts/echarts-all.js"></script>
  <script type="text/javascript" src="./js/echarts/echarts.js"></script>
 <script>
$(function(){
		var barDiv = echarts.init(document.getElementById("barDiv"));
		var option={
			title : {
					text: '12月支出',
				},
			
			tooltip : {
				trigger: 'item',
				},
			legend: {
					data:['网购','生活用品','餐饮','通讯','娱乐'],
				},
			toolbox: { 
					show : true,
					orient:'vertical',//工具栏侧放
					feature : {
						mark : {show: true},
						dataView : {show: true, readOnly: false},
						
						magicType : {show: true, type: ['pie']},
						restore : {show: true},
						saveAsImage : {show: true}
					}
				},
			series : [{
				type: 'pie',
				radius : '55%',//半径
				center: ['50%', '50%'],//圆心坐标
				data:[
				{value:200, name:'网购',},
				{value:500, name:'生活用品'},
				{value:1000, name:'餐饮'},
				{value:100, name:'通讯'},
				{value:50, name:'娱乐'}],
				itemStyle: {
					emphasis: {
					shadowBlur: 10,//图形阴影的模糊大小
					shadowOffsetX: 0,//阴影的水平距离。
					shadowColor: 'rgba(128, 128, 128, 0.5)',//阴影颜色
					},
				}
				}]
			}
		barDiv.setOption(option,true);
})
</script>
<body>
	<div id="barDiv" style="width:50%;height:30%;"></div> //必须设置宽度和高度
</body>
</html>

在这里插入图片描述