echarts通過變量指派資料無法顯示問題結局

問題描述

        通過ajax進行背景接口請求，，并将傳回後的資料進行整理，并指派給變量，用于圖形展示，但嘗試過程中發現，echarts圖能夠渲染出來，但是圖上無資料，嘗試将資料值賦成固定值時，圖中能夠正常顯示資料。

問題原因

解決方法

代碼示例

調整前

radiusdata = []
      seriesdata = []
      $.ajax({
        type: "POST",
        headers: {
          token: 'adasdasdasd'
        },
        data: {APPID: appId,},
        url: config.base_server + "/serviceResourceMonitoring/getDatabaseMonitoringVal",
        dataType: "json",
        success: function(res){
          if (res.code == 'idt-core-200') {
            radiusdata = []
            seriesdata = []
            data = res.data
            for (var i=0;i<data.length;i++){
              radiusdata.push(data[i]['param'])
              seriesdata.push(Number(data[i]['val']))
            }

          }
        }
      });


      // var myChart5 = echarts.init(document.getElementById('line5'));
      var dom = document.getElementById('line5');
      var myChart5 = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      
      var option = {
        title: [
          {
            text: '表空間使用情況',
            x: 'center'
          }
        ],
        polar: {
          radius: [30, '80%']
        },
        angleAxis: {
          max: 100,
          startAngle: 75
        },
        radiusAxis: {
          type: 'category',
          data:radiusdata 
        },
        tooltip: {},
        series: {
          type: 'bar',
          data: seriesdata ,
          coordinateSystem: 'polar',
          label: {
            show: true,
            position: 'middle',
            formatter: '{b}: {c}'
          }
        }
      };      

調整後

radiusdata = []
      seriesdata = []
      $.ajax({
        type: "POST",
        headers: {
          token: 'adasdasdasd'
        },
        data: {APPID: appId,},
        url: config.base_server + "/serviceResourceMonitoring/getDatabaseMonitoringVal",
        dataType: "json",
        success: function(res){
          if (res.code == 'idt-core-200') {
            radiusdata = []
            seriesdata = []
            data = res.data
            for (var i=0;i<data.length;i++){
              radiusdata.push(data[i]['param'])
              seriesdata.push(Number(data[i]['val']))
            }
            // var myChart5 = echarts.init(document.getElementById('line5'));
            var dom = document.getElementById('line5');
            var myChart5 = echarts.init(dom, null, {
              renderer: 'canvas',
              useDirtyRect: false
            });
  
            var option = {
              title: [
                {
                  text: '表空間使用情況',
                  x: 'center'
                }
              ],
              polar: {
                radius: [30, '80%']
              },
              angleAxis: {
                max: 100,
                startAngle: 75
              },
              radiusAxis: {
                type: 'category',
                data: ["JZSOA_AUDIT", "JZSXXZX", "USERS", "IDT_MIDDLE85247", "JZSZX", "JZSOA", "JZSCOMMON" ]
              },
              tooltip: {},
              series: {
                type: 'bar',
                data: [0.32, 0.19, 0.32, 0.01, 0.12, 0.46, 0.12 ],
                coordinateSystem: 'polar',
                label: {
                  show: true,
                  position: 'middle',
                  formatter: '{b}: {c}'
                }
              }
            };

            myChart5.setOption(option);
          }
        }
      });