扒一扒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
})
},
]
})
}
截图如下
