Tự động thêm dữ liệu và chuỗi vào Echarts

Question

Tôi đang cố gắng tìm hiểu và sử dụng echarts.

Tôi đã học cách tạo biểu đồ tĩnh bằng cách sử dụng echarts và bây giờ tôi cần thêm dữ liệu và chuỗi vào biểu đồ của mình, động.

Có các phương pháp như addSeries và addData trong API nhưng khi tôi cố gắng sử dụng các phương pháp này, có một số tình huống lạ!

Giả sử rằng tôi có một số kênh radio mà họ có một số chương trình trong một khoảng thời gian. Tôi không biết có bao nhiêu kênh sẽ được kiểm tra, vì vậy tôi phải lấy danh sách kênh từ cơ sở dữ liệu của tôi và sau đó đếm các chương trình trên mỗi kênh. Tôi cố gắng này:

 $.ajax({ 
      type: 'POST', 
      url: "my url", 
      data: event, 
      error: function (jqXHR, textStatus, errorThrown) { 
       alert('ERROR'); 
      }, 
      beforeSend: function (xhr) { 
       $(document).find('.loaderWrapper').find('.loader').html('<img src="<?= base_url() ?>global/templates/default/desktop/assets/images/globe64.gif" width="76"><br /><span class="farsi">wait</span>'); 
      }, 
      success: function (data, textStatus, jqXHR) { 

       //console.log(JSON.parse(data), $.parseJSON(data)); 

       var chartData = eval($.parseJSON(data)); 

       if(data === 'eventError') 
       { 
        $(document).find('.loaderWrapper').find('.loader').html('<span class="alert alert-danger farsi">choose event</span>'); 
        return false; 
       }//if eventError 

       if(data === 'dbError') 
       { 
        $(document).find('.loaderWrapper').find('.loader').html('<span class="alert alert-danger farsi">error</span>'); 
        return false; 
       }//if eventError 

       var channelsArray = []; 

       for(var i=0; i < objSize(chartData.allChannels); i++) 
       { 
        channelsArray.push(chartData.allChannels[i].channel); 
       } 
       console.log(channelsArray); 



    require(
      [ 
       'echarts', 
       'echarts/chart/bar', // require the specific chart type 
       'echarts/chart/line', // require the specific chart type 
      ], 
      function (ec) { 
       // Initialize after dom ready 
       var myChart = ec.init(document.getElementById('programPerChannel')); 

      option = { 
        title : { 
         text: 'test title', 
         x : 'right' 
        }, 
        tooltip : { 
         trigger: 'axis' 
        }, 

        legend: { 
         data: channelsArray 
        }, 

        toolbox: { 
         show : true, 
         x : 'left', 
         feature : { 
          mark : { 
           show: true, 
           title: { 
            mark : 'marker', 
            markUndo : 'undo', 
            markClear : 'clear' 
           }, 
          lineStyle : { 
           width : 3, 
           color : '#1e90ff', 
           type : 'dashed' 
          } 

          }, 
          dataView : {show: false, readOnly: false}, 
          magicType : {show: true, type: ['line', 'bar']}, 
          restore : {show: true}, 
          saveAsImage : {show: true} 
         } 
        }, 
        calculable : true, 
        xAxis : [ 
         { 
          type : 'category', 
          boundaryGap : false, 
          data : channelsArray 

         } 
        ], 
        yAxis : [ 
         { 
          type : 'value' 
         } 
        ] 
       }; 

       // Load data into the ECharts instance 
       myChart.setOption(option); 



       for (var j = 0; j < channelsArray.length; j++) 
       { 
        myChart.setSeries([ 
           { 
            name:channelsArray[j], 
            type:'line', 
            stack: 'area', 
            symbol: 'none', 
            itemStyle: { 
             normal: { 
              areaStyle: { 

               color : (function(){ 
                var zrColor = require('zrender/tool/color'); 
                return zrColor.getLinearGradient(
                 0, 200, 0, 400, 
                 [[0, 'rgba(128,' + 10 * j/2 + ',0,0.8)'],[0.8, 'rgba(128,19,255,0.1)']] 
                ) 
               })() 
              } 
             } 
            }, 

            data:[ 
             [j * 10, j * 11, j *3, j * 7], 
            ] 

           } 

        ]);//set series 

        //adding data inside addSeries will set data to first channel only, code was tested with or without this part 
        myChart.addData([ 
         [1, 10 , j, j*2], 
         [1, 10 , j, j*2], 
         [1, 10 , j, j*2], 
         [1, 10 , j, j*2] 
        ]);//add Data 
       }//for 


      }//functuin(ec) 
    ); 





       $(document).find('.loaderWrapper').find('.loader').html(''); 

      }//success 

     });//Ajax 

Với addSeries phương pháp, dữ liệu sẽ thiết lập để chỉ kênh đầu tiên, và với addData echarts sẽ hiển thị bong bóng chỉ bay !!! :)

Trước tình hình hình ảnh:

Thứ hai:bong bóng !!!

Bạn có vui lòng giúp tôi để tìm hiểu phần nào là vấn đề của tôi?

Cảm ơn trước

Answer 1

Lý do tình hình đầu tiên (kênh chỉ đầu tiên sẽ có dữ liệu) là setSeries phương pháp không được sáp nhập hàng loạt vào danh sách các series, nó là nhận được thay thế. Vì vậy, bạn phải tạo/chuẩn bị một seriesList và sau đó sử dụng phương pháp setSeries như thế này

 var seriesList = []; 
     for (var j = 0; j < channelsArray.length; j++) 
      { 
       seriesList.push(
           { 
           name:channelsArray[j], 
           type:'line', 
           stack: 'area', 
           symbol: 'none', 
           itemStyle: { 
            normal: { 
             areaStyle: { 

              color : (function(){ 
               var zrColor = require('zrender/tool/color'); 
               return zrColor.getLinearGradient(
                0, 200, 0, 400, 
                [[0, 'rgba(128,' + 10 * j/2 + ',0,0.8)'],[0.8, 'rgba(128,19,255,0.1)']] 
               ) 
              })() 
             } 
            } 
           }, 

           data:[ 
            [j * 10, j * 11, j *3, j * 7], 
           ] 

          } 
          );//end-push 
       } //end-for-loop 
     myChart.setSeries(seriesList); 

Nếu bạn muốn một hình ảnh động/di chuyển đồ thị năng động thì demo điều này sẽ giúp.

Thứ hai: Bong bóng !! là hoạt ảnh mặc định là noDataLoadingOption của echart. Điều này có thể xảy ra nếu không có dữ liệu được nạp vào thể hiện echart HOẶC bằng cách bẻ bất kỳ tùy chọn/cấu hình nào được truyền hoặc gán cho cá thể echart.