配置项如下
var builderJson = {
"all": 9858,
"charts": {
"bar": 6851,
"line": 7076,
"pie": 6615,
"lines": 1864,
"parallel": 1632,
"scatter": 2028,
"candlestick": 1624,
"radar": 1883,
"heatmap": 1503,
"treemap": 1348,
"map": 2901,
"graph": 1807,
"boxplot": 1343,
"gauge": 1761,
"funnel": 1459,
"sankey": 1361
},
"components": {
"grid": 8400,
"title": 8638,
"legend": 8489,
"tooltip": 8605,
"markPoint": 3152,
"timeline": 2497,
"polar": 1622,
"geo": 2510,
"markLine": 2775,
"dataZoom": 2529,
"visualMap": 2188,
"toolbox": 2763,
"singleAxis": 3,
"markArea": 3,
"brush": 3
},
"ie": 8783
};
var downloadJson = {
"echarts.min.js": 15687,
"echarts.simple.min.js": 3746,
"echarts.common.min.js": 6351,
"echarts.js": 13226
}
var themeJson = {
"roma.js": 702,
"macarons.js": 2091,
"dark.js": 1572,
"vintage.js": 1407,
"infographic.js": 876,
"shine.js": 1522
}
option = {
tooltip: {
},
title: [{
text: '在线构建',
subtext: '总计 ' + builderJson.all,
x: '25%',
textAlign: 'center'
}, {
text: '各版本下载',
subtext: '总计 ' + Object.keys(downloadJson).reduce(function (all, key) {
return all + downloadJson[key];
}, 0),
x: '75%',
textAlign: 'center'
}, {
text: '主题下载',
subtext: '总计 ' + Object.keys(themeJson).reduce(function (all, key) {
return all + themeJson[key];
}, 0),
x: '75%',
y: '50%',
textAlign: 'center'
}],
grid: [{
top: 50,
width: '50%',
bottom: '45%',
left: 10,
containLabel: true
}, {
top: '55%',
width: '50%',
bottom: 0,
left: 10,
containLabel: true
}],
xAxis: [{
type: 'value',
max: builderJson.all,
splitLine: {
show: false
}
}, {
type: 'value',
max: builderJson.all,
gridIndex: 1,
splitLine: {
show: false
}
}],
yAxis: [{
type: 'category',
data: Object.keys(builderJson.charts),
axisLabel: {
interval: 0,
rotate: 30
},
splitLine: {
show: false
}
}, {
gridIndex: 1,
type: 'category',
data: Object.keys(builderJson.components),
axisLabel: {
interval: 0,
rotate: 30
},
splitLine: {
show: false
}
}],
series: [{
type: 'bar',
stack: 'chart',
z: 3,
label: {
normal: {
position: 'right',
show: true
}
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.charts[key];
})
}, {
type: 'bar',
stack: 'chart',
silent: true,
itemStyle: {
normal: {
color: '#eee'
}
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.all - builderJson.charts[key];
})
}, {
type: 'bar',
stack: 'component',
xAxisIndex: 1,
yAxisIndex: 1,
z: 3,
label: {
normal: {
position: 'right',
show: true
}
},
data: Object.keys(builderJson.components).map(function (key) {
return builderJson.components[key];
})
}, {
type: 'bar',
stack: 'component',
silent: true,
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
normal: {
color: '#eee'
}
},
data: Object.keys(builderJson.components).map(function (key) {
return builderJson.all - builderJson.components[key];
})
}, {
type: 'pie',
radius: [0, '30%'],
center: ['75%', '25%'],
data: Object.keys(downloadJson).map(function (key) {
return {
name: key.replace('.js', ''),
value: downloadJson[key]
}
})
}, {
type: 'pie',
radius: [0, '30%'],
center: ['75%', '75%'],
data: Object.keys(themeJson).map(function (key) {
return {
name: key.replace('.js', ''),
value: themeJson[key]
}
})
}]
}