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);
    }