because your block of code is not executed!

_PercentPie.prototype.init = function () {
    // this
    var _that = this
    var options = {
      color:_that.color,
      //  false
      silent:true,
      hoverAnimation:false,
      series: [
        {
          type:'pie',
          radius: ['80%', '100%'],
          hoverAnimation:false,
          label: {
            show: true,
            position: 'center',
            animation: false
          },
          data:[
            {value: _that.value,name:_that.ProjectStatus()},
            {value:100,name:''},
          ]
        }
      ]
    }
    // echart
    echarts.init(_that.domEle).setOption(options);
  }

just put it in the immediate execution function

  // echart

  // echarts
  function _PercentPie (options) {
    this.backgroundColor = options.backgroundColor || '-sharpfff'
    this.color = options.color
    this.fontSize = options.fontSize || '14px'
    this.domEle = options.domEle //
    this.value = options.value
    // 
    this.ProjectStatus = function () {
      var _status
      switch (this.value){
        case 0:
          return _status = ''
          break;
        case 100:
          return _status = ''
          break;
        default:
          return _status = `${this.value}%`
      }
    }
  }


  //  
  (function(){
    _PercentPie.prototype.init = function () {
      // this
      var _that = this
      var options = {
        color:_that.color,
        //  false
        silent:true,
        hoverAnimation:false,
        series: [
          {
            type:'pie',
            radius: ['80%', '100%'],
            hoverAnimation:false,
            label: {
              show: true,
              position: 'center',
              animation: false
            },
            data:[
              {value: _that.value,name:_that.ProjectStatus()},
              {value:100,name:''},
            ]
          }
        ]
      }
      // echart
      echarts.init(_that.domEle).setOption(options);
    }
    
    var chart = document.querySelectorAll('.chart');
    var length = chart.length
    // 
    var data = [
      {ringColor: ["-sharp0099FF",'-sharpF0F2F5'],value:40},
      {ringColor: ["-sharp0099FF",'-sharpF0F2F5'],value:50},
      {ringColor: ["-sharpFF0000",'FF0000'],value:0},
      {ringColor: ["-sharp00B200",'-sharp00B200'],value:100}
    ]
    for (let i = 0; i < data.length; iPP) {
      var _percentPie = new _PercentPie({
        color: data[i].ringColor,
        value: data[i].value,
        domEle:chart[i]
      });
      // 
      _percentPie.init();
    }
  }())

this is the pot that declares ascension

_PercentPie.prototype.init = function () {}

this is called an expression and does not raise
. The following is a function declaration that promotes

function _PercentPie (options){}

executing the function IIFE immediately can be seen as declaring an anonymous function.
since you are only ascending within the current scope, you only need to put a layer of {} on the outside of the IIFE

function _PercentPie (options) {
    this.backgroundColor = options.backgroundColor || '-sharpfff'
    this.color = options.color
    this.fontSize = options.fontSize || '14px'
    this.domEle = options.domEle //
    this.value = options.value
    // 
    this.ProjectStatus = function () {
      var _status
      switch (this.value){
        case 0:
        return _status = ''
        break;
        case 100:
        return _status = ''
        break;
        default:
        return _status = `${this.value}%`
      }
    }
  }
  _PercentPie.prototype.init = function () {
    // this
    var _that = this
    var options = {
      color:_that.color,
      //  false
      silent:true,
      hoverAnimation:false,
      series: [
        {
          type:'pie',
          radius: ['80%', '100%'],
          hoverAnimation:false,
          label: {
            show: true,
            position: 'center',
            animation: false
          },
          data:[
            {value: _that.value,name:_that.ProjectStatus()},
            {value:100,name:''},
          ]
        }
      ]
    }
    // echart
    echarts.init(_that.domEle).setOption(options);
  }

{
  //  
  (function(){
    var chart = document.querySelectorAll('.chart');
    var length = chart.length
    // 
    var data = [
      {ringColor: ["-sharp0099FF",'-sharpF0F2F5'],value:40},
      {ringColor: ["-sharp0099FF",'-sharpF0F2F5'],value:50},
      {ringColor: ["-sharpFF0000",'FF0000'],value:0},
      {ringColor: ["-sharp00B200",'-sharp00B200'],value:100}
    ]
    for (let i = 0; i < data.length; iPP) {
      var _percentPie = new _PercentPie({
        color: data[i].ringColor,
        value: data[i].value,
        domEle:chart[i]
      });
      // 
      _percentPie.init();
    }
  }())
}

js is a weakly typed language, and its syntax is very imprecise, just like

var a = 1
a += 1
aPP

will automatically complete the semicolon at the end, here you can think of it as

_PercentPie.prototype.init = function () {

}(function(){})

here you pass your self-tuning function as an argument to the immediately running function, and wait for the result to be returned to _ PercentPie.prototype.init, so when the function is running, _ PercentPie.prototype.init is still undefined

solution:
1: _ PercentPie.prototype.init = function () {} followed by ;
2: (function () {}) change to! function () {} () or other operators, such as +, -, ~,! , etc.