方式一:title

通过在最外层设置title 配置项

title 同时也是环形图标题的配置项,只是通过left和top强制让其移动到环形图中间位置;提前设置好环形图

title: {
  // 图形标题(如果想要换行则使用ES6 `` 模板字符串)
  // 例如: `示例
  //   这里的文字会变为第二行(因为会保留格式)
  text: '文字',  
  left: "center",//对齐方式居中
  top: "45%",//距离顶部
  textStyle: {//文字配置
    color: "rgb(50,197,233)",//文字颜色
    fontSize: 15,//字号
    align: "center"//对齐方式
  }
}

方式二:graphic

graphic 属性是 ECharts 中一个非常强大的配置项,它允许你在图表中添加各种自定义的图形元素,比如文本、图形、图片等。通过 graphic 属性,可以在 ECharts 图表中实现更多的个性化定制和交互效果。可配置一个或多个;

如果环形图位置上下左右都是默认值:也就是都居中;那么,使用该定位其位置也设置为center,中心文字和环形图都居中,效果很好

//  部分代码
graphic: [
          {
            //环形图中间添加文字
            type: "text", //通过不同top值可以设置上下显示
            left: "center",
            top: "center",
            style: {
              text: `总数 ${this.ring6}`,
              textAlign: "center",
              fill: "#1E7CE8", //文字的颜色
              fontSize: 20,
              lineHeight: 20,
            },
          },
        ],
        // 数据
        series: [
          {
            type: "pie",
            // 饼图的半径,单个值指的就是一个饼图的半径,而数组则指的是多个图的半径
            radius: ["40%", "60%"],
            // 图形的中心坐标,第一个是横坐标,第二个是纵坐标,默认值都是50,50
            center: ["50%", "50%"],
          },
        ],

效果图:

image-20231121102822080

但是,如果环形图位置不是居中的,也就是相比于默认值而言发生了偏移,那么,graphic中也需要手动的进行配置才行;因为写死了偏移量,所以会存在中心文字长度发生变化后就对不齐环形图的情况,一旦出现对不齐,就需要手动修改graphic的位置偏移量;就很麻烦

中心文字长度发生变化;例如举例中的:总数 ${this.ring6};如果this.ring6最开始的值是8,那么把 总数 8 对齐了,如果几天后用户量激增,当日新增用户总数达到 888 ,那么,此时的 总数 888 很大概率就不在环形图中间了吧,那么,这时候就需要去手动修改graphic 的偏移量了。[手动狗头]

因此如果使用这种方式的话,最好环形图和graphic 的位置都使用默认值,就不会出现刚刚所述的问题。无论中心文字如何变,至少都会默认在环形图中居中显示

//  部分代码------  一旦不居中,就需要修改代码,嗯,烦得要命;
graphic: [
          {
            //环形图中间添加文字
            type: "text", //通过不同top值可以设置上下显示
            left: "47%",
            top: "51%",
            style: {
              text: `总数 ${this.ring6}`,
              textAlign: "center",
              fill: "#1E7CE8", //文字的颜色
              fontSize: 20,
              lineHeight: 20,
            },
          },
        ],
        // 数据
        series: [
          {
            type: "pie",
            // 饼图的半径,单个值指的就是一个饼图的半径,而数组则指的是多个图的半径
            radius: ["40%", "60%"],
            // 图形的中心坐标,第一个是横坐标,第二个是纵坐标,默认值都是50,50
            center: ["56%", "52%"],
          },
        ],

方式三:label

通过series里面的label属性

// A code block
 label: {
             position: 'center',
             show: true,
             formatter:function(){
                 let str = '{a|'+ count+'}' + '\n\n' +'{b|总数}'
                 return str
             },
             rich:{
                 a:{
                     color:'#333333',//a、b不设置颜色的话,字体颜色就会是饼图颜色的混合色
                     fontSize:'16',
                 },
                 b:{
                     fontSize:'14',
                     color:'#333333',
                 }
             }
         },

通过这种方式确实可以达到效果,但是,label的主要目的是用来配置环形图提示信息的,而不是用来配置环形图中心文字的,而且如果使用这种方式,那么,环形图中心文字和环形图各部分的提示信息是不能同时存在的,如果强行把label写成数组形式,把提示信息加上去,那么,提示信息就会和中心文字一起在环形图中心层叠显示

如果对提示信息没有显示需求,这也不失为一个方法

image-20231121104638154
终上所述,目前为止最理想方式就是使用默认位置的方式二;也许是我对其他两种方式理解不深入,但现在看来其余两种方式相当于是强行赶鸭子上架,不是正规解法

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐