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
              }
            ]
          })
      
    

      

  • 相关阅读:
    linux下,webpack热重载无效的解决方法
    前端异步编程之Promise和async的用法
    防呆设计(内容摘录)
    GUI 图形用户界面 [学习笔记]
    15条JavaScript最佳实践【转】
    2013-11-02 【webrebuild广州站】分享会纪要
    关于自控力
    记录一次抖音小程序严重bug(组件样式继承问题)
    微信 头条小程序 记录一次电商项目倒计时活动优化
    微信/头条小程序如何确保异步请求执行完后再执行各页面的onLoad方法
  • 原文地址:https://www.cnblogs.com/moguzi12345/p/13559586.html
Copyright © 2011-2022 走看看