echarts环图中心多行文字不同样式常用处理方法

248 阅读1分钟

1、顶部使用graphic,浏览器缩放时文字相对位置不好处理

graphic: [{ //环形图中间添加文字
    type: 'text', //通过不同top值可以设置上下显示
    left: 'center',
    top: '46%',
    style: {
        text: '总数',
        textAlign: 'center',
        fill: '#ddd', //文字的颜色
        fontSize: 12,
        lineHeight: 16,
    }
},{ //环形图中间添加文字
    type: 'text', //通过不同top值可以设置上下显示
    left: 'center',
    top: '50%',
    style: {
        text: '123个',
        textAlign: 'center',
        fill: '#1E7CE8', //文字的颜色
        fontSize: 12,
        lineHeight: 16,
    }
}],

2、series中使用label(不好,会占用各项的lable)

label: {
    position: 'center',
    show: true,
    formatter: ['{a|总数}', '{b|20}'].join('\n'),
    color: '#000',
    lineHeight: 16,
    fontSize: 12,
    rich: {
      a: {
        color: '#ddd'
      },
      b: {
        color: '#000'
      }
    }

3、顶层使用title,占用title,如果需要title需要另外设置

title: {
    text: '总数',
    show: true,
     subtext: '20',
     top: 'center',
     left: 'center',
     textStyle: {
      color: '#ddd',
      fontSize: 14,
      lineHeight: 14
    },
    subtextStyle: {
      color: '#000',
      fontSize: 12
    }
  },