echarts 环形图中自定义文字

 

自定义文字:

graphic:{       //图形中间文字
  type:"text",
  left:"center",
  top:"center",
  style:{
    text:"拒付分析",
    textAlign:"center",
    fill:"#010101",
    fontSize: 28
  }
},
var myChart2 = this.$echarts.init(document.getElementById('myChart2'));
      let radius = [100, 120]; //圆环大小
      myChart2.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          textStyle: {
            "fontSize": 12
          }
        },
        graphic:{       //图形中间文字
          type:"text",
          left:"center",
          top:"center",
          style:{
            text:"拒付分析",
            textAlign:"center",
            fill:"#010101",
            fontSize: 28
          }
        },
        calculable: true,
        series: [
          {
            name: '',
            type: 'pie',
            radius: radius,       //圆环大小,配置在头部
            labelLine: {    //图形外文字线
              normal: {
                length: 35,
                length2: 80
              }

            },
            label: {
              normal: {
                formatter: '{b|{b}}   {c|{c}} 笔',       //图形外文字上下显示
                borderWidth: 20,
                borderRadius: 4,
                color: '#000',
                // padding: [0, 80],          //文字和图的边距
                rich: {
                  a: {
                    color: '#000',
                    fontSize: 14,
                    lineHeight: 28
                  },
                  b: {                        //name 文字样式
                    fontSize: 14,
                    lineHeight: 20,
                    color: '#000'
                  },
                  c: {                   //value 文字样式
                    fontSize: 14,
                    lineHeight: 20,
                    align:"center",
                    color: '#000'
                  }
                }
              }
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = [  //自定义颜色
                    '#2566FA','#F71F45','#F99025','#8156FA','#7BCC73',
                    '#259DFA','#EF1EB6','#ef77b0','#F9D425','#D943FF',
                    '#1EB5FA','#EF27C9','#EF37A4','#F9C246','#F02D1D',
                    '#2566FA','#F71F45','#F99025','#8156FA','#7BCC73',
                    '#259DFA','#EF1EB6','#ef77b0','#F9D425','#D943FF',
                    '#1EB5FA','#EF27C9','#EF37A4','#F9C246','#F02D1D',
                    '#2566FA','#F71F45','#F99025','#8156FA','#7BCC73',
                    '#259DFA','#EF1EB6','#ef77b0','#F9D425','#D943FF',
                    '#1EB5FA','#EF27C9','#EF37A4','#F9C246','#F02D1D'
                  ];
                  return colorList[params.dataIndex]
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: '{b}\n{c}'
                }
              }
            },
            data: data
          }
        ]
      })
  

  

posted @ 2020-08-25 14:39  小蘑菇123  阅读(5656)  评论(0编辑  收藏  举报