分享幾個echarts複雜結構和圖例字型中數字顯示不同顏色
阿新 • • 發佈：2021-01-10
先看幾個效果圖：
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],
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)
}