先看几个效果图：
function labor_security(labor,ecid="labor_security",font_size) {
let labor_security = echarts.init(document.getElementById(ecid));
/*清除画布*/
labor_security.clear();
let Data=[] ,zd_num1=[],zd_num2=[],zd_num3=[],zd_num4=[],ja_num1=[],ja_num2=[],ja_num3=[],ja_num4=[]
for(i in labor){
Data[i]=labor[i].quarter
}
for(k in labor[0].content){
zd_num1[k]=Number(labor[0].content[k].zd_num)
ja_num1[k]=Number(labor[0].content[k].ja_num)
}
for(k in labor[1].content){
zd_num2[k]=Number(labor[1].content[k].zd_num)
ja_num2[k]=Number(labor[1].content[k].ja_num)
}
for(k in labor[2].content){
zd_num3[k]=Number(labor[2].content[k].zd_num)
ja_num3[k]=Number(labor[2].content[k].ja_num)
}
if(labor.length>3){
for(k in labor[3].content){
zd_num4[k]=Number(labor[3].content[k].zd_num)
ja_num4[k]=Number(labor[3].content[k].ja_num)
}
}
/*交叉两个数组合并一个新数组*/
function aryJoinAry(ary,ary2) {
var itemAry=[];
var minLength;
//先拿到两个数组中长度较短的那个数组的长度
if(ary.length>ary2.length){
minLength=ary2.length;
}
else{
minLength=ary.length;
}
//将两个数组中较长的数组记录下来
var longAry=arguments[0].length>arguments[1].length?arguments[0]:arguments[1];
//循环范围为较短的那个数组的长度
for (var i = 0; i < minLength; i++) {
//将数组放入临时数组中
itemAry.push(ary[i]);
itemAry.push(ary2[i])
}
//itemAry和多余的新数组拼接起来并返回。
return itemAry.concat(longAry.slice(minLength));
}
let yData1=aryJoinAry(zd_num1,ja_num1)
let yData2=aryJoinAry(zd_num2,ja_num2)
let yData3=aryJoinAry(zd_num3,ja_num3)
let yData4=aryJoinAry(zd_num4,ja_num4)
let data = {
xData: ['主动', '结案', '主动', '结案','主动', '结案','主动', '结案','主动', '结案','主动', '结案',],
yData1: yData1,
yData2: yData2,
yData3: yData3,
yData4: yData4,
}
var data3 = function() {
var datas = [];
for (var i = 0; i < yData1.length; i++) {
datas.push(Number(yData1[i])+Number(yData2[i])+Number(yData3[i]));
}
return datas;
}();
/**
双X轴标签对应，伪实现思路：
底部的标签也是柱状图，对应包含的区域为上方X轴条数占总数的比例，设为宽度即可
*/
let option2 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
top: 0,
right: 20,
itemWidth:10,
itemHeight:10,
textStyle:{
color:"#fff",
fontSize:font_size
},
data:Data
},
grid: [
{
top: "10%",
bottom: "20%"
},
{
height: "10%",
bottom: "5%"
}
],
toolbox: {
show: true,
feature: {
dataView: {
show: false,
readOnly: false,
//增加导出Excel
lang: ['数据视图', '关闭', '导出Excel'],
contentToOption: function (opts) {
$("#tableExcel_Day").table2excel({
exclude: ".noExl", //过滤位置的 css 类名
filename: '表格' + ".xls", //文件名称
name: "Excel Document Name.xls",
exclude_img: true,
exclude_links: true,
exclude_inputs: true
});
},
//头部颜色
backgroundColor:"rgb(11, 79, 174,0.8)",
//按钮颜色
buttonColor:"#2a66b5",
//按钮字体颜色
buttonTextColor:'#fff',
//表格背景颜色
textareaBorderColor:"#2a66b5",
//表格字体颜色
textColor:'#fff',
optionToContent: function (opt) {
console.log(opt);
var axisData = opt.xAxis[0].data; //坐标数据
var series = opt.series; //折线图数据
var tdHeads = '<td style="padding:5px 10px">类型</td>';
var tdBodys = ''; //表数据
//组装表头
var nameData = new Array('第一季度', '第二季度', '第三季度');
for (var i = 0; i < nameData.length; i++) {
tdHeads += '<td style="padding: 5px 10px">' + nameData[i] + '</td>';
}
var table = '<table id="tableExcel_Day" class="echarts-table" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';
//组装表数据
var tableCount = [];
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series[0].data[j] ; j++) {
var temp = series[j].data[i];
if (temp != null && temp != undefined) {
tdBodys += '<td>' + temp+ '</td>';
console.log(temp);
if (tableCount[j]) {
tableCount[j] +=temp;
} else {
tableCount[j] = temp;
}
} else {
tdBodys += '<td></td>';
}
}
table += '<tr><td style="padding: 5px 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
tdBodys = '';
}
console.log(tableCount);
let heji=''
for(k in tableCount){
heji+='<td>'+tableCount[k]+'</td>'
}
table += '<tr><td style="padding: 5px 10px">合计：</td>' + heji+ '</tr>';
table += '</tbody></table>';
// console.log(table);
return table;
}
},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
},
iconStyle: {
borderColor: 'white'
}
},
xAxis: [{
type: 'category',
data: data.xData,
gridIndex: 0,
axisLabel: {
color: '#fff',
fontSize: font_size,
},
axisLine: {
lineStyle: {
color: '#e7e7e7'
}
},
axisTick: {
show:false
},
zlevel: 2
}, {
type: 'category',
gridIndex: 1,
axisLine: {
show: false
},
zlevel: 1
}],
yAxis: [{
name:'单位(个)',
nameTextStyle:{
color:"#fff",
fontSize:font_size,
},
type: 'value',
gridIndex: 0,
axisLabel: {
color: '#fff',
fontSize: font_size,
},
splitLine: {
lineStyle: {
type: 'dashed'
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisTick: {
lineStyle: {
color: '#fff'
}
}
},{
// name:'单位(个)',
// nameTextStyle:{
// color:"#fff",
// fontSize:font_size,
// },
type: 'value',
gridIndex: 1,
axisLabel: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
}
}],
//动画加载时长为3秒
animationDuration: 3000,
series: [
{
name: '第一季度',
nameTextStyle:{
fontSize:font_size,
},
data: data.yData1,
type: 'bar',
stack: 'sum',
barWidth:font_size,
/* label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
},*/
itemStyle: {
normal: {
color:"#0073D9",
fontSize:15,
/* color: (params) => {
let colors = ['#b6c2ff', '#96edc1', '#fcb75b', '#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b']
return colors[params.dataIndex]
}*/
}
},
xAxisIndex: 0,
yAxisIndex: 0
},
{
name: '第二季度',
nameTextStyle:{
fontSize:font_size,
},
data: data.yData2,
barWidth:font_size,
type: 'bar',
stack: 'sum',
/* label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
},*/
itemStyle: {
normal: {
color:"#02B0CE",
fontSize:15,
/* color: (params) => {
let colors = ['#b6c2ff', '#96edc1', '#fcb75b', '#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b']
return colors[params.dataIndex]
}*/
}
},
xAxisIndex: 0,
yAxisIndex: 0
},
{
name: '第三季度',
nameTextStyle:{
fontSize:font_size,
},
data: data.yData3,
barWidth:font_size,
type: 'bar',
stack: 'sum',
/* label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
},*/
itemStyle: {
normal: {
color:"#1D6892",
fontSize:15,
/* color: (params) => {
let colors = ['#b6c2ff', '#96edc1', '#fcb75b', '#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b']
return colors[params.dataIndex]
}*/
}
},
xAxisIndex: 0,
yAxisIndex: 0
},
{
name: '第四季度',
nameTextStyle:{
fontSize:font_size,
},
data: data.yData4,
type: 'bar',
stack: 'sum',
barWidth:font_size,
/* label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
},*/
itemStyle: {
normal: {
color:"#1D925D",
fontSize:15,
/* color: (params) => {
let colors = ['#b6c2ff', '#96edc1', '#fcb75b', '#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b']
return colors[params.dataIndex]
}*/
}
},
xAxisIndex: 0,
yAxisIndex: 0
},
{ //新的一个柱子 注意不设stack
name: '总数',
type: 'bar',
barGap: '-200%', // 左移100%，stack不再与上面两个在一列
label: {
normal: {
show: true, //显示数值
position: 'top', // 位置设为top
formatter: '{c}',
textStyle: { color: '#fff' } //设置数值颜色
}
},
itemStyle: {
normal: {
color: 'rgba(128, 128, 128, 0)' // 设置背景颜色为透明
}
},
data: data3,
},
{
data: [{
name: '制造业',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0,10],
textStyle: {
color: '#fff',
fontSize:font_size
}
},
type: 'bar',
barGap: 0,
barWidth: '16.666%',
itemStyle: {
normal: {
color: "#073fa4"
}
},
xAxisIndex: 1,
yAxisIndex: 1
},
{
data: [{
name: '建筑业',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0,10],
textStyle: {
color: '#fff',
fontSize:font_size
}
},
type: 'bar',
barGap: 0,
barWidth: '16.666%',
xAxisIndex: 1,
itemStyle: {
normal: {
color: "#073fa4"
}
},
yAxisIndex: 1
},
{
data: [{
name: '批发零售业',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0,10],
textStyle: {
color: '#fff',
fontSize:font_size
}
},
type: 'bar',
barGap: 0,
barWidth: '16.666%',
xAxisIndex: 1,
itemStyle: {
normal: {
color: "#073fa4"
}
},
yAxisIndex: 1
},{
data: [{
name: '住宿餐饮业',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0,10],
textStyle: {
color: '#fff',
fontSize:font_size
}
},
type: 'bar',
barGap: 0,
barWidth: '16.666%',
itemStyle: {
normal: {
color: "#073fa4"
}
},
xAxisIndex: 1,
yAxisIndex: 1
},
{
data: [{
name: '居民服务业',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0,10],
textStyle: {
color: '#fff',
fontSize:font_size
}
},
type: 'bar',
barGap: 0,
barWidth: '16.666%',
itemStyle: {
normal: {
color: "#073fa4"
}
},
xAxisIndex: 1,
yAxisIndex: 1
},
{
data: [{
name: '其他',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0,10],
textStyle: {
color: '#fff',
fontSize:font_size
}
},
type: 'bar',
barGap: 0,
barWidth: '16.666%',
itemStyle: {
normal: {
color: "#073fa4"
}
},
xAxisIndex: 1,
yAxisIndex: 1
}
]
};
labor_security.setOption(option2)
}
function labor_contract(contract,ecid=“labor_contract”,font_size) {
console.log(“劳动保障监察执法效果情况”,contract[0].xbldhtbascs);
let labor_contract = echarts.init(document.getElementById(ecid));
/清除画布/
labor_contract.clear();
let data2 = {
xData: [‘备案’, ‘新办’, ‘备案’, ‘新办’,‘备案’, ‘新办’,‘备案’, ‘新办’],
yData1: [0, contract[0].xbldhtbascs, 0, contract[1].xbldhtbascs, 0, contract[2].xbldhtbascs],
yData2: [contract[0].jcldhts, 0, contract[1].jcldhts, 0, contract[2].jcldhts, 0],//解除
yData3: [contract[0].xqldhts2, 0, contract[1].xqldhts2, 0, contract[2].xqldhts2, 0],//续签
yData4: [contract[0].xqldhts1, 0, contract[1].xqldhts1, 0, contract[2].xqldhts1, 0],//新签
}
/**
双X轴标签对应，伪实现思路：
底部的标签也是柱状图，对应包含的区域为上方X轴条数占总数的比例，设为宽度即可
/
let fisrt_ba=Number(contract[0].jcldhts)+Number(contract[0].xqldhts2)+Number(contract[0].xqldhts1)
let second_ba=Number(contract[1].jcldhts)+Number(contract[1].xqldhts2)+Number(contract[1].xqldhts1)
let third_ba=Number(contract[2].jcldhts)+Number(contract[2].xqldhts2)+Number(contract[2].xqldhts1)
let option4 = {
title: {
text: ‘第一季度：’+’ ’ +‘劳动合同备案总人数:’+fisrt_ba+‘人’+’ ‘+‘新办劳动合同备案手册数:’+contract[0].xbldhtbascs+‘人’+"\n"+
‘第二季度：’+’ ’ +‘劳动合同备案总人数:’+second_ba+‘人’+’ ‘+‘新办劳动合同备案手册数:’+contract[0].xqldhts2+‘人’+"\n"+
‘第三季度：’+’ ’ +‘劳动合同备案总人数:’+third_ba+‘人’+’ '+‘新办劳动合同备案手册数:’+contract[0].xqldhts1+‘人’,
left: 19,
top: “4%”,
textStyle: {
fontStyle:‘normal’,
fontWeight:‘normal’,
color: ‘#fff’,
lineHeight:font_size2,
fontSize:font_size
}
},
tooltip: {
trigger: ‘axis’,
axisPointer: {
type: ‘shadow’
}
},
toolbox: {
show: true,
feature: {
dataView: {
show: false,
readOnly: false,
//增加导出Excel
lang: [‘数据视图’, ‘关闭’, ‘导出Excel’],
contentToOption: function (opts) {
$("#tableExcel_Day").table2excel({
exclude: “.noExl”, //过滤位置的 css 类名
filename: ‘表格’ + “.xls”, //文件名称
name: “Excel Document Name.xls”,
exclude_img: true,
exclude_links: true,
exclude_inputs: true
});
},
//头部颜色
backgroundColor:“rgb(11, 79, 174,0.8)”,
//按钮颜色
buttonColor:"#2a66b5",
//按钮字体颜色
buttonTextColor:’#fff’,
//表格背景颜色
textareaBorderColor:"#2a66b5",
//表格字体颜色
textColor:’#fff’,
optionToContent: function (opt) {
console.log(opt);
var axisData = opt.xAxis[0].data; //坐标数据
var series = opt.series; //折线图数据
var tdHeads = '<td style="padding:5px 10px">类型</td>';
var tdBodys = ''; //表数据
//组装表头
var nameData = new Array('第一季度', '第二季度', '第三季度');
for (var i = 0; i < nameData.length; i++) {
tdHeads += '<td style="padding: 5px 10px">' + nameData[i] + '</td>';
}
var table = '<table id="tableExcel_Day" class="echarts-table" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';
//组装表数据
var tableCount = [];
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series[0].data[j] ; j++) {
var temp = series[j].data[i];
if (temp != null && temp != undefined) {
tdBodys += '<td>' + temp+ '</td>';
console.log(temp);
if (tableCount[j]) {
tableCount[j] +=temp;
} else {
tableCount[j] = temp;
}
} else {
tdBodys += '<td></td>';
}
}
table += '<tr><td style="padding: 5px 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
tdBodys = '';
}
console.log(tableCount);
let heji=''
for(k in tableCount){
heji+='<td>'+tableCount[k]+'</td>'
}
table += '<tr><td style="padding: 5px 10px">合计：</td>' + heji+ '</tr>';
table += '</tbody></table>';
// console.log(table);
return table;
}
},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
},
iconStyle: {
borderColor: 'white'
}
},
legend: {
top: "30%",
right: 20,
itemWidth:15,
itemHeight:15,
textStyle:{
color:"#fff",
fontSize:font_size
},
data: ['新办劳动合同备案手册', '接触劳动合同数','续签劳动合同数','新签劳动合同数']
},
grid: [
{
top: "45%",
bottom: "20%"
},
{
height: "10%",
bottom: "5%"
}
],
xAxis: [{
type: 'category',
data: data2.xData,
gridIndex: 0,
axisLabel: {
color: '#fff',
fontSize: font_size
},
axisLine: {
lineStyle: {
color: '#e7e7e7'
}
},
axisTick: {
show:false
},
zlevel: 2
}, {
type: 'category',
gridIndex: 1,
axisLine: {
show: false
},
zlevel: 1
}],
yAxis: [{
name:'单位(个)',
nameTextStyle:{
color:"#fff",
fontSize:font_size,
},
type: 'value',
gridIndex: 0,
axisLabel: {
color: '#fff'
},
splitLine: {
lineStyle: {
type: 'dashed'
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisTick: {
lineStyle: {
color: '#fff'
}
}
},{
// name:'单位(个)',
// nameTextStyle:{
// color:"#fff",
// fontSize:font_size,
// },
type: 'value',
gridIndex: 1,
axisLabel: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
}
}],
//动画加载时长为3秒
animationDuration: 3000,
series: [
{
name: '新办劳动合同备案手册',
data: data2.yData1,
type: 'bar',
stack: 'sum',
barWidth:font_size,
/* label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
},*/
itemStyle: {
normal: {
color:"#2CCC44"
/* color: (params) => {
let colors = ['#b6c2ff', '#96edc1', '#fcb75b', '#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b']
return colors[params.dataIndex]
}*/
}
},
xAxisIndex: 0,
yAxisIndex: 0
},{
name: '接触劳动合同数',
data: data2.yData2,
barWidth:font_size,
type: 'bar',
stack: 'sum',
/* label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
},*/
itemStyle: {
normal: {
color:"#C074F3"
/* color: (params) => {
let colors = ['#b6c2ff', '#96edc1', '#fcb75b', '#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b']
return colors[params.dataIndex]
}*/
}
},
xAxisIndex: 0,
yAxisIndex: 0
},
{
name: '续签劳动合同数',
data: data2.yData3,
barWidth:font_size,
type: 'bar',
stack: 'sum',
/* label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
},*/
itemStyle: {
normal: {
color:"#42B1CC"
/* color: (params) => {
let colors = ['#b6c2ff', '#96edc1', '#fcb75b', '#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b']
return colors[params.dataIndex]
}*/
}
},
xAxisIndex: 0,
yAxisIndex: 0
},
{
name: '新签劳动合同数',
data: data2.yData4,
type: 'bar',
stack: 'sum',
barWidth:font_size,
/* label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
},*/
itemStyle: {
normal: {
color:"#FFBC32"
/* color: (params) => {
let colors = ['#b6c2ff', '#96edc1', '#fcb75b', '#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b','#b6c2ff', '#96edc1', '#fcb75b']
return colors[params.dataIndex]
}*/
}
},
xAxisIndex: 0,
yAxisIndex: 0
},
{
data: [{
name: '第一季度',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0,10],
textStyle: {
color: '#fff',
fontSize:font_size
}
},
type: 'bar',
barGap: 0,
barWidth: '25%',
itemStyle: {
normal: {
color: "#073fa4"
}
},
xAxisIndex: 1,
yAxisIndex: 1
},{
data: [{
name: '第二季度',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0,10],
textStyle: {
color: '#fff',
fontSize:font_size
}
},
type: 'bar',
barGap: 0,
barWidth: '25%',
xAxisIndex: 1,
itemStyle: {
normal: {
color: "#073fa4"
}
},
yAxisIndex: 1
},{
data: [{
name: '第三季度',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0,10],
textStyle: {
color: '#fff',
fontSize:font_size
}
},
type: 'bar',
barGap: 0,
barWidth: '25%',
itemStyle: {
normal: {
color: "#073fa4"
}
},
xAxisIndex: 1,
yAxisIndex: 1
},
{
data: [{
name: '第四季度',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0,10],
textStyle: {
color: '#fff',
fontSize:font_size
}
},
type: 'bar',
barGap: 0,
barWidth: '25%',
itemStyle: {
normal: {
color: "#073fa4"
}
},
xAxisIndex: 1,
yAxisIndex: 1
},
]
};
labor_contract.setOption(option4)
}
function unit_endowment_insurance(endowment,ecid="unit_endowment_insurance",font_size) {
let unit_endowment_insurance = echarts.init(document.getElementById(ecid));
let color=["#2297FE","#FFB432","#655DFF","#7AFF2A","#25FFFC","#FF3232"];
const data1 =endowment
console.log("机关",data1);
let option3 = {
legend: {
// selectedMode: false, // 取消图例上的点击事件
type: 'plain',
orient: 'vertical',
left: '60%',
top: '10%',
align: 'left',
right:'50',
itemGap: 20,
itemWidth: Number(font_size), // 设置宽度
itemHeight: Number(font_size), // 设置高度
symbolKeepAspect: false,
textStyle: {
color: '#fff',
fontSize: font_size,
rich: {
name: {
verticalAlign: 'right',
align: 'left',
width: 35,
fontSize: font_size
},
value: {
align: 'left',
color:'#3dbfd1',
fontSize: font_size
},
}
},
data: data1.map(item => item.name),
formatter: function(name) {
let tip1 = "";
let tip = "";
let le = name.length //图例文本的长度
if(le > 15){ //几个字换行大于几就可以了
let l = Math.ceil(le/15) //有些不能整除，会有余数，向上取整
for(let i = 1;i <= l;i++){ //循环
if(i < l){ //最后一段字符不能有\n
tip1 += name.slice(i*15-15,i*15)+'\n'; //字符串拼接
}else if(i === l){ //最后一段字符不一定够9个
tip = tip1 + name.slice((l-1)*15,le) //最后的拼接在最后
}
}
if (data1 && data1.length) {
for (var i = 0; i < data1.length; i++) {
if (name === data1[i].name) {
return (
tip +':'+ '{value| ' +
data1[i].value +
'}'+'个'
)
}
}
}
}else{
tip = name //前面定义了tip为空，这里要重新赋值，不然会替换为空
if (data1 && data1.length) {
for (var i = 0; i < data1.length; i++) {
if (name === data1[i].name) {
return (
tip +':'+ '{value| ' +
data1[i].value +
'}'+'个'
)
}
}
}
}
}
},
toolbox: {
show: true,
feature: {
dataView: {
show: true,
readOnly: false,
//增加导出Excel
lang: ['数据视图', '关闭', '导出Excel'],
contentToOption: function (opts) {
$("#tableExcel_Day").table2excel({
exclude: ".noExl", //过滤位置的 css 类名
filename: '表格' + ".xls", //文件名称
name: "Excel Document Name.xls",
exclude_img: true,
exclude_links: true,
exclude_inputs: true
});
},
//头部颜色
backgroundColor:"rgb(11, 79, 174,0.8)",
//按钮颜色
buttonColor:"#2a66b5",
//按钮字体颜色
buttonTextColor:'#fff',
//表格背景颜色
textareaBorderColor:"#2a66b5",
//表格字体颜色
textColor:'#fff',
optionToContent: function (opt) {
console.log(opt);
var axisData =opt.legend[0].data; //坐标数据
var series = opt.series[0].data; //折线图数据
var tdHeads = '<td style="padding:5px 10px">机关事业单位养老保险指标</td>';
var tdBodys = ''; //表数据
//组装表头
var nameData = new Array('数量');
for (var i = 0; i < nameData.length; i++) {
tdHeads += '<td style="padding: 5px 10px">' + nameData[i] + '</td>';
}
var table = '<table id="tableExcel_Day" class="echarts-table" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';
//组装表数据
var tableCount = [];tdBodys1=[]
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series.length ; j++) {
var temp = Number(series[j].value);
if (temp != null && temp != undefined) {
tdBodys1[j] = '<td>' + temp+ '</td>';
console.log(temp);
if (tableCount[j]) {
tableCount[j] =temp;
} else {
tableCount[j] = temp;
}
} else {
tdBodys1[j]= '<td></td>';
}
}
table += '<tr><td style="padding: 5px 10px">' + axisData[i] + '</td>' + tdBodys1[i] + '</tr>';
tdBodys = '';
}
console.log(tableCount);
let heji=0
for(p in tableCount){
if(tableCount[p]){
heji +=Number(tableCount[p])
}
}
heji=heji
table += '<tr><td style="padding: 5px 10px">合计：</td>' + '<td>' + heji+ '</td>'+ '</tr>';
table += '</tbody></table>';
// console.log(table);
return table;
}
},
// magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {
show: true,
backgroundColor: '#073fa4f7'
}
},
iconStyle: {
borderColor: 'white'
}
},
series: [{
name: '数量',
type: 'pie',
color:color,
radius: ['60%', '80%'],
center: ['30%', '50%'],
data: data1,
label: {
normal: {
show: false,
position: 'inside',
formatter: '{c}',
},
emphasis: {
show: true,
textStyle: {
fontSize:font_size
}
}
},
labelLine: {
normal: {
show: true
}
}
}]
};
unit_endowment_insurance.on('click', function (params) {
console.log(params);
let that=vm.$data
that.name = params.name;
console.log(params.name);
that.head="机关事业单位养老保险指标数据"
//弹窗
$('#goodcover').show();
$('#middle_tab').fadeIn();
//动态加载弹窗距离
that.echarts_left=1200
that.dt_left = 1690;
that.dt_map=2270;
//锁定表格
that.table = true;
// 请求接口
$.ajax({
type: 'GET',
url:ajax_url,
data: {model_id:54,
},
dataType: 'JSON',
success: function (res) {
console.log("机关事业单位养老保险指标数据",res);
let head_title=[];
fields = res.field;
for (key in fields) {
head_title.push({label:fields[key],property:key})
}
that.head_title_total=[
{label:"指标名称",property:"zbmc"},
{label:"考核标准",property:"khbz"},
{label:"发布时间",property:"addtime"},
]
let content = {content:res.data};
console.log(head_title)
that.title=head_title
that.goodtxt=content
that.model_id=54
},
error: function () {
}
});
});
unit_endowment_insurance.setOption(option3)
}
function personnel_arbitration(personnel,ecid="personnel_arbitration",font_size) {
let personnel_arbitration = echarts.init(document.getElementById(ecid));
/*清除画布*/
personnel_arbitration.clear();
var xData = [],
yData1 = [],
yData2 = [],
yData3 = [],
yData4 = [],
yData5 = [],
borderData = [],
legend = ["受理案件件数", "当期不予受理案件数", "结案数","涉案金额", "当期结案率"],
colorArr = [{
start: "rgba(0, 234, 255,",
end: "rgba(0, 234, 255)"
},
{
start: "rgba(2, 176, 206,",
end: "rgba(2, 176, 206)"
},
{
start: "rgba(29, 104, 146,",
end: "rgba(29, 104, 146)"
},
{
start: "rgba(255, 176, 63,",
end: "rgba(255, 176, 63)"
},
{
color: "#6BBB2D"
}
];
for(i in personnel){
xData[i]=personnel[i].quarter
yData1[i]=Number(personnel[i].content[0].num)
yData2[i]=Number(personnel[i].content[1].num)
yData3[i]=Number(personnel[i].content[2].num)
yData4[i]=Number(personnel[i].content[3].num)
yData5[i]=Number(personnel[i].content[4].num)
}
var normalColor = "#fff";
// var fontSize = 20;
let seriesData = [];
// var borderHeight = 4;
xData.forEach(element => {
// borderData.push(borderHeight);
});
[yData1, yData2, yData3, yData4,yData5].forEach((item, index) => {
var obj1 = {};
var obj2 = {};
if (index < 4) {
obj1 = {
name: legend[index],
type: "bar",
stack: legend[index],
data: item,
barWidth: "15%",
itemStyle: {
normal: {
fontSize: font_size/2,
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: colorArr[index].start + "1)"
},
{
offset: 0.5,
color: colorArr[index].start + "1)"
},
{
offset: 1,
color: colorArr[index].end
}
],
globalCoord: false
},
label: {
show: true, //开启显示
position: 'inside', //在上方显示
textStyle: { //数值样式
color: '#fff',
fontSize: font_size
}
}
}
}
};
obj2 = {
name: "",
type: "bar",
stack: legend[index],
itemStyle: {
normal: {
color: colorArr[index].start + "1)",
}
},
data: borderData
};
seriesData.push(obj1);
seriesData.push(obj2);
} else {
var obj3 = {
name: legend[index],
type: "line",
yAxisIndex: 1,
smooth: false,
symbol: "circle",
symbolSize: 10,
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: colorArr[index].color,
borderColor: "#fff",
borderWidth: 1
}
},
data: item,
label: {
normal: {
show: false
}
}
};
seriesData.push(obj3);
}
});
console.log(seriesData);
let option = {
grid: {
left: "8%",
top: "20%",
right: "20",
bottom: "2%",
containLabel: true
},
toolbox: {
show: true,
feature: {
dataView: {
show: true,
readOnly: false,
//增加导出Excel
lang: ['数据视图', '关闭', '导出Excel'],
contentToOption: function (opts) {
$("#tableExcel_Day").table2excel({
exclude: ".noExl", //过滤位置的 css 类名
filename: '表格' + ".xls", //文件名称
name: "Excel Document Name.xls",
exclude_img: true,
exclude_links: true,
exclude_inputs: true
});
},
//头部颜色
backgroundColor:"rgb(11, 79, 174,0.8)",
//按钮颜色
buttonColor:"#2a66b5",
//按钮字体颜色
buttonTextColor:'#fff',
//表格背景颜色
textareaBorderColor:"#2a66b5",
//表格字体颜色
textColor:'#fff',
optionToContent: function (opt) {
console.log(opt);
let opt_num=[]
for(key in opt.series){
if(key%2===0){
opt_num.push(opt.series[key])
}
}
console.log(opt_num);
var axisData = opt.xAxis[0].data; //坐标数据
var series = opt_num; //折线图数据
var tdHeads = '<td style="padding:5px 10px">季度</td>';
var tdBodys = ''; //表数据
//组装表头
var nameData = new Array("受理案件件数", "当期不予受理案件数", "结案数","涉案金额", "当期结案率");
for (var i = 0; i < nameData.length; i++) {
tdHeads += '<td style="padding: 5px 10px">' + nameData[i] + '</td>';
}
var table = '<table id="tableExcel_Day" class="echarts-table" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';
//组装表数据
var tableCount = [];
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series.length ; j++) {
var temp = series[j].data[i];
if (temp != null && temp != undefined) {
tdBodys += '<td>' + temp+ '</td>';
console.log(temp);
if (tableCount[j]) {
tableCount[j] +=temp;
} else {
tableCount[j] = temp;
}
} else {
tdBodys += '<td></td>';
}
}
table += '<tr><td style="padding: 5px 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
tdBodys = '';
}
console.log(tableCount);
let heji=''
for(k in tableCount){
heji+='<td>'+tableCount[k]+'</td>'
}
table += '<tr><td style="padding: 5px 10px">合计：</td>' + heji+ '</tr>';
table += '</tbody></table>';
// console.log(table);
return table;
}
},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {
show: true,
backgroundColor: '#073fa4f7'
}
},
iconStyle: {
borderColor: 'white'
}
},
legend: {
show: true,
icon: "rect",
itemWidth: Number(font_size),
itemHeight: Number(font_size),
x: 'center',
textStyle: {
color: "#fff",
fontSize:font_size,
},
data: legend
},
tooltip: {
trigger: "axis",
textStyle: {
fontSize:font_size,
},
formatter: function(params) {
var str = "";
for (var i = 0; i < params.length; i++) {
if (params[i].seriesName !== "") {
str +=
params[i].name +
":" +
params[i].seriesName +
params[i].value +
"<br/>";
}
}
return str;
}
},
xAxis: [{
type: "category",
data: xData,
axisPointer: {
type: "shadow"
},
axisLabel: {
textStyle: {
color: normalColor,
fontSize: font_size
}
},
axisLine: {
lineStyle: {
color: normalColor
}
},
axisTick: {
show: false
},
splitLine: {
show: false
}
}],
yAxis: [
{
type: "value",
name: "万元",
position: 'left',
nameTextStyle: {
color: normalColor,
fontSize: font_size
},
// "min": 0,
// "max": 50,
axisLabel: {
formatter: "{value}",
textStyle: {
color: normalColor,
fontSize: font_size
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false,
lineStyle: {
type: "dashed",
color: normalColor
}
}
},
{
type: "value",
name: "件数",
offset: 80,
position: 'left',
nameTextStyle: {
color: normalColor,
fontSize: font_size
},
// "min": 0,
// "max": 50,
axisLabel: {
formatter: "{value}",
textStyle: {
color: normalColor,
fontSize: font_size
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false,
lineStyle: {
type: "dashed",
color: normalColor
}
}
},
{
type: "value",
name: "%",
position: 'right',
nameTextStyle: {
color: normalColor,
fontSize: font_size
},
min: 0,
max: 100,
show:true,
axisLabel: {
formatter: "{value}",
textStyle: {
color: normalColor,
fontSize: font_size
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "rgba(255,255,255,0.2)"
}
}
}
],
//动画加载时长为3秒
animationDuration: 3000,
series: seriesData
};
personnel_arbitration.on('click', function (params) {
console.log(params);
let that=vm.$data
that.name = params.name;
console.log(params.name);
that.head="劳动人事争议仲裁情况"
//弹窗
$('#goodcover').show();
$('#middle_tab').fadeIn();
//动态加载弹窗距离
that.echarts_left=1200
that.dt_left = 1690;
that.dt_map=2270;
//锁定表格
that.table = true;
// 请求接口
$.ajax({
type: 'GET',
url:ajax_url,
data: {model_id:51,
},
dataType: 'JSON',
success: function (res) {
console.log("劳动人事",res);
let head_title=[];
fields = res.field;
for (key in fields) {
head_title.push({label:fields[key],property:key})
}
that.head_title_total=[
{label:"季度",property:"jidu"},
{label:"受理案件数",property:"slajs"},
{label:"结案数",property:"jieanshu"},
]
console.log(that.head_title_total);
let content = {content:res.data};
console.log(head_title)
that.title=head_title
that.goodtxt=content
that.model_id=51
},
error: function () {
}
});
});
personnel_arbitration.setOption(option)
}