使用JSON数据绑定Echarts

我有如下设置JSON编码数据（我使用PHP从MySQL得到记录，并转换成JSON）使用JSON数据绑定Echarts

[{"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（百度），设置请在下面找到

<!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>

在我的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

使用JSON数据绑定Echarts

回答

相关问题