使用echart制作一个饼状图

#饼图的特点
1.颜色渐变
2.环状。`
var option={
title:{
text:‘1320’,
x:‘center’,
y:‘40%’,
subtext:‘设备数量’,
textStyle:{
fontSize:40,
},
subtextStyle:{
fontSize:20,
},
},

			series:{
				startAngle:115,
				type:'pie',
				radius:['50%','70%'],
				label:{
					show:false,
				},
				data:[
					{value:30,name:'待机',
						itemStyle:{
							color:new echarts.graphic.LinearGradient(1,0,0,0,[
								{
									offset:0,
									color:'#7AC5CD'
								},
								{
									offset:1,
									color:'#AEEEEE',
								},
							])
						}
					},
					
					{value:20,name:'运行',
						itemStyle:{
							color:new echarts.graphic.LinearGradient(1,0,0,0,[
								{
									offset:0,
									color:'#87CEFA'
								},
								{
									offset:1,
									color:'#0000FF',
								},
						
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
大学生参加学科竞赛有着诸多好处,不仅有助于个人综合素质的提升,还能为未来职业发展奠定良好基础。以下是一些分析: 首先,学科竞赛是提高专业知识和技能水平的有效途径。通过参与竞赛,学生不仅能够深入学习相关专业知识,还能够接触到最新的科研成果和技术发展趋势。这有助于拓展学生的学科视野,使其对专业领域有更深刻的理解。在竞赛过程中,学生通常需要解决实际问题,这锻炼了他们独立思考和解决问题的能力。 其次,学科竞赛培养了学生的团队合作精神。许多竞赛项目需要团队协作来完成,这促使学生学会有效地与他人合作、协调分工。在团队合作中,学生们能够学到如何有效沟通、共同制定目标和分工合作,这对于日后进入职场具有重要意义。 此外,学科竞赛是提高学生综合能力的一种途径。竞赛项目通常会涉及到理论知识、实际操作和创新思维等多个方面,要求参赛者具备全面的素质。在竞赛过程中,学生不仅需要展现自己的专业知识,还需要具备创新意识和解决问题的能力。这种全面的综合能力培养对于未来从事各类职业都具有积极作用。 此外,学科竞赛可以为学生提供展示自我、树立信心的机会。通过比赛的舞台,学生有机会展现自己在专业领域的优势,得到他人的认可和赞誉。这对于培养学生的自信心和自我价值感非常重要,有助于他们更加积极主动地投入学习和未来的职业生涯。 最后,学科竞赛对于个人职业发展具有积极的助推作用。在竞赛中脱颖而出的学生通常能够引起企业、研究机构等用人单位的关注。获得竞赛奖项不仅可以作为个人履历的亮点,还可以为进入理想的工作岗位提供有力的支持。
好的,以下是使用 ECharts 实现两个饼状图的示例代码: HTML 代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ECharts Two Pie Charts</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script> </head> <body> <div id="chart1" style="width: 800px; height: 400px;"></div> <div id="chart2" style="width: 800px; height: 400px;"></div> <script> // 初始化第一个饼状图 var chart1 = echarts.init(document.getElementById('chart1')); var option1 = { title: { text: 'Pie Chart 1', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['Category A', 'Category B', 'Category C', 'Category D', 'Category E'] }, series: [ { name: 'Data', type: 'pie', radius: ['40%', '60%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: 335, name: 'Category A'}, {value: 310, name: 'Category B'}, {value: 234, name: 'Category C'}, {value: 135, name: 'Category D'}, {value: 1548, name: 'Category E'} ] } ] }; chart1.setOption(option1); // 初始化第二个饼状图 var chart2 = echarts.init(document.getElementById('chart2')); var option2 = { title: { text: 'Pie Chart 2', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['Category A', 'Category B', 'Category C', 'Category D', 'Category E'] }, series: [ { name: 'Data', type: 'pie', radius: ['40%', '60%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: 235, name: 'Category A'}, {value: 510, name: 'Category B'}, {value: 734, name: 'Category C'}, {value: 435, name: 'Category D'}, {value: 948, name: 'Category E'} ] } ] }; chart2.setOption(option2); </script> </body> </html> ``` 在上面的代码中,我们定义了两个 `div`,分别用于显示两个饼状图。然后使用 ECharts 初始化两个图表,并分别设置了数据和样式。最后通过 `setOption` 方法将数据和样式应用于对应的图表中,实现了两个饼状图的展示。 注意,为了能够正确地显示图表,需要在 HTML 页面中引入 ECharts 的 JavaScript 库。在上面的代码中,我们使用ECharts 5.1.1 版本的 JavaScript 库,可以根据自己的需求选择不同版本的库。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值