var drawBarEcharts;
var wjbjNum
//三角形柱状图
function drawBarEcharts() {
drawBarEcharts = echarts.init(document.getElementById('wjTotal'));
var xdata = ['收文', '发文','签报','信息']
var maxArr = [100, 100]
var options= {
title: {text: ''},
backgroundColor: '#fff', // 背景色
tooltip: {
trigger: 'axis',
borderRadius: 5,
borderColor: '#fff',
borderWidth: 1,
formatter: function (params) {
// 滑动每一条数据对应的数据 params
return params[0].axisValue + '<br>' + '文件量 :' + params[0].value
}
},
grid: {
left: 40,
right: '3%',
bottom: 20,
top: '15%',
containLabel: true
},
xAxis: {
data: xdata,
triggerEvent: true,
axisTick: {
// 刻度线
show: false
},
axisLine: {
show: true,
},
axisLabel: {
show: true,
rotate:30,
interval: 0,
textStyle: {
color: 'blank',
fontSize: 20,
//-15度角倾斜显示
}
}
},
yAxis: {
name: '',
nameLocation: 'middle',
triggerEvent: true,
nameTextStyle: {
padding: 30,
fontSize: 14,
color: '#fff'
},
splitLine: {
show: true,
lineStyle: {
color: '#e5e5e5'
}
},
axisTick: {
show:false
},
axisLine: {
show: true,
symbol: ['none', 'arrow'], //---是否显示轴线箭头['none', 'arrow']
// symbolSize:[8, 8] , //---箭头大小
// symbolOffset:[0,7]
// lineStyle:{
// color:'#333',
// width:1,
// type:'solid'
// }
},
axisLabel: {
show: true,
textStyle: {
color: 'blank',
fontSize: 12
}
}
},
series: [
{
name: 'hill',
barWidth: '120%',
//barMinHeight: 10,
type: 'pictorialBar',
barCategoryGap: '60%',
symbol:
'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
itemStyle: {
//这里是重点
color: function(params) {
//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
//#ffdc60,#ee6666,#9fe080,#5470c6
var colorList = ['#ffdc60','#ee6666', '#9fe080', '#5470c6'];
return colorList[params.dataIndex]
},
textStyle: {
color: 'blank',
fontSize: 12
}
},
label: {
// 数据上方显示数值
show: true,
position: 'top',
textStyle: {
color: '#000000',
fontSize: 12
}
},
data: [],
z: 10
},
{
// 阴影部分
name: 'hill',
type: 'bar',
barWidth: '20%',
symbol:
'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
itemStyle: {
normal: {
color: 'rgba(11,47,68,.8)'
}
},
data: [],
z: 9
}
]
}
drawBarEcharts.setOption(options,true);
}
//漏斗三角形图表
function wjbjNum() {
wjbjNum = echarts.init(document.getElementById('bjTotal'));
option = {
title: {
text: '',
subtext: '',
left: 'left'
},
tooltip: {
show:false,
trigger: 'item',
formatter: '{a} <br/>{b} : {c}%'
},
toolbox: {
feature: {
}
},
legend: {
data: ['展现', '点击', '访问', '咨询', '订单']
},
series: [
{
name: '未办结',
type: 'funnel',
width: '70%',
height: '45%',
left: '25%',
top: '5%',
label: {
//position: 'left'
},
data: [
// {value:50,
// name:'未办结',
// itemStyle:{
// normal:{color:'#ee6666'}
// }},
// {value:100,
// itemStyle:{
// normal:{color:'#fff'}
// }}
]
},
{
name: '已办结',
type: 'funnel',
width: '70%',
height: '45%',
left: '25%',
top: '50%',
sort: 'ascending',
label: {
},
data: [
// {value:50,
// name:'已办结',
// itemStyle:{
// normal:{color:'#90EE90'}
// }},
// {value:100,
// itemStyle:{
// normal:{color:'#fff'}
// }}
]
}
]
};
wjbjNum.setOption(option);
}
getFileData(1);
var total=0
//获取数据
function getFileData(type){
$.ajax({
url:path+"/cockpit/getFileData.html",
type:'post',
dataType:'json',
data:{"type":type},
success:function(data){
if(data.msg == 'success'){
var total=data.data.total
var bjTotal=data.data.bjTotal
var bjNum=Math.round(bjTotal/total*100)
var wjNum=100-bjNum
$(".bjNum").html(bjNum+"%")
$(".wjNum").html(wjNum+"%")
$("#bjLemon").css("cssText", "background-color:#90EE90!important; width:"+bjNum+"%!important");
$("#wjLemon").css("cssText", "background-color:#ee6666!important; width:"+wjNum+"%!important");
wjbjNum.setOption({
series: [{
data:[
{value:wjNum,
name:'未办结',
itemStyle:{
normal:{color:'#ee6666'}
}},
{value:100,
itemStyle:{
normal:{color:'#fff'}
}}
]
},
{
data:[
{value:bjNum,
name:'已办结',
itemStyle:{
normal:{color:'#90EE90'}
}},
{value:100,
itemStyle:{
normal:{color:'#fff'}
}}
]
}
]
})
drawBarEcharts.setOption({ //加载数据图表
series: [{
data:[
{value:data.data.receiptCount, name:'收文'},
{value:data.data.postCount, name:'发文'},
{value:data.data.signOffCount, name:'签报'},
{value:data.data.infoCount, name:'信息'}
]
}]
});
}
}
});
}
//梁：饼状图
// 饼状图
var dbPieChart;
function dbPieChart(elemId){
dbPieChart = echarts.init(document.getElementById(elemId));
// 指定图表的配置项和数据
var option = {
title: {
text: '',
subtext: '',
left: 'center'
},
tooltip: {
trigger: 'item'
},
lableLine: {
normal: {
show: true
},
emphasis: {
show: true
}
},
color:['#ffdc60','#ee6666'],
series: [
{
name: '督办情况',
type: 'pie',
radius: '50%',
labelLine: {
normal: {
show: true,
length: 2,
length2: 10
}
},
label: {
normal: {
show: true,
position: 'outside',
formatter: '{c}'
}
},
data: [
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
dbPieChart.setOption(option,true);
}
dbPieChart.setOption({ //加载数据图表
series: [{
data:[
{value:data.data.finishCount, name:'已完成'},
{value:data.data.noFinishCount, name:'未完成'},
]
}]
});