Echarts 环形饼图

最新推荐文章于 2024-05-21 23:21:19 发布

牧羊人_sj

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量111

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_59347596/article/details/131181321

版权

HTML <div id="container2"></div>

onReady:{
      this.setData2(echarts.init(document.getElementById('container2')));
   }

methods:{
    setData2(echart) {
				let data = [{
						value: 2,
						name: '立项'
					},
					{
						value: 3,
						name: '设计'
					},
					{
						value: 5,
						name: '施工'
					},
					{
						value: 8,
						name: '竣工'
					}
				]
				let color = ['#ee6666', "#1492ff", '#fac858', '#91cc75']
				let option = {
					color: color,
					 tooltip: {
					        trigger: 'item',
					        formatter: '{a} {b}: {c}',
					    },
					legend: {
						orient: 'horizontal',
						itemWidth: 12,
						itemGap: 8,
						bottom: 30,
						textStyle: {
							color: 'rgba(255,255,255,0.6)',
						},
						formatter: function(name) {
							return name;
						}
					},
					series: [{
						name: '',
						type: 'pie',
						radius: ['30%', '55%'],
						center: ['50%', '40%'],
						minAngle: 30,

						avoidLabelOverlap: false,
						label: {
							show: true,
							 position: 'inside',
							formatter: '{c}',
							rich: {
								text: {
									fontSize: '16',
									lineHeight: '20',
									color: '#fff'
								},
								num: {
									fontSize: '18',
									lineHeight: '20',
									color: '#1492ff'
								}
							}
						},
						labelLine: {
							show: true
						},
						data: data
					}]
				};
				echart.setOption(option, true);
			},
}