Essentially series’s construction like

series = [{
           data: [...dataInput.FutureTradingRate.map((item) => {
             return {
               x: item.Name,
               y: item.Value,
               fillColor: item.Rate > 0 ? '#CD363A' : '#52B12C',
               rate: item.Rate
             }
           })]
         }]

and plotOptions

plotOptions: {
    treemap: {
      enableShades: true,
      shadeIntensity: 0.5,
      colorScale: {
        ranges: [
          {
            from: -0.1,
            to: 1,
            color: '#52B12C'

          },
          {
            from: 0.001,
            to: 0.1,
            color: '#CD363A'
          }
        ]
      }
    },
  },

and colorScale will use y’s value to show shades, then how could I show shades by using ‘rate’ ?

Show shades by using custom data (in this case is ‘rate’) not y.