排名echarts 柱状配置项内容和展示

       var years = ['2016','2017','2018'];
        var jdData =[
            [ '香港同胞','澳门同胞','台湾同胞','日  本','韩  国','蒙  古','印度尼西亚','马来西亚','菲律宾','新加坡','泰  国','印  度','越  南','缅  甸','朝  鲜','巴基斯坦','其  它'],
           [ '香港同胞','澳门同胞','台湾同胞','日  本','韩  国','蒙  古','印度尼西亚','马来西亚','菲律宾','新加坡','泰  国','印  度','越  南','缅  甸','朝  鲜','巴基斯坦','其  它'],
           [ '香港同胞','澳门同胞','台湾同胞','日  本','韩  国','蒙  古','印度尼西亚','马来西亚','菲律宾','新加坡','泰  国','印  度','越  南','缅  甸','朝  鲜','巴基斯坦','其  它']]
        var data =[
            [13.2,1.11,13.6,9284,64138,2237,4779,48877,2371,36224,12956,2499,4778,594,717,534,16487],
            [15.26,1.31,16.68,10331,91580,1909,40469,67490,1765,36982,15371,3643,2871,762,962,757,34414],
            [14.23,1.31,21.13,10873,94964,2966,129748,59827,8519,38344,18495,3531,1369,544,2005,975,33855,],
        ];
       
        option = {
                  
            baseOption: {
                 timeline: {
                data: years,
                axisType: 'category',
                autoPlay: true,
                playInterval: 5000,
                left: '10%',
                right: '10%',
                bottom: '0%',
                width: '80%',
                //  height: null,
                label: {
                    normal: {
                        textStyle: {
                            color: '#ddd'
                        }
                    },
                    emphasis: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                symbolSize: 10,
                lineStyle: {
                    color: '#555'
                },
                checkpointStyle: {
                    borderColor: '#777',
                    borderWidth: 2
                },
                controlStyle: {
                    showNextBtn: true,
                    showPrevBtn: true,
                    normal: {
                        color: '#666',
                        borderColor: '#666'
                    },
                    emphasis: {
                        color: '#aaa',
                        borderColor: '#aaa'
                    }
                },

            },
                title: {
                    text: '',
                    right: '2%',
                    bottom: '8%',
                    textStyle: {
                        fontSize: 50,
                        color: '#666'
                    }
                },
                tooltip: {
                    'trigger': 'axis'
                },
                calculable: true,
                grid: {
                    left: '8%',
                    right: '2%',
                    bottom: '6%',
                    top:'0%',
                    containLabel: true
                },
                label:{
                    normal:{
                        textStyle:{
                            color:'#fff'
                        }
                    }
                },
                yAxis: [{
                      offset: '37',
                    'type': 'category',
                    data: '',
                    nameTextStyle:{
                        color:'#fff'
                    },
                    axisLabel:{
                        //rotate:45,
                        textStyle:{
                            fontSize:12,
                            color:'#333',
                        },
                        interval: 0
                    },
                    axisLine:{

                        lineStyle:{
                            color:'#333'
                        },
                    },
                    splitLine:{
                        show:false,
                        lineStyle:{
                            color:'#333'
                        }
                    },

                }],
                xAxis: [{
                    'type': 'value',
                    'name': '',
                   
                    splitNumber:8,
                    nameTextStyle:{
                        color:'#333'
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#333'
                        }
                    },
                    axisLabel: {
                        formatter: '{value} '
                    },
                    splitLine:{
                        show:true,
                        lineStyle:{
                            color:'#ccc'
                        }
                    },
                }],
                series: [{
                    'name': '',
                    'type': 'bar',
                    markLine : {
                        label:{
                            normal:{
                                show:false
                            }
                        },
                        lineStyle:{
                            normal:{
                                color:'red',
                                width:3
                            }
                        },
                    },
                    barWidth:'50%',
                    label: {
                        normal: {
                            show: true,
                            position: 'inside',
                            formatter: '{c}'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                // build a color map as your need.
                                var colorList = [
                                    '#bcd3bb', '#e88f70', '#9dc5c8', '#e1e8c8',
                                    '#7b7c68', '#e5b5b5', '#f0b489', '#928ea8',
                                    '#bda29a', '#376956', '#c3bed4', '#495a80',
                                    '#9966cc', '#bdb76a', '#eee8ab', '#a35015',
                                    '#04dd98', '#d9b3e6', '#b6c3fc','#315dbc',
                                ];
                                return colorList[params.dataIndex]
                            },

                        }
                    },
                }],
                animationDurationUpdate: 2000,
                animationEasingUpdate: 'quinticInOut'
            },
            options: []
        };
        for (var n = 0; n < years.length; n++) {
            
                   var res = [];
       //alert(jdData.length);
           for(j=0;j<data[n].length;j++){
                res.push({
                name: jdData[n][j],
                value: data[n][j]
            });
         
}

res.sort(function(a, b) {
        return b.value - a.value;
    }).slice(0, 6);

res.sort(function(a, b) {
    return a.value - b.value;
});
var res1=[];
var res2=[];
      //console.log(res);
      for(t=0;t<res.length;t++){
          res1[t]=res[t].name;
            res2[t]=res[t].value;
      }
        console.log(res1);
        console.log("----------------");
          console.log(jdData[n]);
            option.options.push({
                title: {
                    text: years[n] +'年'
                },
                yAxis:{
                    data:res1,
                },
                series: [{
                    data: res2
                }]
            });
        }