做了echarts大屏，遇到的问题

1 地图渲染

根据颜色来展示地图颜色的深浅

function getRegionsData(lineData) {

    var colors = generateColorTransitions('0076ff', '2356D1', lineData.length)
    let res = [];
    lineData.sort(function(a, b) {
        return a.value[2] - b.value[2];
      })

      console.log('getRegionsData', lineData)
      console.log('colors: ', colors)

    for (let i = 0; i < lineData.length; i++) {

        var cueColor = '#1E59AA'
        var borderColor = '#6CEFF5'

        res.push({
            name: lineData[i].fromName,
            itemStyle: {
              borderColor: borderColor,
              areaColor: colors[i] 
            }
          })
          
      }

      
    return res;
}

/**
 * 
 * @param 最浅的16进制颜色 startColor 
 * @param 最深的16进制颜色 endColor 
 * @param 生成的过度颜色数量 numTransitions 
 * @returns 
 */
function generateColorTransitions(startColor, endColor, numTransitions) {
    // 将起始颜色和目标颜色转换为RGB值
    var startRGB = hexToRGB(startColor);
    var endRGB = hexToRGB(endColor);
  
    // 计算RGB通道的差值
    var diffR = endRGB.r - startRGB.r;
    var diffG = endRGB.g - startRGB.g;
    var diffB = endRGB.b - startRGB.b;
  
    // 计算每个通道的增量
    var incrementR = diffR / numTransitions;
    var incrementG = diffG / numTransitions;
    var incrementB = diffB / numTransitions;
  
    // 生成过渡色数组
    var transitionColors = [];
  
    // 生成过渡色
    for (var i = 0; i <= numTransitions; i++) {
      // 计算每个通道的值
      var r = Math.round(startRGB.r + (incrementR * i));
      var g = Math.round(startRGB.g + (incrementG * i));
      var b = Math.round(startRGB.b + (incrementB * i));
  
      // 将RGB值转换为十六进制表示
      var hexColor = rgbToHex(r, g, b);
  
      // 添加到过渡色数组
      transitionColors.push(`#${hexColor}`);
    }
  
    return transitionColors;
  }
  // 辅助函数：将十六进制颜色转换为RGB值
function hexToRGB(hex) {
    var r = parseInt(hex.substr(0, 2), 16);
    var g = parseInt(hex.substr(2, 2), 16);
    var b = parseInt(hex.substr(4, 2), 16);
    return { r: r, g: g, b: b };
  }
  
  // 辅助函数：将RGB值转换为十六进制颜色
  function rgbToHex(r, g, b) {
    var hexR = r.toString(16).padStart(2, '0');
    var hexG = g.toString(16).padStart(2, '0');
    var hexB = b.toString(16).padStart(2, '0');
    return hexR + hexG + hexB;
  }

地图颜色改变问题：其他的改动

const regionsData = getRegionsData(lineData)


 ...regionsData,
 
 
 //另外其他的展改变 数据对应不上，改一下
   当阳市:[111.78854,30.82118],
    当阳:[111.78854,30.82118],
    枝江市:[111.76044,30.42583],
    枝江:[111.76044,30.42583],
    秭归县:[110.97803,30.82306],
    秭归:[110.97803,30.82306],
//这里改一下
  let list = [], posistion = geoCoordMap[e.name.replaceAll('市', '').replaceAll('省', '')];
  let list = [], posistion = geoCoordMap[currentMapType == 'china' ? 
e.name.replaceAll('市', '').replaceAll('省', '') : e.name];


    fromName: e.formName,
    toName: e.name,
    改一下
     fromName: currentMapType == 'china' ? e.formName.replaceAll('市', '').replaceAll('省', ''):e.formName,
      toName: currentMapType == 'china' ? e.name.replaceAll('市', '').replaceAll('省', ''):e.name,
      //对 `e.formName` 进行替换操作，使用 `replaceAll` 方法将字符串中的 
       `'市'` 和 `'省'` 替换为空字符串，即去除 `'市'` 和 `'省'` 字符。
       
   const currentData = lineData.filter(v => v.toName == params.name)
   改成：const currentData = lineData.filter(v => currentMapType == 'china' ? v.toName.replaceAll('省', '').replaceAll('市', '') 
    == params.name : v.toName == params.name)
 

2 倒序

 list.push({
            realtimeSort: true, //这个加了
            name: '总数',
            type: 'bar',
            barGap: '-100%',
@ -3672,6 +3673,7 @@ function renderRowBarChart(eleId, data, type, barColor) {
            splitLine: {
                show: false
            },
            inverse: true,  //这个改了
            axisLabel: {
              fontSize: fsize(9) // 调整横轴标签的字体大小
          },

这个倒序实现了，但是一样的图标倒序就是很麻烦，给别人改的超级大。然后我就是把这个用另外一个echarts做了，然后其他的用之前的。相当于换了一个函数

3 居中调整

.table-row>div:nth-child(3) {
    background-color: red;
    padding: 0rem .25rem;
  background-color: red;
  padding: 0rem .25rem;
  justify-content: center;
  align-items: center;
}
//对于第三个数据进行居中，然后写一个方法，感觉还是可以的。
之后改动flex:1

4 刷新无闪动

第一次打开这么多页面去解决一个问题，哈哈哈

var productMap = {};

async function requestAPI() {
  try {
    showLoading();

    const [
      left1Data,
      left2Data,
      gridData,
      gridDatabaseData,
      rainData,
      rainDatabaseData,
      bottomData,
      centerData,
      titleData,
    ] = await Promise.all([
      fetchJson('./rainData/left1.json'),
      fetchJson('./rainData/left2.json'),
      fetchJson('./rainData/right1.json'),
      fetchJson('./rainData/right2.json'),
      fetchJson('./rainData/right3.json'),
      fetchJson('./rainData/right4.json'),
      fetchJson('./rainData/bottom.json'),
      fetchJson('./rainData/center.json'),
      fetchJson('./rainData/title.json'),
    ]);

    const data = {
      left1: left1Data.data,
      left2: left2Data.data,
      grid: gridData.data,
      gridData: gridDatabaseData.data,
      rain: rainData.data,
      rainData: rainDatabaseData.data,
      node: bottomData.data,
      center: centerData.data,
      title: titleData.data,
    };

    initChart(data);

    hideLoading();
    updateData();
  } catch (error) {
    handleFetchError(error);
  }
}

function showLoading() {
  document.querySelector('.home-loading').style.display = 'flex';
  document.querySelector('.home-loading').style.opacity = 0;
}

function hideLoading() {
  document.querySelector('.home-loading').style.opacity = 0;
  document.querySelector('.home-loading').style.display = 'none';
  document.querySelector('.main').style.opacity = 1;
}

function handleFetchError(error) {
  // Handle AJAX failure here
  initChart({
    center: [
      {
        stdt: "",
        model: "短期",
        rate: "0",
        stepVOS: null,
        snp: null,
        obs: null,
      },
      // Add other default data as needed
    ],
  });

  hideLoading();
  updateData();
}

async function fetchJson(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`Failed to fetch: ${url}`);
  }
  return response.json();
}

// The rest of your code remains unchanged...
$(document).ready(function () {
  requestAPI();
  setInterval(requestAPI, 1000 * 3);
  // Other event listeners and functions...
});

function initChart(data) {
    $('.header-title').html(`${data.title.time} <span style="background:rgba(51,51,53,0.39);width: 1px;height:0.18rem;margin:0 0.16rem;display: inline-block;"></span><span>值班人：${data.title.person}</span>`)
    renderBarChart('source-bar-1', convertBarData(data.left1))
    renderBarChart('source-bar-2', convertBarData(data.left2))
    productMap = {
        grid: {
            elId: '#grid-product',
            data: convertgridData(data.grid)
        },
        gridDatabase: {
            elId: '#grid-product-database',
            database: true,
            data: convertRainBaseData(data.gridData)
        },
        rain: {
            elId: '#rain-product',
            data: convertRainData(data.rain)
        },
        rainDatabase: {
            elId: '#rain-product-database',
            database: true,
            data: convertRainBaseData(data.rainData)
        }
    }
    // renderBarChart('source-bar-3', convertBarData(data))
    renderRightNode('grid');
    renderRightNode('gridDatabase');
    renderRightNode('rain');
    renderRightNode('rainDatabase');
    let mGpu = 0
    let mCpu = 0
    let amem = 0
    let Gpu = 0
    let Cpu = 0
    let mem = 0
    data.node.map(item => {
        mGpu += item.nativeResources.mGpu
        mCpu += item.nativeResources.mCpu
        amem += item.nativeResources.mem
        Gpu += item.nativeResources.loadResources.gpuFree
        Cpu += item.nativeResources.loadResources.cpuFree
        mem += item.nativeResources.loadResources.memFree
        if (item.status == 'OKAY') {
            item.nodeStatus = 'success'
        } else if (item.status == 'SUSPENDED' || item.status == 'SSUSPENDED') {
            item.nodeStatus = 'sleep'
        } else if (item.status == 'UNHEALTHY' || item.status == 'UNAVAILABLE' || item.status == 'REMOVING') {
            item.nodeStatus = 'exceptional'
        } else if (item.status == 'RECOVERING_CREATED' || item.status == 'REGISTERING') {
            item.nodeStatus = 'restart'
        } else if (item.status == 'CLOSED') {
            item.nodeStatus = 'close'
        }
        if (item.sdrs && item.sdrs.length > 0) {
            item.netStatus = 'success'
        } else {
            item.netStatus = 'exceptional'
        }
    })

没有解决，就是把虚拟度调了