echarts实现饼图，效果图如下

最新推荐文章于 2024-06-21 16:31:42 发布

缝隙里看你

最新推荐文章于 2024-06-21 16:31:42 发布

阅读量801

点赞数

文章标签： echarts

本文链接：https://blog.csdn.net/qq_42097490/article/details/103384233

版权

效果图：
在这里插入图片描述

直接上代码：

引入echarts.min.js文件

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var giftImageUrl = "../../img/mmbb.png";

var data = [{
	    value: 300000,
	    name: '赵某某'
	}, {
	    value: 300000,
	    name: '钱某某'
	}, {
	    value: 200000,
	    name: '孙某某'
	}, {
	    value: 100000,
	    name: '李某某'
	}, {
	    value: 300000,
	    name: '王某某'
	}];
	option = {
	    backgroundColor: '#fff',
	    title: {
	        text: '¥1,200,000',
	        subtext: '总额',
	        x: 'center',
	        y: 'center',
	        textStyle: {
	            fontWeight: 'normal',
	            fontSize: 24,
	            color:'#1a1a1a'
	        },
	         subtextStyle: {
	            fontSize: 20,
	            fontWeight: 'normal',
	            color:'#1a1a1a'
	        },
	    },
	    tooltip: {
	        show: true,
	        trigger: 'item',
	        formatter: "{b}: {c} ({d}%)"
	    },
	    series: [{
	        type: 'pie',
	        selectedMode: 'single',
	        radius: ['45%', '80%'],
	        color: ['#22ac38', '#ed7d31', '#d1c0a5', '#5b9bd5', '#f8b551'],
	
	        label: {
	            normal: {
	                position: 'inner',
	                formatter: '{d}%',
	
	                textStyle: {
	                    color: '#fff',
	                    fontWeight: 'bold',
	                    fontSize: 18
	                }
	            }
	        },
	        labelLine: {
	            normal: {
	                show: false
	            }
	        },
	        data: data
	    }, 
	    {
	        type: 'pie',
	        radius: ['45%', '80%'],
	        label: {
	            normal: {
	            borderWidth: 1,
            	borderRadius: 8,
                formatter: data,
                borderColor: '#d2d2d2',
                fontSize: 18,
                padding: 10,
                color:'#1a1a1a'
            }
	        },
	        data: data
	    }]
	};
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);`

有什么问题可以给我留言，纯粹是为了记录自己学习