百度图表ECharts+php使用方法

今天周六, 同事都已回去. 因没用过echarts, 费了些时间研究.  难点在于我不知如何动态赋值.  研究了好多, 最后发现方法非常简单, 
有两点要注意: 
第一, 后端返回的数据必须是非键值对的一维数组:Array(

　　[0]=>jack
　　[1]=>mary
　　[2]=>lili
) 
第二, 必须转成json格式数据,再传到前端. 
 
 从SQL库里查出来的多行多列二维数组格式的数据,转换成非键值对的一维数组形式: $GoodsNums = array_column($data, 'GoodsNums'); 第一个参数$data是二维数组,第二个参数GoodsNums是字段名. 转成json: json_encode($GoodsNums); 


以下是我写的完整代码,

后端: 

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px;width: 100%;"></div>
<!-- ECharts单文件引入 -->
<script type="text/javascript" src="__PUBLIC__/Static/ECharts/echarts.js"></script>
<script type="text/javascript" src='/public/static/jquery-1.11.2.min.js'></script>
<script type="text/javascript">
    var myChart;
    // 路径配置
    require.config({
        paths: {
            echarts: '/public/Static/ECharts'
        }
    });
    // 使用
    require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                myChart = ec.init(document.getElementById('main'));


                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : {$GoodsName}//后端传过来的一维数组品名,有转成json格式.
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",
                            "data":{$GoodsNums}//后端传过来的一维数组数量,有转成json格式.
                        }
                    ]
                };
                // 为echarts对象加载数据
                myChart.setOption(option);


            }
    );
</script>