echarts饼图, 中间显示总数

最新推荐文章于 2025-03-24 18:40:53 发布

嚣张.miner

最新推荐文章于 2025-03-24 18:40:53 发布

阅读量4.4k

点赞数 1

分类专栏： echarts 文章标签： echarts 前端 echarts总数显示 graphic

本文链接：https://blog.youkuaiyun.com/zm_miner/article/details/127656444

版权

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文记录了如何在Echarts饼图中显示总数的实现方法，探讨了Echarts丰富的属性设置及其应对各种需求的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts属性真的太太多了需求也是五花八门的先记下来
在这里插入图片描述使用graphic属性

在这里插入图片描述

const datas = [
  { value: 1048, name: 'Search Engine' },
  { value: 735, name: 'Direct' },
  { value: 580, name: 'Email' },
  { value: 484, name: 'Union Ads' },
  { value: 300, name: 'Video Ads' },
  { value: 30, name: 'Video Ads1' },
  { value: 36, name: 'hhh Ads1' },
  { value: 100, name: 'llll Ads1' }
];
var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
  renderer: 'canvas',
  useDirtyRect: false
});
var app = {};

var option;

option = {
  tooltip: {
    trigger: 'item'
  },

  legend: {
    orient: 'vertical',
    // left: 'right',
    top: '40%',
    right: '5%',
  
     textStyle: {
            align: 'left',
            verticalAlign: 'middle',
            rich: {
                name: {
                    color: 'rgba(0,0,0,0.5)',
                    fontSize: 12,
                },
                value: {
                    color: 'rgba(0,0,0,0.5)',
                    fontSize: 12,
                },
                rate: {
                    color: 'rgba(0,0,0,0.9)',
                    fontSize: 12,
                },
            },
        },
    formatter: (name) => {
        if (datas.length) {
                const item = datas.filter((item) => item.name === name)[0];
                return `{name|${name} | }{rate| ${item.value/ 100}%} {value| ${item.value}} `;
            }
     },
  },
  graphic: {
    type: 'text',
    left: 'center',
    top: 'center',
    style: {
      // text: '总数',
      text:
        '总数' +
        '\n\n' +
        datas.reduce((n, i) => {
          return (n += i.value);
        }, 0),

      textAlign: 'center',
      fill: '#333',
      width: 30,
      height: 30,
      fontSize: 14
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['30%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: {
        // borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: false,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data:datas
    }
  ]
};

if (option && typeof option === 'object') {
  myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);