Echarts с JSON привязки данных

я есть JSON закодированный набор данных, как показано ниже (я использую PHP для получения записей из MySql и конвертировать в формат JSON)Echarts с JSON привязки данных

[{"CELL_NAME":"WELI01A","CI":1},{"CELL_NAME":"WELI02A","CI":2},{"CELL_NAME":"WELI02P","CI":3},{"CELL_NAME":"WELI02Q","CI":7},{"CELL_NAME":"WELI02B","CI":8},{"CELL_NAME":"COL001A","CI":11},{"CELL_NAME":"COL001B","CI":12},{"CELL_NAME":"COL001C","CI":13},{"CELL_NAME":"COL001P","CI":16},{"CELL_NAME":"COL001Q","CI":17},{"CELL_NAME":"COL001R","CI":18},{"CELL_NAME":"COL002A","CI":21},{"CELL_NAME":"COL002B","CI":22},{"CELL_NAME":"COL002C","CI":23},{"CELL_NAME":"COL002P","CI":26},{"CELL_NAME":"COL002Q","CI":27},{"CELL_NAME":"COL002R","CI":28},{"CELL_NAME":"COL003A","CI":31},{"CELL_NAME":"COL003B","CI":32},{"CELL_NAME":"COL003C","CI":33}]

я хочу связать выше набора данных с Echarts (Бэйду), пожалуйста, найти мой HTML-код

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>READ JSON Example (getJSON)</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

</head> 
<body> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $.getJSON("dataload.php",function(result){ 
     $.each(result, function(i, field){ 
      $("#output").append("CELL NAME: "+ field.CELL_NAME + " CELL ID: "+field.CI +"<br/>"); 
     }); 
    }); 
}); 
</script> 
<div id="output"></div> 

    <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div> 
    <div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div> 
    <script src="js/echarts-all.js"></script> 

    <script type="text/javascript"> 
     var myChart = echarts.init(document.getElementById('main')); 
     myChart.setOption({ 
      tooltip : { 
       trigger: 'axis' 
      }, 
      legend: { 
       data:['Time','value'] 
      }, 
      toolbox: { 
       show : true, 
       feature : { 
        mark : {show: true}, 
        dataView : {show: true, readOnly: false}, 
        magicType : {show: true, type: ['line', 'bar']}, 
        restore : {show: true}, 
        saveAsImage : {show: true} 
       } 
      }, 
      calculable : true, 
      xAxis : [ 
       { 
        type : 'category', 
        data : field.CELL_NAME 
       } 
      ], 
      yAxis : [ 
       { 
        type : 'value', 
        splitArea : {show : true} 
       } 
      ], 
      series : [ 
       { 
        name:'Time', 
        type:'bar', 
        data:field.CI 
       } 
      ] 
     }); 

    </script> 

</body> 
</html>

, когда я запускаю это я только показать выход JSon, это обыкновение всплывать диаграмму, пожалуйста, будьте любезны, чтобы помочь мне разобраться в этом

источник

2016-08-16 Kavinda

xAxis.data должен быть массивом, series.data также является массивом.
вы должны сначала сформировать свои данные, а затем передать его в myChart.setOption в качестве параметра.
положить echarts.init и SetOption в функции будет лучше
this is the example

источник

2016-08-17 13:31:29

Echarts с JSON привязки данных

ответ

Смежные вопросы