最近做了一个统计报表的功能，画了一周的原型图，一直找，找到了很多插件图，最后选择用下面几个图：
1.柱形图：
var jdData = ['DSCY处','RJHXXFW处','SCXFWY处','ZDZX办公室','JSJB处','YJ室','XZ办公室','LGB处','ZZ处','XZLD办公室']
var data1 = [100,80,65,32,30,28,28,9,8,5];
option = {
baseOption: {
timeline: {
axisType: 'category',
show: false,
autoPlay: false,
},
backgroundColor:'#091C3D',
title: {
'text': '',
'subtext': '',
textStyle:{
color:'#fff'
},
left:'center'
},
tooltip: {
'trigger': 'axis'
},
calculable: true,
grid: {
left: '2%',
right: '2%',
bottom: '12%',
top:'4%',
containLabel: true
},
label:{
normal:{
textStyle:{
color:'#fff'
}
}
},
xAxis: [{
splitNumber:0,
'type': 'category',
data: jdData,
nameTextStyle:{
color:'#fff'
},
axisLabel:{
rotate:45,
textStyle:{
fontSize:18,
color:'#fff',
},
interval: 0
},
axisLine:{
lineStyle:{
color:'#fff'
},
},
}],
yAxis: [{
'type': 'value',
'name': '',
splitNumber:0,
nameTextStyle:{
color:'#56617b'
},
axisLine:{
show:false,
lineStyle:{
color:'#56617b'
}
},
axisLabel: {
textStyle:{
fontSize:18,
color:'#fff',
},
formatter: '{value} '
},
splitLine:{
show:true,
lineStyle:{
color:'#56617b'
}
},
}],
series: [{
'name': '',
'type': 'bar',
markLine : {
label:{
normal:{
show:false
}
},
lineStyle:{
normal:{
color:'red',
width:3
}
},
},
barWidth:'50%',
itemStyle: {
normal: {
color: function(params) {
// build a color map as your need.
var colorList = [
'#eb4848','#eb6449','#eb7f49','#eb9a49','#ebb549',
'#ebd049','#ebeb49','#d0eb49','#b5eb49','#9aeb49'
];
return colorList[params.dataIndex]
},
}
},
}]
},
options: [ {
title: {
'text': ''
},
series: [{
'data': data1
}]
}, ]
};
2.饼图
var data = [{
"value": 23988,
"name": "对外经贸合作"
}, {
"value": 23017,
"name": "科技"
}, {
"value": 21013,
"name": "文化体育"
}, {
"value": 18650,
"name": "金融"
}, {
"value": 17820,
"name": "教育"
}, {
"value": 17356,
"name": "基础设施"
}, {
"value": 17355,
"name": "物流"
}, {
"value": 17343,
"name": "能源"
}, {
"value": 14928,
"name": "铁路"
}, {
"value": 14752,
"name": "国内贸易"
}, {
"value": 12484,
"name": "旅游"
}, {
"value": 9184,
"name": "农林牧渔"
}, {
"value": 8999,
"name": "重大项目"
}, {
"value": 8108,
"name": "环境保护"
}, {
"value": 7985,
"name": "公路"
}, {
"value": 7720,
"name": "电力"
}, {
"value": 7684,
"name": "民航"
}, {
"value": 7487,
"name": "医药卫生"
}, {
"value": 7318,
"name": "信息产业"
}, {
"value": 7141,
"name": "民族宗教"
}];
var count_num = 0;
for (var m in data) {
count_num = count_num + data[m]['value']
}
/*for (var n in data){
data[n]['name'] = data[n]['name'] + ' '+((data[n]['value']/count_num)*100).toFixed(1) +'%'
}*/
option = {
backgroundColor: "#000",
title: {
text: '“一带一路”沿线省区市关注领域',
subtext: '纯属虚构',
x: 'center',
top: '30',
textStyle: {
color: "#fff",
}
},
//显示series中信息，提示框组件
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [{
type: 'pie', //图表类型，柱状图：bar
//饼图：pie (南丁格尔图在series中加上roseType:’angle’)移开后不显示原来信息
radius: '55%', //半径
center: ['50%', '50%'],
label: {
formatter: "{b}+{d}%"
},
data: data,
itemStyle: { //itemStyle有正常显示：normal，有鼠标hover的高亮显示：emphasis
emphasis: { //normal显示阴影,与shadow有关的都是阴影的设置
shadowBlur: 10, //阴影大小
shadowOffsetX: 0, //阴影水平方向上的偏移
shadowColor: 'rgba(0, 0, 0, 0.5)' //阴影颜色
}
}
}]
};
3.横向柱状图：
option = {
backgroundColor:'#091C3D',
color: ["#cd5c5c"],
textStyle: {
color: '#fff'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: "{a} <br/>{b} : {c}台"
},
grid: {
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLine:{
lineStyle:{
color:'#fff'
},
},
"axisLabel": {
"interval": 0,
fontSize: 18,
formatter: '{value}',
}
},
yAxis: {
axisLine:{
lineStyle:{
color:'#fff'
},
},
"axisLabel": {
"interval": 0,
fontSize: 18,
},
type: 'category',
data: [
'综合办事大厅',
'公共会议室',
'XXAQ处',
'XYGL处',
'JGSW管理局',
'物业办公室',
'XF办公室',
'XTGH',
'TGW',
'值班室',
'车队',
'行政后勤',
'XXZX',
'DSCY处',
'DZXXCY处',
'XCL处',
'SCXFWY处',
'YQFW处',
'JGPT处',
'GXGC处',
'JSJB处',
].reverse()
},
series: [{
name: '活跃终端数量：',
type: 'bar',
data: [19,19, 17, 13,10, 10,10, 10, 9, 9, 8, 7,7, 7, 4, 4, 4,4, 1,1, 0].reverse(),
}]
};
4.折线图：
option = {
backgroundColor: '#091C3D',
title: {},
tooltip: {
trigger: 'axis'
},
legend: {
splitNumber: 0,
data: ['活跃数', '闲置数'],
nameTextStyle: {
color: '#fff'
},
},
toolbox: {
show: true,
feature: {
dataZoom: {},
dataView: {
readOnly: false
},
magicType: {
type: ['line', 'bar']
},
restore: {},
saveAsImage: {}
}
},
xAxis: [{
type: 'category',
boundaryGap: false,
data: ['00:30:00', '01:00:00', '01:30:00', '02:00:00', '02:30:00', '03:00:00', '03:30:00', '04:00:00', '04:30:00', '05:00:00', '05:30:00', '06:00:00', '06:30:00', '07:00:00', '07:30:00', '08:00:00', '08:30:00', '09:00:00', '09:30:00', '10:00:00', '10:30:00', '11:00:00', '11:30:00', '12:00:00',
'12:30:00', '13:00:00', '13:30:00', '14:00:00', '14:30:00', '15:00:00', '15:30:00', '16:00:00', '16:30:00', '17:00:00', '17:30:00', '18:00:00', '18:30:00', '19:00:00', '19:30:00', '20:00:00', '20:30:00', '21:00:00', '21:30:00', '22:00:00', '22:30:00', '23:00:00', '23:30:00', '24:00:00'
],
}],
yAxis: [{
type: 'value',
axisLabel: {
textStyle: {
fontSize: 18,
color: '#fff',
},
formatter: '{value} '
},
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
},
}],
series: [{
name: '活跃数',
type: 'line',
data: [58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 120, 120, 125, 126, 125, 120, 128, 120, 120, 120, 120, 120, 125, 126, 125, 120, 128, 85, 85, 80, 80, 60, 60, 60, 60, 60, 60, 60, 60, 60, ],
markPoint: {
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
},
{
name: '闲置数',
type: 'line',
data: [21, 28, 25, 22, 26, 32, 35, 39, 28, 26, 20, 28, 24, 26, 26, 25, 35, 39, 28, 26, 20, 28, 24, 28, 24, 26, 26, 25, 35, 39, 28, 26, 32, 35, 39, 28, 26, 20, 28, 24, 26, 26, 25, 35, 39, 28, 26, 20, 28, 24, ],
markPoint: {
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
}
]
};
