Echart的使用legend遇到的問題小記

Echart的圖標真的很漂亮，使用也相對簡單。但是官網的配置項的例子我不是很能快速的使用，得思考一會。哈哈，可能我比較笨吧。

在作柱狀圖的時候，我是通過Ajax動態獲取的數據，但是圖例legend就是不顯示出來，其實到現在我也還沒弄明白，為啥不顯示。
下面貼一下我百度的可能的方案（這些都沒有解決我的問題）：

• echart.js下的精簡版，不支持圖例；
  ** legend的data數據為對象數組，自行檢查是否符合；

---

下面貼一下我動態數據的實例：

Ajax獲取值：

    $(document).ready(function(){
        var xData = [],yData=[];
        $.ajax({
            type: 'post',
            url: '',
            data:{},
            dataType: 'json',
            success: function(data){
                if(data){
                    $.each(data,function(index,item){
                        xData.push(item.subject);
                        yData.push(item.count);
                    });
                    bindData(xData,yData);
                }
            },
            error: function(){
                alert('Error');
            }
        });
    });
    

數據傳值給data:

        function bindData(xData,yData){
            var chart = document.getElementById('bar');
            var myBarChart = echarts.init(chart);
            var option = {
                title : {
                    text: '培訓主題統計信息',
                    x: 'center',
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                legend:  {
                    show: true,
                    data: (function(){
                        var res = [];
                        var len = xData.length;
                        for(var i=0,size=len;i<size;i++) {
                            res.push({
                                name: xData[i],
                                textStyle:{
                                fontSize: 12,
                                color: '#ccc'
                            }
                        });
                    }
                    return res;

                })()
            },
            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: xData,
                    axisLabel: {
                        interval : 0,
                        rotate: -15
                    },
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name: '培訓主題選擇人數',
                    type:'bar',
                    data: yData,
                    barWidth: '50%',
                    markLine : {
                        data : [
                            {
                                type : 'max',
                                name: '最大值',
                                lineStyle: {
                                    color: '#f00'
                                }
                            }
                        ],
                        label : {
                            position: 'end',
                            formatter: '{b}:{c}'
                        }
                    },
                    itemStyle : {
                        normal: {
                            label: {
                                show: true,
                                textStyle: {
                                    fontWeight: 'bolder',
                                    fontSize: '12',
                                    fontFamily: '微軟雅黑'
                                },
                                position: 'top'
                            },
                            color: function (params) {
                                var colorList = [
                                    '#FFB273', '#1D7373', '#BF7130', '#FF7400',
                                    '#FF7373', '#006363'
                                ];
                                return colorList[params.dataIndex]
                            }
                        }
                    }

                }
            ]
        };
        myBarChart.setOption(option);
    }