中间显示总数的饼图,

9 篇文章 0 订阅
1 篇文章 0 订阅

这里写自定义目录标题

欢迎使用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);
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值