echarts-pie饼图

本文介绍了如何使用ECharts库在JavaScript中创建动态的饼状图,展示了数据配置和初始化过程,适合前端开发者学习数据可视化实践。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述

<!--若多图ID需动态-->
<div id="pie-chart" style="width: 400px; height: 200px"></div>
<script>
export default{
	data(){
		return {}
	},
	mounted(){
		this.init()
	},
	methods:{
		init(){
			// svg 解决canvas视图模糊
			const pieChart = this.$echarts.init(document.getElementById('pie-chart'), null, { renderer: 'svg' })
			let option = {
		        tooltip: {
		          trigger: 'item',
		          pading: [12, 16],
		          borderColor: '#fff',
		          textStyle: {
		            color: '#333',
		            fontSize: 12
		          }
		        },
		        legend: {
		          orient: "vertical",
		          align: 'left',
		          bottom: '0',
		          left: 'right',
		          icon: 'circle',
		          itemWidth: 9,
		          textStyle: {
		            color: '#8C8C8C',
		            fontSize: 12
		          }
		        },
		        series: [
		          {
		            type: 'pie',
		            radius: ['40%', '70%'],
		            avoidLabelOverlap: false,
		            label: {
		              show: true,
		              //{d} % 百分比 '{c}'数值
		              formatter: '{d} %',
		              fontSize: 12,
		              color: '#666',
		            },
		            labelLine: {
		              show: true,
		              length2:5
		            },
		            itemStyle:{
		              normal:{
		                borderWidth:1,
		                borderColor:'#fff'
		              }
		            },
		            color: ['#FFA202', '#93A3D2', '#0776D8','#5AD8A6','#E8684A'],
		            data: [
						{ value: 1048, name: 'Search Engine' },
				        { value: 735, name: 'Direct' },
				        { value: 580, name: 'Email' },
				        { value: 484, name: 'Union Ads' },
				        { value: 300, name: 'Video Ads' }
					]
		          }
		        ]
		      }
	     pieChart.clear();
	     setTimeout(() => {pieChart.setOption(option)}, 100)}
	}
}
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值