欢迎使用Markdown编辑器

中间显示统计数据，效果图如下

代码

var dataValue = [[{ name: '正常', value: 10098},{ name: '外勤', value: 1231 },{ name: '迟到', value: 991 },{ name: '早退', value: 811 },{ name: '未打卡', value:897 }]];var avnd = 0;
var option = {legend: {bottom: '1%',left: 'center'},graphic: {type: 'text',left: 'center',top: 'center',style: {text:'总人数' +'\n\n' +String(dataValue.map((item) => {item.forEach((e) => {avnd += e.value;});avnd = avnd.toFixed();return avnd;})),textAlign: 'center',fill: '#333',width: 50,height: 20,fontSize: 14}},series: dataValue.map(function (data, idx) {return {type: 'pie',radius: ['50%', '70%'],//top: '32%',//height: '33.33%',left: 'center',// width: 400,itemStyle: {borderColor: '#fff',borderWidth: 1},color: ['#5daf34', '#e6a23c', '#f38989', '#fb5e22', '#409eff'],label: {alignTo: 'edge',formatter: '{name|{b}}\n{time|{c} 人}',minMargin: 10,edgeDistance: 5,lineHeight: 20,rich: {time: {fontSize: 12,color: '#999'}}},labelLine: {length: 15,length2: 0,maxSurfaceAngle: 80},labelLayout: function (params) {const isLeft = params.labelRect.x < myChart.getWidth() / 10;const points = params.labelLinePoints;// Update the end point.points[2][0] = isLeft? params.labelRect.x: params.labelRect.x + params.labelRect.width;return {labelLinePoints: points};},data: data};})
};myChart.setOption(option);

中间显示总数的饼图，相关推荐

echarts饼图pie中间显示总数
echarts饼图pie中间显示总数有这样一种需求,饼图中间显示总数,当鼠标悬浮指定区域时显示对应区域数值网上搜了好多都是通过zlevel来实现的这种效果,但是如果echarts的背景如果不是纯色 ...
堆积柱形图显示总数_送你一份堆积柱形图小点心，请收下~
今日份小技巧小悦今天要给大家分享一个很简单,又常常用到还特别实用的小功能,那就是我们如何快速在堆积柱形图中将总值显示到堆积图上面?接下来我们在这篇文章中,跟你分享一种使用组合图表的快速简便方法,来实 ...
echarts饼状曲线图，中间显示总数
记录一下吧今天在工商银行理财app也看到了这个饼,觉得应用场景还挺多的.记是记不住的,那就写下来吧!需要实现的效果如下: 我直接在echarts官网改的.下面贴代码: import * as ech ...
echarts饼图, 中间显示总数
echarts属性真的太太多了需求也是五花八门的先记下来使用graphic属性 const datas = [{ value: 1048, name: 'Search Engine' },{ v ...
echarts饼图默认中间显示总数
this.echarts1.setOption({title: {text: ['Search Engine',' 1048'].join('\n'), // join('\n')作用是换行居中lef ...
chart.js 饼图显示百分比_Echarts饼图展示车站客流占比图
安装官方教程,今天我们试一下Echarts绘制饼图第一步:准备基础数据用随机数模拟下5个车站的进出站总人数,具体如下表: 车站进出站总人数第二步:绘制基础饼图按教程示例,用Echarts绘制基 ...
【matplotlib】饼图+legend()、loc、color位置颜色图例中文显示（一个饼图的例子）
博客已经搬家到"捕获完成": https://www.v2python.com 1.原来自己做的饼图:http://mp.blog.csdn.net/postedit/792221 ...
堆积柱形图显示总数_在Excel堆积柱形图中显示合计值
在Excel中,用堆积柱形图可以比较相交于类别轴上的每一数值占总数值的大小.对于普通的簇状柱形图,我们可以在每个柱形系列的顶端放置一个数据标志,如数值,来反映各系列数据的大小.对于堆积柱形图,Exce ...
echarts堆叠图显示总数 tooltips处理
思路:计算总数data 隐藏渲染: 外部tooltip 加 series 内tooltip (可控隐藏) const SystemUserSpread: React.FC<Interface&g ...

中间显示总数的饼图，

这里写自定义目录标题

欢迎使用Markdown编辑器

代码

中间显示总数的饼图，相关推荐

最新文章

热门文章