具有 JSON 数据绑定的 Echarts

Question

我有 json 编码数据集如下（我使用 php 从 mYSQL 获取记录并转换为 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(baidu)绑定上面的数据集，下面是我的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 输出时，它不会弹出图表，请帮我排序

Answer 1

xAxis.data应该是数组，series.data也是数组。
你应该首先格式化你的数据，然后将它作为参数传递给myChart.setOption。
把echarts.init和setOption放在一个函数里会更好
this is the example

具有 JSON 数据绑定的 Echarts

Echarts with JSON databinding

json

echarts