zoukankan      html  css  js  c++  java
  • 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}
    {c}'
                    }
                  }
                },
                data: data
              }
            ]
          })
      
    

      

  • 相关阅读:
    Thymeleaf学习记录(1)--启动模板及建立Demo
    Redis教程基本命令
    错误:Attempted to load applicationConfig: [classpath:/application.yml] but snakeyaml was not found on the classpath
    备注
    MYSQL建表问题(转)
    Class.forName("com.mysql.jdbc.Driver")找不到类
    mySql连接报错
    电脑启动过程
    C++输入输出流--<iostream>详解
    类内部实例化自身可行吗?
  • 原文地址:https://www.cnblogs.com/moguzi12345/p/13559586.html
Copyright © 2011-2022 走看看