Echarts饼图中心数据总数和悬浮Demo

Echarts饼图中心数据总数和悬浮Demo

今天在需要做一个有关饼图的中心固定展示的功能，整理一下方便学习记录，直接上代码，废话不多，简单易懂

textStyle可以设置字体像是和位置区域

主要代码
formatter:‘10000’ 这个是显示总数的设置

label: {
		normal: {
			show: true,
			position: 'center',
			textStyle: {
				fontSize: 30,
				padding: [-100, 0, 0, 0],
			},
			formatter: '10000'
		},
		position: 'center',
		show: true,

emphasis中针对鼠标划入的内容效果展示和简单样式修改

 emphasis: {
                label: {
                    show: true,
                     formatter: [
                            '{b}',
                            '({c})'
                        ].join('\n'),
                    fontSize: '30',
                     padding: [20,0,0,0],
                    fontWeight: 'bold'
                }
            },

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
       
        {
            //  hoverAnimation : true,
             silent:false,
             
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
               normal :{
                   show: true,
                   position:'center',
                   textStyle:{
                       fontSize:30,
                       padding: [-100,0,0,0],
                   },
                   formatter:'10000'
                },
               position: 'center',
               show:true,
              
            },
            emphasis: {
                label: {
                    show: true,
                     formatter: [
                            '{b}',
                            '({c})'
                        ].join('\n'),
                    fontSize: '30',
                     padding: [20,0,0,0],
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ]
        }
    ]
};

效果图
总数这里写的是固定的，根据业务可以直接传入自己需要的数据