echars饼状环形图中间文字显示三种方法_echart 环形图中间文字

1、使用graphic定位到环形饼图中心

// A code block
var const count = 100
graphic: [{
             type: 'text',
             left:'center',
             top: '40%',
             z: 10,
             style: {
                 fill: '#1a1a1a',
                 text:[
                     count,
                     '总户数'
                 ].join('\n\n'),//实现两文本上下换行的效果
                 textAlign:'center',
                 font: '14px Microsoft YaHei'
             }
          }],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2、使用title定位到环形饼图中心

// A code block
title: {
          show: true,
           text: "xxxxxxx",//要显示的文本
           left: "20px",
           top: "16px",
           textStyle: {
               color: "#161616",
               fontWeight: "bold",
               fontSize: "16",
           },
       },
1
2
3
4
5
6
7
8
9
10
11
12

备注：如果要实现饼图中间两段文本上下换行，且有各自的样式，可以title、graphic一起使用

3、通过series里面的label属性

这里面的formatter不支持使用HTML容器类的标签写法，只能用富文本的形式实现。

// 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',
                 }
             }
         },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

注意：使用label的时候，不要设置emphasis。用label实现此功能，当鼠标悬浮在文本上时，会显示tooltip内容