echarts-pie饼图

最新推荐文章于 2024-07-16 17:21:30 发布

原创最新推荐文章于 2024-07-16 17:21:30 发布 · 336 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #前端

echarts 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用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>