Echarts学习------饼图

最新推荐文章于 2024-05-13 10:10:38 发布
最新推荐文章于 2024-05-13 10:10:38 发布
阅读量176 收藏
点赞数
分类专栏： Echarts 文章标签： 数据可视化 html css echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43719634/article/details/111924008
版权

1.基础饼图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="bar" style="width: 1000px;height: 500px;">
			
		</div>
		
		<script src="../js/echarts.min.js"></script>
		<script type="text/javascript">
			var mycharts = echarts.init(document.getElementById('bar'));
			option = {
			    title:{
			    	show : "true",   //是否显示标题
			    	text:"标题内容title",   //主标题的内容
			    	textStyle:{ 			//主标题字体样式
			    		color:"red",		//字体颜色
			    		fontStyle:"italic"	,	//字体样式  'normal' 'italic' 'oblique'
			    		fontWeight:	"bold",			//主标题文字字体的粗细。'normal''bold''bolder''lighter'数值
			    		//fontFamily:					//主标题文字的字体系列
			    		fontSize:30						//主标题文字的字体大小。
			    	},
			    	subtext:"子标题内容sub",
			    	subtextStyle:{
			    		//与主标题样式设置一致
			    	},
			    	left:"left",						//title 组件离容器左侧的距离。'left', 'center', 'right' 数值px
			    	//right:"",							//title 组件离容器右侧的距离。
			    	top:"top",								//title 组件离容器上侧的距离。
			    	//bottom:								//title 组件离容器下侧的距离。
			    	backgroundColor:"black",				//title组件背景颜色
			    	borderColor:"blue",							//title组件边框颜色
			    	borderWidth:5,							//title组件边框宽度
			    	borderRadius:10							//	title组件边框圆角
			    },
			    
			    legend:{        //图例配置
			    	show:true,
			    	//left:""
			    	right:200,
			    	top:"top",
			    	//bottom:
			    	orient:"vertical",   //图例显示方向  垂直或水平
			         data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
			    },
			    grid:{      //网格大小配置
			    	
			    	//网格大小配置
			    	left:'10%',
			    	right:100,
			    	top:'20%',
			    	bottom:100,		
			    },
			    tooltip:{    //提示框
			    	show:true,
			    	trigger:"item",   //触发方式  item  ,axis坐标轴
			    	backgroundColor:"#000000", //提示框背景颜色
			    	textStyle:{ 		//提示字体样式配置
			    		//配置类似主标题字体配置
			    		
			    	},
					
					formatter: '{a} <br/>{b} : {c} ({d}%)'  //自定义提示内容
			    	
			    },
			    toolbox:{    //工具箱设置
			    	show:true,
			    	orient:"horizontal",    //工具箱显示方向  垂直或者水平	
			    	itemSize:15,			//工具箱图标icon大小
			    	itemGap:10,			//	icon间隔大小
			    	showTitle:true,			//显示icon标题
			    	feature:{				//工具箱所含功能设置
			    		saveAsImage:{		//保存为图片
			    			show:true
			    		},
			    		restore:{			//配置项还原
			    			show:true
			    		},
			    		dataView:{			//数据视图
			    			show:true,
			    			 readOnly:true,  //只读
			    		},
			    		 magicType:{ 			//动态类型切换
			    			
			    		},
			    		 dataZoom:{			//数据区域缩放
			    			 
			    		 }
			    	}
			    },
			   series: [
			           {
			               name: '访问来源',
			               type: 'pie',
			               radius: '55%',      //半径大小
			               center: ['50%', '60%'],     //位置设置
			               data: [
			                   {value: 335, name: '直接访问'},
			                   {value: 310, name: '邮件营销'},
			                   {value: 234, name: '联盟广告'},
			                   {value: 135, name: '视频广告'},
			                   {value: 1548, name: '搜索引擎'}
			               ],
						   label:{
							   show:true    ,//是否显示标签
							   //标签字体设置
							   //color:"",
							   //fontStyle:
							  // fontWeight:
							  // fontFamily:
							  // fontSize:
						   },
			               emphasis: {  		//高亮的扇区和标签样式。
								label:{			//高亮时饼图的标签
									show:true
								},
								labelLine:{		//高亮时饼图每块标签线设置
									
								},
			                   itemStyle: {
			                       shadowBlur: 10,    //图形阴影的模糊大小。
			                       shadowOffsetX: 0, 	//阴影水平方向上的偏移距离。
			                       shadowColor: 'rgba(0, 0, 0, 0.5)'   //阴影颜色
			                   }
			               }
			           }
			       ]
			    
			};

			mycharts.setOption(option);
		</script>
	</body>
</html>

2.环形图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="bar" style="width: 1000px;height: 500px;">
			
		</div>
		
		<script src="../js/echarts.min.js"></script>
		<script type="text/javascript">
			var mycharts = echarts.init(document.getElementById('bar'));
			option = {
			    tooltip: {
			        trigger: 'item',
			        formatter: '{a} <br/>{b}: {c} ({d}%)'
			    },
			    legend: {
			        orient: 'vertical',
			        left: 10,
			        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
			    },
			    series: [
			        {
			            name: '访问来源',
			            type: 'pie',
			            radius: ['50%', '70%'],   //内外半径
			            avoidLabelOverlap: false,     //避免标签被遮挡
			            label: {
			                show: false,
			                position: 'center'
			            },
			            emphasis: {
			                label: {
			                    show: true,
			                    fontSize: '30',
			                    fontWeight: 'bold'
			                }
			            },
			            labelLine: {
			                show: false
			            },
			            data: [
			                {value: 335, name: '直接访问'},
			                {value: 310, name: '邮件营销'},
			                {value: 234, name: '联盟广告'},
			                {value: 135, name: '视频广告'},
			                {value: 1548, name: '搜索引擎'}
			            ]
			        }
			    ]
			};
			    title:{
			    	show : "true",   //是否显示标题
			    	text:"标题内容title",   //主标题的内容
			    	textStyle:{ 			//主标题字体样式
			    		color:"red",		//字体颜色
			    		fontStyle:"italic"	,	//字体样式  'normal' 'italic' 'oblique'
			    		fontWeight:	"bold",			//主标题文字字体的粗细。'normal''bold''bolder''lighter'数值
			    		//fontFamily:					//主标题文字的字体系列
			    		fontSize:30						//主标题文字的字体大小。
			    	},
			    	subtext:"子标题内容sub",
			    	subtextStyle:{
			    		//与主标题样式设置一致
			    	},
			    	left:"left",						//title 组件离容器左侧的距离。'left', 'center', 'right' 数值px
			    	//right:"",							//title 组件离容器右侧的距离。
			    	top:"top",								//title 组件离容器上侧的距离。
			    	//bottom:								//title 组件离容器下侧的距离。
			    	backgroundColor:"black",				//title组件背景颜色
			    	borderColor:"blue",							//title组件边框颜色
			    	borderWidth:5,							//title组件边框宽度
			    	borderRadius:10							//	title组件边框圆角
			    },
			    
			    legend:{        //图例配置
			    	show:true,
			    	//left:""
			    	right:200,
			    	top:"top",
			    	//bottom:
			    	orient:"horizontal",   //图例显示方向  垂直或水平
			        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
			    },
			    grid:{      //网格大小配置
			    	
			    	//网格大小配置
			    	left:'10%',
			    	right:100,
			    	top:'20%',
			    	bottom:100,		
			    },
			    tooltip:{    //提示框
			    	show:true,
			    	trigger:"axis",   //触发方式  item  ,axis坐标轴
			    	backgroundColor:"#000000", //提示框背景颜色
			    	textStyle:{ 		//提示字体样式配置
			    		//配置类似主标题字体配置
			    		
			    	}
			    	
			    },
			    toolbox:{    //工具箱设置
			    	show:true,
			    	orient:"horizontal",    //工具箱显示方向  垂直或者水平	
			    	itemSize:15,			//工具箱图标icon大小
			    	itemGap:10,			//	icon间隔大小
			    	showTitle:true,			//显示icon标题
			    	feature:{				//工具箱所含功能设置
			    		saveAsImage:{		//保存为图片
			    			show:true
			    		},
			    		restore:{			//配置项还原
			    			show:true
			    		},
			    		dataView:{			//数据视图
			    			show:true,
			    			 readOnly:true,  //只读
			    		},
			    		 magicType:{ 			//动态类型切换
			    			
			    		},
			    		 dataZoom:{			//数据区域缩放
			    			 
			    		 }
			    	}
			    },
			   
			    
			};

			mycharts.setOption(option);
		</script>
	</body>
</html>

 3.组合图

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
                position: 'inner'
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直达', selected: true},
                {value: 679, name: '营销广告'},
                {value: 1548, name: '搜索引擎'}
            ]
        },
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                backgroundColor: '#eee',
                borderColor: '#aaa',
                borderWidth: 1,
                borderRadius: 4,
                // shadowBlur:3,
                // shadowOffsetX: 2,
                // shadowOffsetY: 2,
                // shadowColor: '#999',
                // padding: [0, 7],
                rich: {
                    a: {
                        color: '#999',
                        lineHeight: 22,
                        align: 'center'
                    },
                    // abg: {
                    //     backgroundColor: '#333',
                    //     width: '100%',
                    //     align: 'right',
                    //     height: 22,
                    //     borderRadius: [4, 4, 0, 0]
                    // },
                    hr: {
                        borderColor: '#aaa',
                        width: '100%',
                        borderWidth: 0.5,
                        height: 0
                    },
                    b: {
                        fontSize: 16,
                        lineHeight: 33
                    },
                    per: {
                        color: '#eee',
                        backgroundColor: '#334455',
                        padding: [2, 4],
                        borderRadius: 2
                    }
                }
            },
            data: [
                {value: 335, name: '直达'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1048, name: '百度'},
                {value: 251, name: '谷歌'},
                {value: 147, name: '必应'},
                {value: 102, name: '其他'}
            ]
        }
    ]
};

卷王中王
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echart统计图表
03-27
echart统计图表：饼状图，折线图，柱状图，echart所需js
Echarts学习------柱形图
qq_43719634的博客
12-29 149
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="bar" style="width: 1000px;height: 500px;"> </div> <script src="../js/echarts...
echarths 使用环形柱状图实行环比效果
cjsx_youshou的博客
07-16 1666
echarths 使用环形柱状图实行环比效果 var option = { angleAxis: { startAngle:90, // 开始位置 clockwise:false,// 是否顺时针 max:100,// 坐标轴最大值100 axisLine:{ show:false // 不显示坐标轴 }, splitNumber:1, axisTick:{
ECharts学习-折线图
热门推荐
zww学习笔记
05-25 2万+
绘制折线图的主要代码如下：<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="height:400px;width: 600
使用echarts查看最近几场考试的排名变化折线图
qq_36500865的博客
12-25 1721
使用echarts前需要先引用echarts echarts快速上手 option = { xAxis: { type: 'category', data: ['月考一', '月考二', '月考三', '月考四', '月考五', '月考六'], position:'bottom',//坐标轴的位置 name:"考试名称", ...
echarts~echarts-gl 配套版本文件
11-02
ECharts 是一个基于 JavaScript 的数据可视化库，它提供丰富的图表类型，如柱状图、折线图、饼图等，并支持在网页上动态渲染大型数据。ECharts 的优点包括易于使用、性能优秀、兼容多种浏览器，且具有良好的交互功能...
echarts-4.0.0版本
07-26
ECharts 是一个由百度开发的开源 JavaScript 数据可视化库，它基于 HTML5 的 Canvas 技术，为用户提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，支持自定义交互和视觉效果。ECharts 4.0.0 版本是该库的...
Echarts文档-API.rar
06-22
1. **图表类型**：ECharts支持多种图表类型，包括柱状图、折线图、饼图、散点图、K线图、地图、仪表盘等，可以灵活组合使用，适应各种数据展示场景。 2. **数据加载与处理**：ECharts允许开发者通过JSON、CSV、TSV...
Echarts饼图-自定义图图标.rar
最新发布
07-04
本文将详细介绍如何使用ECharts库创建一个带有自定义图标的饼图。ECharts是一个基于JavaScript的开源可视化图表库，能够生成丰富的数据可视化效果。我们将通过具体的代码示例，展示如何实现图表的个性化设置，包括...
echarts-2.0.0.zip
07-29
在 ECharts 2.0.0 版本中，开发者可以创建各种类型的图表，如柱状图、折线图、饼图、散点图等，同时支持地图、仪表盘、热力图等多种复杂图表。这个版本可能不包含后来版本中的一些新特性，比如动态数据加载、自适应...
Axure图表元件库（环比同比、环形、柱状、折线、饼状）
08-19
Axure元件库图表，其中包含环比同比图、环形图、柱状图、折线图、饼状图、综合统计图
ECharts 中，标题（title）的主标题（text）和副标题（subtext）之间的间距可以通过调整
weixin_44705979的博客
09-06 1719
【代码】ECharts 中，标题（title）的主标题（text）和副标题（subtext）之间的间距可以通过调整。
echarts饼环图
xinxin_csdn的博客
10-14 2468
app.title = '嵌套环形图'; option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { orient: 'vertical', x: 'left', ...
成绩分析图绘制
Huang_Qi_Yi的博客
05-29 1777
1.效果图： 2.首先查询学生成绩 3.接着渲染表格 4.接着就是统计学生成绩，构建表格数据，分别计算出考生数量、平均成绩、合格率、不合格率、100分、90~99分、80~89分、70~79分、60~69分 4.最后绘制图形表，图形表分别有饼状图、柱状图、折线图。首先初始化echarts的图表，获取到第一个饼状图第二的饼状图和柱状图、折线图的ID。接着指定图表的配置项和数据，图表的标题是随着查询而变化，在一开始命名一个全局变量titText,接着在统计学生成...
echarts饼图标题居中以及调整主副标题的间距、字号
qq_45780380的博客
07-05 9450
echarts饼图标题居中以及调整主副标题的间距、字号 text：主标题 subtext：副标题 textStyle: {} //主标题的属性设置 subtextStyle: {} //副标题的属性 itemGap：主副标题之间的间距 textAlign：整体（包括 text 和 subtext）的水平对齐 title: { show: true, text: '本月参评项目', s
echarts toolbox超出容器导致被截断
weixin_44258574的博客
12-25 954
echarts toolbox超出容器导致被截断 解决方案： echarts的配置项中设置 toolbox{ right：’30%’ //看到有文章说默认时是auto,20%, //稍微设置大一点即可， //但我后来尝试小于20%时也可， //可能是因为我同时设置了grid中的right吧， //暂未考证，有待大家指正 } 至于上方被截断的那里，通过设置 gr
使用Echarts实现饼图
huhuhuja
10-30 1069
效果如图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js".
无人售货机零售项目ECharts展现(最全！！，文档放最后哦！)
weixin_68473774的博客
05-13 2738
无人售货机项目的分析步骤与流程。着重介绍了如何使用ECharts图表对无人售货机零售项目销售情况、库存情况和用户情况进行可视化展现。全部的文件已经放到了资源里了。
echarts之（1）折线图
请叫我小明 （坐标：西安）
07-28 467
刚结束上一个项目，整理一下用到的echarts属性 &lt;script type="text/javascript"&gt; var imgUrl = null; //折线图 var fileLocation ='${echartsPath}/echarts'; require.config({ paths:{ ...
echarts模板下载-csdn
08-01
通过阅读这些教程，你可以学习如何使用ECharts，掌握ECharts的基本语法和配置项。同时，通过参考他人的案例，你可以了解如何运用ECharts实现各种复杂的图表效果。 总之，ECharts模板下载是CSDN上提供的一个便捷的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值