中间显示总数的饼图，

最新推荐文章于 2025-01-09 14:15:29 发布

原创最新推荐文章于 2025-01-09 14:15:29 发布 · 999 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

HTML 同时被 3 个专栏收录

32 篇文章

订阅专栏

javascript

9 篇文章

订阅专栏

echart

1 篇文章

订阅专栏

这篇博客介绍了如何在Markdown编辑器中使用代码绘制饼图，展示了不同状态（正常、外勤、迟到、早退、未打卡）的员工人数统计，并通过饼图的样式配置进行详细的数据可视化呈现。

这里写自定义目录标题

欢迎使用Markdown编辑器
- 代码

欢迎使用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);