《前端》Echarts 饼图--设置显示文字、数据、百分比等--2020年8月10日

最新推荐文章于 2024-03-05 11:02:52 发布

bellediao

最新推荐文章于 2024-03-05 11:02:52 发布

阅读量3.3k

点赞数 2

分类专栏：模板 #Echarts 前端

本文链接：https://blog.csdn.net/bellediao/article/details/107921495

版权

前端同时被 3 个专栏收录

257 篇文章 1 订阅

订阅专栏

模板

18 篇文章 1 订阅

订阅专栏

#Echarts

14 篇文章 0 订阅

订阅专栏

想实现饼图显示数据和百分比、网上的资源，，额，，反正我是找了好久，或许他们的也是对的。但是没解释，谁能看懂。

找了好久尝试了多次，知道了怎么做了。其实道理很简单，只是他们没有说出来。

itemStyle: {
    normal: {
    label: {
        show: true,
        // formatter: '{ b }: { c }({ d } % )'
        formatter: '{b}: {c}   {d}%'
        },
        labelLine: { show: true }
    }
 }

知识点：

模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。

formatter: '{c}' //百分比显示，

如果是 { d }-- 数据会根据value值计算百分比

。别人的例子：

itemStyle: {
	normal: {
	    label: { //此处为指示线文字
	    show: true,
	    position: 'inner', //标签的位置
	    textStyle: {
	    	fontWeight: 200,
	        fontSize: 10 //文字的字体大小
	        },
	    formatter: function(p) { //指示线对应文字
	    	var data = p.data;
	        return data;
	        }
	    },
	    labelLine: { //指示线状态
	    	show: true,
	        smooth: 0.2,
	        length: 10,
	        length2: 20
	    }
	}
},

别人的例子：

只有数据，，没有文字，需要加文字，可以和上面这个人的二合一吧。

itemStyle: {
	normal: {
		label: {
			show: true,
			position: 'inside', //数据在中间显示
			formatter: '{c}' //百分比显示，模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数    
				// 据名， 数据值， 百分比。 { d }
				// 数据会根据value值计算百分比
		},
	}
}