epmet-oper-gov/src/views/modules/visual/basicinfo/houseStatic/userOptions.js

export function userPieOption (_charts) {
  const center= ['50%', '150px']
    return {
      title: {
        text: '0',
        top: 120,
        left: 'center',
        textStyle: {
          width: '100%',
          fontSize: 30,
          color: '#FFFFFF',
          fontWeight: 400
        },
        itemGap: 5,
        subtext: '房屋总数',
        subtextStyle: {
          fontSize: 20,
          color: '#fff',
          fontWeight: 400
        }
      },
      tooltip: {
        show: false
      },
      // legend: {
      //   orient: 'vertical',
      //   right: 0,
      //   top: 200,
      //   bottom: 20,
      //   itemWidth: 20,
      //   itemHeight: 10,
      //   textStyle: {
      //     color: '#D2E7FF',
      //     fontSize: 16,
      //     lineHeight: 20,
      //   },
      
      // },
      series: [
        // 外侧圆环
        {
          type: 'pie',
          // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
          startAngle: 0,
          hoverAnimation: false,
          // tooltip: {
          // },
          center: center,
          radius: ['61%', '61.3%'],
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          data: [{
            value: 360,
            itemStyle: {
              color: 'rgba(40, 101, 250, 0)',
              width:0,
              borderColor: 'rgba(40, 101, 250, 0.5)',
              borderWidth: 1,
              borderType: 'dotted'
            }
          }
          ]
        },
  
        // 突出的
        {
          hoverAnimation: false,
          // name: 'Access From',
          type: 'pie',
          center: center,
          radius: ['40%', '54%'],
          avoidLabelOverlap: false,
          // top: top + '%',
          // height: '80%',
          selectedMode: 'single',
          left: 'center',
          width: 480,
          label: {
            // show: false,
            position: 'outside',
            alignTo: 'edge',
            // formatter: '{a|{c}}\n\n{name|{b}}',
            formatter: '{name|{b}}\n{r|}\n{a|{c}%}',
            minMargin: 5,
            edgeDistance: 1,
            lineHeight: 15,
            color: '#fff',
            fontSize: 10,
            // distanceToLabelLine: -60,
            rich: {
              name: {
                padding: [0, 6, 0, 6]
              },
              a: {
                fontSize: 20,
                color: '#fff',
                padding: [16, 0, 6, 6]
              },
              r: {
                backgroundColor: 'auto',
                borderRadius: 6,
                width: 6,
                height: 6,
                // padding: [3, 3, 0, -12]
              }
            }
          },
          labelLine: {
            show: false,
            smooth: 0.2,
            length: 50,
            length2: 0,
            maxSurfaceAngle: 80
          },
          labelLayout: function (params) {
            
            const isLeft = params.labelRect.x < _charts.getWidth() / 2;
            const points = params.labelLinePoints;
            // Update the end point.
            if (points) {
              points[2][0] = isLeft
              ? params.labelRect.x
              : params.labelRect.x + params.labelRect.width;
            }
            
            return {
              labelLinePoints: points
            };
          },
          itemStyle: {
            // color:function(params) {
            // //自定义颜色
            // var colorList = [          
            //       '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
            //   ];
            //   return colorList[params.dataIndex]
            // }
          },
          data: [],
  
        },
           // 中间圆环
           {
            type: 'pie',
            // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
            startAngle: 0,
            hoverAnimation: false,
            center: center,
            // tooltip: {
            // },
            radius: ['0%', '27%'],
            label: {
            
                show: false
             
            },
            labelLine: {
             
                show: false
            
            },
            data: [{
              value: 360,
              itemStyle: {
                normal: {
                  color: 'rgba(8, 37, 134, 1)',
              
                }
              }
            }
            ]
          },
      ]
  
    }
  }