echarts 饼图中间画圈＋文字

原创已于 2022-04-02 14:46:03 修改 · 4.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #react

于 2022-04-02 14:00:00 首次发布

本文介绍如何在ECharts中创建动态饼图，包含一个居中的圆形元素和自定义的文字展示，位置随图表变化保持稳定。通过两个饼图实例和label配置，实现复杂的数据可视化效果。

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

项目场景：

在饼图中间加入圈和文字，且会随着饼图位置改变，三者位置处于相对静止

效果如下：在这里插入图片描述

代码描述

option = {
    backgroundColor: '#000',
      tooltip: {
        trigger: 'item',
        formatter: '{b} <br/>{c}: ({d}%)',
      },
      color: ['#61a0a8', '#d48265', '#23e5fd'],
      legend: {
        orient: 'vertical',
        top: 'center',
        left: '60%',
        // formatter:'{b}<br/>{c})',
        itemGap: 30,
        textStyle: {
          color: 'white',
          fontSize: '20px',
          // lineHeight: '50px'
        },
        icon: 'circle',
        itemWidth: 8,
      },

      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['60%', '70%'],
          center: ['30%', '50%'],
          avoidLabelOverlap: false,
         
          label: {
            normal: {
                show: true,
                position: 'center',
                color:'#fff',
                // text: '1111'
            formatter: '{total|2000}\n{active|总面积}', 
            rich: { 
                total:{ 
                    fontSize: 35, 
                    // fontFamily : "微软雅黑", 
                    color:'#23e5fd'                     
                },
                active: { 
                // fontFamily : "微软雅黑", 
                    fontSize: 16, color:'#fff', 
                    lineHeight:30,             
                },          
            }             
        },       
      },        
          labelLine: {
            show: false,
          },
          data: [
            { value: 300, name: '公共区面积' },
            { value: 120, name: '未占用面积' },
            { value: 3180, name: '已占用面积' },
          ],
        },
        {
            color: ['#61a0a8'],
           
            type: 'pie',
            // clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ['30%', '50%'],
            radius: ['48%', '50%'],
            label: {
                normal: {
                     show: false
                }
            },
            data: [{
                value: 9,
                name: '',
                itemStyle: {                    
                }
            }]
        },
      ],
    }

解决方案：

圈用一个新的饼图实现
文字：在label中，且可以自定义多种文字属性

补充：：
用的时候label中无法使用nomal
label: {
show: true,
position: ‘center’,
color:’#fff’,
// text: ‘1111’
formatter: ‘{total|2000}\n{active|总面积}’,
rich: {
total:{
fontSize: 35,
// fontFamily : “微软雅黑”,
color:’#23e5fd’
},
active: {
// fontFamily : “微软雅黑”,
fontSize: 16, color:’#fff’,
lineHeight:30,
},
},