扒一扒Echarts社区里的大佬

描述:当前是关于Echarts图表中的 柱状图 示例。
 
             var data = [{
         "time": '收到赞最多的十位作者',
         "data": [{
                 "name": 'echarts',
                 "value": [1820, 'echarts']
             },
             {
                 "name": 'pissang',
                 "value": [1205, 'pissang']
             },
             {
                 "name": '虚天神顶',
                 "value": [540, '虚天神顶']
             },
             {
                 "name": '王叮叮当当响',
                 "value": [512, '王叮叮当当响']
             },
             {
                 "name": 'ovilia1024',
                 "value": [322, 'ovilia1024']
             },
             {
                 "name": 'sushuang0322',
                 "value": [274, 'sushuang0322']
             },
             {
                 "name": 'JackBluer',
                 "value": [264, 'JackBluer']
             },
             {
                 "name": 'null主人',
                 "value": [183, 'null主人']
             },
             {
                 "name": 'ni1o1',
                 "value": [178, 'ni1o1']
             },
             {
                 "name": 'Lost_none',
                 "value": [132, 'Lost_none']
             },
         ]
     }, {
         "time": '阅读量最多的十位作者',
         "data": [{
                 "name": 'pissang',
                 "value": [1149534, 'pissang']
             },
             {
                 "name": 'echarts',
                 "value": [1009724, 'echarts']
             },
             {
                 "name": '虚天神顶',
                 "value": [202405, '虚天神顶']
             },
             {
                 "name": '王叮叮当当响',
                 "value": [178977, '王叮叮当当响']
             },
             {
                 "name": 'ovilia1024',
                 "value": [128011, 'ovilia1024']
             },
             {
                 "name": 'sushuang0322',
                 "value": [110831, 'sushuang0322']
             },
             {
                 "name": 'JackBluer',
                 "value": [101016, 'JackBluer']
             },
             {
                 "name": 'null主人',
                 "value": [97235, 'null主人']
             },
             {
                 "name": 'ni1o1',
                 "value": [65926, 'ni1o1']
             },
             {
                 "name": 'Lost_none',
                 "value": [59118, 'Lost_none']
             },
         ]
     }, {
         "time": '收到评论最多的十位作者',
         "data": [{
                 "name": 'pissang',
                 "value": [289, 'pissang']
             },
             {
                 "name": 'echarts',
                 "value": [158, 'echarts']
             },
             {
                 "name": 'null主人',
                 "value": [157, 'null主人']
             },
             {
                 "name": '虚天神顶',
                 "value": [143, '虚天神顶']
             },
             {
                 "name": '王叮叮当当响',
                 "value": [85, '王叮叮当当响']
             },
             {
                 "name": 'ovilia1024',
                 "value": [70, 'ovilia1024']
             },
             {
                 "name": 'ni1o1',
                 "value": [65, 'ni1o1']
             },
             {
                 "name": 'JackBluer',
                 "value": [63, 'JackBluer']
             },
             {
                 "name": '阳光的Only丶',
                 "value": [57, '阳光的Only丶']
             },
             {
                 "name": '4G哦路么了',
                 "value": [53, '4G哦路么了']
             },
         ]
     }, {
         "time": '最辛勤的十位作者(根据作品多少)',
         "data": [{
                 "name": 'pissang',
                 "value": [107, 'pissang']
             },
             {
                 "name": 'echarts',
                 "value": [104, 'echarts']
             },
             {
                 "name": '小丑般的人物',
                 "value": [90, '小丑般的人物']
             },
             {
                 "name": '牧羊yun',
                 "value": [89, '牧羊yun']
             },
             {
                 "name": '王叮叮当当响',
                 "value": [83, '王叮叮当当响']
             },
             {
                 "name": 'sushuang0322',
                 "value": [58, 'sushuang0322']
             },
             {
                 "name": 'ovilia1024',
                 "value": [52, 'ovilia1024']
             },
             {
                 "name": '沉沦在回忆中',
                 "value": [49, '沉沦在回忆中']
             },
             {
                 "name": '邓端nice',
                 "value": [48, '邓端nice']
             },
             {
                 "name": '小白高被注册了',
                 "value": [41, '小白高被注册了']
             },
         ]
     }, {
         "time": '阅读量最多的十幅作品',
         "data": [{
                 "name": 'ECharts-GL Hello World( pissang )',
                 "value": [117432, 'ECharts-GL Hello World( pissang )']
             },
             {
                 "name": 'Voxelize image( pissang )',
                 "value": [111328, 'Voxelize image( pissang )']
             },
             {
                 "name": 'Taxi routes of Cape Town( pissang )',
                 "value": [81734, 'Taxi routes of Cape Town( pissang )']
             },
             {
                 "name": '虚线和渐变的模拟( echarts )',
                 "value": [68570, '虚线和渐变的模拟( echarts )']
             },
             {
                 "name": 'Flights( pissang )',
                 "value": [65154, 'Flights( pissang )']
             },
             {
                 "name": '本年商场顾客男女人数统计( 王叮叮当当响 )',
                 "value": [61307, '本年商场顾客男女人数统计( 王叮叮当当响 )']
             },
             {
                 "name": 'Music Visualization( pissang )',
                 "value": [57846, 'Music Visualization( pissang )']
             },
             {
                 "name": '基本水球图( echarts )',
                 "value": [57550, '基本水球图( echarts )']
             },
             {
                 "name": 'Transparent Bar3D( pissang )',
                 "value": [55750, 'Transparent Bar3D( pissang )']
             },
             {
                 "name": '全国主要城市空气质量( echarts )',
                 "value": [49676, '全国主要城市空气质量( echarts )']
             },
         ]
     },
     {
         "time": '收到赞最多的十幅作品',
         "data": [{
                 "name": 'Voxelize image( pissang )',
                 "value": [162, 'Voxelize image( pissang )']
             },
             {
                 "name": '本年商场顾客男女人数统计( 王叮叮当当响 )',
                 "value": [126, '本年商场顾客男女人数统计( 王叮叮当当响 )']
             },
             {
                 "name": '虚线和渐变的模拟( echarts )',
                 "value": [115, '虚线和渐变的模拟( echarts )']
             },
             {
                 "name": 'ECharts-GL Hello World( pissang )',
                 "value": [94, 'ECharts-GL Hello World( pissang )']
             },
             {
                 "name": '朴姓人口迁徙图( miaolz123 )',
                 "value": [86, '朴姓人口迁徙图( miaolz123 )']
             },
             {
                 "name": '全国主要城市空气质量( echarts )',
                 "value": [85, '全国主要城市空气质量( echarts )']
             },
             {
                 "name": '基于地图下钻( null主人 )',
                 "value": [85, '基于地图下钻( null主人 )']
             },
             {
                 "name": 'Transparent Bar3D( pissang )',
                 "value": [83, 'Transparent Bar3D( pissang )']
             },
             {
                 "name": 'Music Visualization( pissang )',
                 "value": [82, 'Music Visualization( pissang )']
             },
             {
                 "name": 'echarts扩展百度地图迁徙( 阳光的Only丶 )',
                 "value": [80, 'echarts扩展百度地图迁徙( 阳光的Only丶 )']
             },
         ]
     }, {
         "time": '收到评论最多的十幅作品',
         "data": [{
                 "name": 'echarts-gl 3D版地图下钻( null主人 )',
                 "value": [60, 'echarts-gl 3D版地图下钻( null主人 )']
             },
             {
                 "name": 'ECharts-GL Hello World( pissang )',
                 "value": [54, 'ECharts-GL Hello World( pissang )']
             },
             {
                 "name": 'echarts扩展百度地图迁徙( 阳光的Only丶 )',
                 "value": [52, 'echarts扩展百度地图迁徙( 阳光的Only丶 )']
             },
             {
                 "name": '基于地图下钻( null主人 )',
                 "value": [47, '基于地图下钻( null主人 )']
             },
             {
                 "name": '双向bar图( 4G哦路么了 )',
                 "value": [43, '双向bar图( 4G哦路么了 )']
             },
             {
                 "name": '测试bar3D、scatter3D、geo3D( 电竞1的魅力 )',
                 "value": [39, '测试bar3D、scatter3D、geo3D( 电竞1的魅力 )']
             },
             {
                 "name": '公交线路客流可视化( ni1o1 )',
                 "value": [35, '公交线路客流可视化( ni1o1 )']
             },
             {
                 "name": 'Echarts3官方词云图( 虚天神顶 )',
                 "value": [34, 'Echarts3官方词云图( 虚天神顶 )']
             },
             {
                 "name": 'Transparent Bar3D( pissang )',
                 "value": [33, 'Transparent Bar3D( pissang )']
             },
             {
                 "name": '长春市公交线路网( Unclechao )',
                 "value": [33, '长春市公交线路网( Unclechao )']
             },
         ]
     }
 ]


 var option = {
     //  backgroundColor: '#25499F',
     baseOption: {
         animationDurationUpdate: 1000,
         animationEasingUpdate: 'quinticInOut',
         timeline: {
             axisType: 'category',
             orient: 'vertical',
             autoPlay: true,
             //  inverse: true,
             playInterval: 5000,
             left: null,
             right: 150,
             top: 20,
             bottom: 20,
             width: 46,
             height: null,
             label: {
                 normal: {
                     show: true,
                     interval: 0,
                     //  textStyle: {
                     //  color: '#ddd'
                     //  }
                 },
                 //  emphasis: {
                 //      textStyle: {
                 //          color: '#fff'
                 //      }
                 //  }
             },
             symbol: 'none',
             lineStyle: {
                 color: '#ccc',
                 show: false
             },
             checkpointStyle: {
                 color: '#bbb',
                 borderColor: '#777',
                 show: false,
                 borderWidth: 1
             },
             controlStyle: {
                 showNextBtn: false,
                 showPrevBtn: false,
                 normal: {
                     color: '#666',
                     show: false,
                     borderColor: '#666'
                 },
                 emphasis: {
                     color: '#aaa',
                     borderColor: '#aaa'
                 }
             },
             data: data.map(function(ele) {
                 return ele.time
             })
         },
         //  backgroundColor: '#25499F',
         title: [{
             //  text: '基于18年5月4日对gallery的爬虫结果',
             //  subtext: 'GDP单位:亿元',
             left: 'center',
             top: 'top',
             textStyle: {
                 fontSize: 25,
                 //  color: 'rgba(255,255,255, 0.9)'
             }
         }, {
             subtext: '基于18年5月4日对gallery的爬虫结果',
             left: 'center',
             top: '5%'
         }],
         tooltip: {
             formatter: function(params) {
                 if ('value' in params.data) {
                     return params.data.value[2] + ': ' + params.data.value[0];
                 }
             }
         },
         grid: {
             left: 10,
             right: '20%',
             top: '12%',
             bottom: 5
         },
         xAxis: {},
         yAxis: {},
         series: [

             {
                 id: 'bar',
                 type: 'bar',
                 tooltip: {
                     show: false
                 },
                 label: {
                     normal: {
                         show: true,
                         position: 'right',
                         textStyle: {
                             //  color: '#ddd'
                         }
                     }
                 },
                 data: []
             },

         ]
     },
     options: []
 }

 for (var i = 0; i < data.length; i++) {

     option.options.push({
         title: {
             text: data[i].time
         },
         xAxis: {
             type: 'value',
             boundaryGap: [0, 0.1],
             axisLabel: {
                 show: false,
             },
             splitLine: {
                 show: false
             }
         },
         yAxis: {
             type: 'category',
             axisLabel: {
                 show: false,
                 textStyle: {
                     //  color: '#ddd'
                 }
             },

             data: data[i].data.map(function(ele) {
                 return ele.value[1]
             }).reverse()
         },
         series: [

             {
                 id: 'bar',
                 label: {
                     normal: {
                         position: 'right',
                         formatter: '{b} : {c}'
                     }
                 },
                 data: data[i].data.map(function(ele) {
                     return ele.value[0]
                 }).sort(function(a, b) {
                     return a > b
                 })
             },

         ]
     })
 }