0

i have json encoded data set as below ( i use php for get record from mYSQL and convert to 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}]

i want to bind above data set with Echarts (baidu) , please find the my html code below

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

when i run this i only show the json output , it wont popup the chart , please be kind enough to help me to sort this

Kavinda
  • 177
  • 2
  • 12

1 Answers1

2

  1. xAxis.data should be an array, series.data is array too.

  2. you should formate your data at first then pass it to myChart.setOption as parameter.

  3. put echarts.init and setOption in a function will be better

  4. this is the example

cakan
  • 2,099
  • 5
  • 32
  • 42
Mr YI
  • 36
  • 2