let app = new Vue({
el: "#app",
data() {
return {
config5: {
waitTime: 2000,
rowNum: 4,
header: ["单位名称", "平均工资涨幅", ''],
data: [
["山焦财务", '-12%'],
["山焦担保", '4%'],
["山焦股份", '6%'],
["山焦国华", '20%'],
["山焦国华", '9%'],
["山焦财务", '-1%'],
["山焦担保", '4%'],
["山焦股份", '6%'],
["山焦国华", '20%'],
["山焦国华", '9%']
],
align: ["center", "center"],
headerBGC: "#153A62",
oddRowBGC: "#061F42",
evenRowBGC: "#0C284A",
},
config1: {
waitTime: 2000,
rowNum: 1,
data: [
["山焦财务", '-12%'],
["山焦担保", '4%'],
["山焦股份", '6%'],
["山焦国华", '20%'],
["山焦国华", '9%'],
["山焦财务", '-1%'],
["山焦担保", '4%'],
["山焦股份", '6%'],
["山焦国华", '20%'],
["山焦国华", '9%']
],
align: ["center", "center"],
oddRowBGC: "#3B9DEE",
evenRowBGC: "#1E5389",
},
configLast1: {
waitTime: 2000,
header: ["项目名称"],
rowNum: 2,
data: [
["大型矿井综合掘进机器人",],
["废弃矿山遗留资源及地下空间开发利用关键技术研究",],
["遗留难采煤炭资源安全绿色高回收率开采关键技术研究与示范",],
["山西煤炭资源高效保水开采技术与示范",],
["炼焦煤采洗配销一体化关键技术研究",],
["高瓦斯矿井110工法回采工作面瓦斯与自然发火共治关键技术示范研究",],
],
align: ["center", "center"],
headerBGC: "#153A62",
oddRowBGC: "#061F42",
evenRowBGC: "#0C284A",
},
configLast2: {
waitTime: 2000,
header: ["合作高校"],
rowNum: 2,
data: [
["太原理工大学",],
["北京大学",],
["安徽理工大学",],
["太原理工大学",],
["中国科学技术大学",],
["太原理工大学",],
["中国矿业大学",],
],
align: ["center", "center"],
headerBGC: "#153A62",
oddRowBGC: "#061F42",
evenRowBGC: "#0C284A",
},
configLast3: {
waitTime: 2000,
header: ["合作类型"],
rowNum: 2,
data: [
["国家重点研发计划项目",],
["山西省揭榜招标项目",],
["山西省科技重大专项",],
["山西省揭榜招标项目",],
["山西省重点研发项目",],
["山西省重点研发项目",],
],
align: ["center", "center"],
headerBGC: "#153A62",
oddRowBGC: "#061F42",
evenRowBGC: "#0C284A",
},
configLast4: {
waitTime: 2000,
header: ["主要成效"],
rowNum: 2,
data: [
["综合掘进机器人系统",],
["建立废弃矿山煤层气地面抽采和废弃矿山地下空间利用先导工程",],
["遗留难采煤炭资源赋存状况的全方位勘探新技术，超前注浆封堵新材料、新装置与新工艺。",],
["底板阻水性能评价方法体系，研发承压水突水机理与岩层改性再造技术，形成了一套高效承压水上采煤保水开采方案",],
["开展煤质检测和配煤技术研究，开发配煤模型及智能配煤算法",],
["解决了瓦斯超限问题",],
],
align: ["center", "center"],
headerBGC: "#153A62",
oddRowBGC: "#061F42",
evenRowBGC: "#0C284A",
},
configOrg: {
waitTime: 2000,
rowNum: 2,
data: [
["金融资本公司", '山焦担保', '组织划转', '2023-06-01'],
["山焦统配", '山焦统配', '组织新设', '2023-05-01'],
["汾西矿业集团", '灵石县富威橡胶', '组织更名', '2023-05-01'],
["焦煤置业", '海南科思实业有限公司', '组织停用', '2023-04-04'],
["西山煤电", '房城建安有限公司', '组织停用', '2023-04-01'],
["霍州煤电", '建筑建材公司', '组织停用', '2023-03-25'],
["霍州煤电", '设备租赁分公司', '组织停用', '2023-02-15'],
],
align: ["center", "center", "center", "center", "center"],
headerBGC: "#153A62",
oddRowBGC: "#061F42",
evenRowBGC: "#0C284A",
},
configChange: {
waitTime: 2000,
header: ["姓名", "调出单位", "调入单位", "调动时间", '变动状态', ""],
rowNum: 4,
data: [
["段树成", '山煤国际', '招标公司', '2023-07-04', '调动完成'],
["蒲立志", '焦煤置业', '山煤国际', '2023-07-01', '调动中'],
["侯利强", '霍州煤电', '西山煤电', '2023-07-01', '调动中'],
["王国明", '西山煤电', '华晋焦煤', '2023-06-19', '调动完成'],
["梁婧", '西山煤电', '物资装备公司', '2023-06-01', '调动完成'],
["赵越", '山煤国际', '招标公司', '2023-06-01', '调动完成'],
["董然", '西山煤电', '人力资源公司', '2023-06-01', '调动完成'],
["解红梅", '西山煤电', '投资公司', '2023-06-01', '调动完成'],
],
align: ["center", "center", "center", "center", "center"],
headerBGC: "#153A62",
oddRowBGC: "#061F42",
evenRowBGC: "#0C284A",
},
configMark: {
waitTime: 2000,
header: ["单位名称", "人员数量", "月份", "预警项", ""],
rowNum: 4,
data: [
["西山煤电", "71", "3月", "薪资低于4000元"],
["汾西矿业", "1896", "3月", "薪资低于4000元"],
["霍州煤电", "847", "3月", "薪资低于4000元"],
["山煤国际", "514", "3月", "薪资低于4000元"],
["华晋焦煤", "13", "3月", "薪资低于4000元"],
],
align: ["center", "center", "center", "center", "center"],
headerBGC: "#153A62",
oddRowBGC: "#061F42",
evenRowBGC: "#0C284A",
},
config2: {
waitTime: 2000,
header: ["单位名称", "已算薪组织", "未算薪组织", "算薪进度百分比", ""],
rowNum: 4,
data: [
["西山煤电", '290', '46', '86%'],
["汾西矿业", '10', '38', '21%'],
["霍州煤电", '314', '3', '99%'],
["山煤国际", '16', '35', '31%'],
["华晋焦煤", '7', '1', '87%'],
],
align: ["center", "center", "center", "center", "center"],
headerBGC: "#153A62",
oddRowBGC: "#061F42",
evenRowBGC: "#0C284A",
},
fIndex: 0,
fList: [
{
project: "大型矿井综合掘进机器人",
school: "太原理工大学, 北京大学",
type: "国家重点研发计划项目",
merits: "综合掘进机器人系统"
},
{
project: "废弃矿山遗留资源及地下空间开发利用关键技术研究",
school: "安徽理工大学，太原理工大学，中国科学技术大学",
type: "山西省揭榜招标项目",
merits: "建立废弃矿山煤层气地面抽采和废弃矿山地下空间利用先导工程"
},
{
project: "遗留难采煤炭资源安全绿色高回收率开采关键技术研究与示范",
school: "太原理工大学",
type: "山西省科技重大专项",
merits: "遗留难采煤炭资源赋存状况的全方位勘探新技术，超前注浆封堵新材料、新装置与新工艺。"
},
{
project: "山西煤炭资源高效保水开采技术与示范",
school: "中国矿业大学",
type: "山西省揭榜招标项目",
merits: "底板阻水性能评价方法体系，研发承压水突水机理与岩层改性再造技术，形成了一套高效承压水上采煤保水开采方案"
},
{
project: "炼焦煤采洗配销一体化关键技术研究",
school: "太原理工大学",
type: "山西省重点研发项目",
merits: "开展煤质检测和配煤技术研究，开发配煤模型及智能配煤算法"
},
{
project: "高瓦斯矿井110工法回采工作面瓦斯与自然发火共治关键技术示范研究",
school: "太原理工大学",
type: "山西省重点研发项目",
merits: "解决了瓦斯超限问题"
},
],
salaryFlag: false,
pdfFlag: true,
eChartsBig: undefined,
LineChart: undefined,
LineElse: undefined,
time2: undefined,
leftEcharts5: undefined,
mobilizeFL: undefined,
industry: {
x: ["矿井", "选煤厂", "火电厂", "清洁能源厂", "焦化厂"],
y: [151, 50, 6, 32, 4]
},
twoBar: undefined,
echartTwoList: {
x: ["回采", "掘进", "开拓工人", "运输", "机电", "通风安全", "安拆", "露天", "其他"],
y: [11556, 15008, 6073, 10562, 8492, 10776, 1553, 119, 3668]
},
echartTwoList2: {
x: ["煤炭洗选人员", "焦炭化工人员", "民爆人员", "金融人员", "煤炭销售人员"],
y: [10115, 6327, 2301, 104, 2604]
},
echartsTwoBar2: {
y: ["4940", "18170", "51812", "38430", '18329', '17745', '31827'],
x: ["5年以下", "6-10年", "11-15年", "16-20年", '21-25年', '26-30年', '30年以上']
},
echartsTwoBar1: {
y: ["15990", "38872", "35952", "27063", '31424', '26099', '11401'],
x: ["30岁以下", "31-35岁", "36-40岁", "41-45岁", '46-50岁', '51-55岁', '55岁以上']
},
// organizationList: {
// x: ["集团机构数", "共享中心数", "事业部数", "二级组织数", "三级组织数", "四级组织数"],
// y: [18, 12, 5, 22, 316, 496]
// },
orgIndex: 0,
organizationList: [
{
name: "集团机构数",
flag: true,
value: 18
}, {
name: "共享中心数",
flag: false,
value: 12
}, {
name: "事业部数",
flag: false,
value: 5
}, {
name: "二级单位数",
flag: false,
value: 22
}, {
name: "三级单位数",
flag: false,
value: 316
}, {
name: "四级单位数",
flag: false,
value: 496
},
],
twoIndex: 1,
time2: 1,
time3: 1,
time4: 1,
isShowMark: false,
changeFlag: false,
userFlag: true,
salaryIndex: 1,
sx: [],
xy: [],
fx: [],
fy1: [],
fy2: [],
fy3: [],
fy4: [],
fy5: [],
intervalL: undefined,
intervalR: undefined,
}
},
mounted() {
this.$nextTick(() => {
this.sx = spArr(salaryList.x, 8)
this.sy = spArr(salaryList.y, 8)
this.fx = spArr(mobilizeList.x, 8)
this.fy1 = spArr(mobilizeList.y1, 8)
this.fy2 = spArr(mobilizeList.y2, 8)
this.fy3 = spArr(mobilizeList.y3, 8)
this.fy4 = spArr(mobilizeList.y4, 8)
this.fy5 = spArr(mobilizeList.y5, 8)
// let organization = this.$refs.organization
// this.initOrganization(organization, "", this.organizationList)
let mobilize = this.$refs.mobilize
this.initEchartStack(mobilize, { x: this.fx[0], y1: this.fy1[0], y2: this.fy2[0], y3: this.fy3[0], y4: this.fy4[0], y5: this.fy5[0] })
let industry = this.$refs.industry
this.initOrganizationElse(industry, "", this.industry, "")
let sequence = this.$refs.sequence
this.initBarEcharts(sequence, { x: ["管理序列", "技术序列", "操作序列"], y1: [34242, 18547, 134012], y2: [28993, 19411, 126807] }, ["当前数", "同期数"])
let serviceAge = this.$refs.serviceAge
this.initLineEcharts(serviceAge, this.echartsTwoBar1)
let level = this.$refs.level
this.initLineElseEcharts(level, levelList)
let initChartR1 = this.$refs.initChartR1
this.initChartR1(initChartR1)
let initChartsBig = this.$refs.initChartsBig
this.initChartsBig(initChartsBig)
let leftEnd = this.$refs.leftEnd
this.initBarEchartsElse(leftEnd, leftEndList, ["累计平均工资", "同期累计平均工资"])
let echarts90 = this.$refs.echarts90
this.initLineElseEchartsR(echarts90, { x: this.sx[0], y: this.sy[0] })
let student = this.$refs.student
this.initEchartsBar(student, schoolList,)
let works = this.$refs.works
this.initBarCharts(works, worksList)
let efficiency = this.$refs.efficiency
this.initBarChartsElse(efficiency, efficiencyList, "吨/工", { name: "行业线", value: 8.2 })
let whole = this.$refs.whole
this.initBarChartsElse(whole, wholeList, "吨/人", { name: "标杆矿井线", value: 1800 })
let buffer = this.$refs.buffer
this.initStereoscopic(buffer, userList)
// let share = this.$refs.share
// this.initHorizontalBar(share)
let el = this.$refs.container
this.initProvinceChart(el)
let echartTwo = this.$refs.echartTwo
this.initTwoBarEcharts(echartTwo, this.echartTwoList)
this.timeNs()
this.timePractice()
this.timeSy()
setInterval(_ => {
if (this.fIndex == this.fList.length - 1) {
this.fIndex = 0
} else {
this.fIndex = this.fIndex + 1
}
this.organizationList.forEach(item => {
item.flag = false
})
if (this.orgIndex == this.organizationList.length - 1) {
this.orgIndex = 0
} else {
this.orgIndex = this.orgIndex + 1
}
this.organizationList[this.orgIndex].flag = true
}, 2000)
})
},
methods: {
// 针对学历结构的定时器
timeNs() {
let that = this;
this.time2 = setInterval(() => {
this.time2 && clearInterval(this.time2);
this.timeNs();
that.leftEcharts5.dispose();
let initChartsBig = that.$refs.initChartsBig
that.initChartsBig(initChartsBig)
}, 15000);
},
timeSy() {
let that = this;
this.time4 = setInterval(() => {
this.time4 && clearInterval(this.time4);
this.timeSy();
that.LineElse.dispose();
that.mobilizeFL.dispose();
let echarts90 = this.$refs.echarts90
let mobilize = this.$refs.mobilize
if (that.salaryIndex == that.sx.length) {
that.salaryIndex = 0
}
this.initEchartStack(mobilize, { x: this.fx[that.salaryIndex], y1: this.fy1[that.salaryIndex], y2: this.fy2[that.salaryIndex], y3: this.fy3[that.salaryIndex], y4: this.fy4[that.salaryIndex], y5: this.fy5[that.salaryIndex] })
this.initLineElseEchartsR(echarts90, { x: that.sx[that.salaryIndex], y: that.sy[that.salaryIndex] })
that.salaryIndex += 1
}, 15000);
},
// 针对从业人员类别的定时器
timePractice() {
let that = this;
this.time3 = setInterval(() => {
this.time3 && clearInterval(this.time3);
this.timePractice();
that.twoBar.dispose();
that.LineChart.dispose();
let echartTwo = that.$refs.echartTwo
let serviceAge = that.$refs.serviceAge
if (that.twoIndex == 1) {
that.initTwoBarEcharts(echartTwo, that.echartTwoList)
that.initLineEcharts(serviceAge, that.echartsTwoBar1)
that.twoIndex = 2
} else {
that.initTwoBarEcharts(echartTwo, that.echartTwoList2)
that.initLineEcharts(serviceAge, that.echartsTwoBar2)
that.twoIndex = 1
}
this.userFlag = !this.userFlag
}, 15000);
},
initOrganization(el, title = "", data = { x: ["集团本部", "山焦财务", "山焦担保", "山焦股份", "山焦国华", "山焦机电", "山焦人力", "山焦民爆", "山焦事业", "山焦投资"], y: [0, 680, 562, 268, 717, 843, 987, 126, 723, 569] }, unit = "") {
let chart = echarts.init(el);
let option = {
grid: {
top: 25,
right: 15,
left: "15%",
bottom: "27%",
},
grid: {
top: 30,
right: 20,
left: 105,
bottom: 40,
},
tooltip: {
show: true,
trigger: "axis",
textStyle: {
fontSize: 30,
color: '#A3E2F4'
},
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
xAxis: {
data: data.x,
axisTick: {
show: false,
},
// x轴的字体颜色
axisLabel: {
interval: 0,
// rotate: 40,
textStyle: {
color: "white",
fontSize: 26,
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
},
yAxis: {
name: unit,
type: "log",
axisTick: {
lineStyle: {
color: "#18416F",
},
},
// y轴的字体颜色
axisLabel: {
textStyle: {
color: "white",
fontSize: 20,
},
},
nameTextStyle: {
fontSize: 20,
},
splitLine: {
show: true,
lineStyle: {
color: "#204561",
width: 1,
type: "dotted",
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
},
series: [
{
name: "",
type: "line",
smooth: true,
showSymbol: true, // 节点长显
symbol: 'image://' + 'data:image/png;base64,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',
symbolSize: 30,
data: data.y,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#40A9FF",
},
{
offset: 1,
color: "#051F41",
},
],
false
),
},
},
itemStyle: {
normal: {
color: "#40A9FF",
},
},
lineStyle: {
normal: {
width: 2,
},
},
}
],
};
let that = this;
chart.setOption(option);
chart.on('click', function (param) {
that.isShowMark = true
that.salaryFlag = false
that.pdfFlag = true
})
tools.loopShowTooltip(chart, option, {
nterval: 2000,
loopSeries: true,
});
},
initOrganizationElse(el, title = "", data = { x: ["集团本部", "山焦财务", "山焦担保", "山焦股份", "山焦国华", "山焦机电", "山焦人力", "山焦民爆", "山焦事业", "山焦投资"], y: [0, 680, 562, 268, 717, 843, 987, 126, 723, 569] }, unit = "") {
let chart = echarts.init(el);
let option = {
title: {
show: false,
top: 5,
left: "center",
text: title,
textStyle: {
color: "#5EB7FF",
fontWeight: "normal",
fontSize: 32
}
},
grid: {
top: 50,
right: 40,
left: 105,
bottom: 40,
},
tooltip: {
show: true,
trigger: "axis",
textStyle: {
fontSize: 30,
color: '#A3E2F4'
},
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
formatter: "{c}"
},
xAxis: {
data: data.x,
axisTick: {
show: false,
},
// x轴的字体颜色
axisLabel: {
interval: 0,
// rotate: 40,
textStyle: {
color: "white",
fontSize: 26,
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
},
yAxis: {
name: unit,
axisTick: {
lineStyle: {
color: "#18416F",
},
},
// y轴的字体颜色
axisLabel: {
textStyle: {
color: "white",
fontSize: 20,
},
},
nameTextStyle: {
fontSize: 20,
color: "white",
},
splitLine: {
show: true,
lineStyle: {
color: "#204561",
width: 1,
type: "dotted",
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
},
series: [
{
name: "",
type: "bar",
data: data.y,
showBackground: true,
backgroundStyle: {
color: "#18416F",
},
barWidth: "20%",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#02355C",
}, //柱图渐变色
{
offset: 1,
color: "#40A9FF",
},
]),
},
}
],
legend: {
data: ["入池人数", "出池人数"],
textStyle: {
// 图列内容样式
color: "#fff", // 字体颜色
// fontSize: "10",
},
right: 30,
icon: "roundRect",
// 小图标的宽高
itemHeight: 5,
},
};
let that = this;
chart.setOption(option);
tools.loopShowTooltip(chart, option, {
nterval: 2000,
loopSeries: true,
});
},
initLineEcharts(el, data) {
if (this.intervalL != undefined) {
clearInterval(this.intervalL)
}
this.LineChart = echarts.init(el);
let index = 0;
let dataList = this.changeOnIndex(data.y, index);
let option = {
grid: {
top: 25,
right: 15,
left: "15%",
bottom: "27%",
},
tooltip: {
show: true,
trigger: "axis",
textStyle: {
fontSize: 30,
color: '#A3E2F4'
},
axisPointer: {
lineStyle: {
color: "#ddd",
},
},
formatter: "{c}"
},
legend: {
textStyle: {
// 图列内容样式
color: "#fff", // 字体颜色
// fontSize: "10",
},
right: 30,
icon: "roundRect",
// 小图标的宽高
itemHeight: 5
},
xAxis: {
type: "category",
data: data.x,
boundaryGap: false,
splitLine: {
show: false,
interval: "auto",
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#7ECEF4",
},
},
axisLabel: {
interval: 0,
rotate: 25,
textStyle: {
fontSize: 26,
color: "#fff",
},
},
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#204561",
width: 1,
type: "dotted",
},
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#7ECEF4",
},
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 20,
color: "#fff",
},
},
},
series: [
{
name: "",
type: "line",
smooth: false,
showSymbol: true, // 节点长显
data: dataList,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#45DAD1",
},
{
offset: 1,
color: "#051F41",
},
],
false
),
},
},
itemStyle: {
normal: {
color: "#45DAD1",
},
},
lineStyle: {
normal: {
width: 2,
},
},
}
],
};
this.intervalL = setInterval(() => {
index = index + 1
if (index == data.y.length) {
index = 0
}
dataList = this.changeOnIndex(data.y, index);
this.LineChart.setOption({
series: [{
type: 'line',
data: dataList
}]
});
}, 2000)
this.LineChart.setOption(option);
tools.loopShowTooltip(this.LineChart, option, {
nterval: 2000,
loopSeries: true,
});
},
changeOnIndex(arr = [], i = 0) {
let dataY = []
arr.forEach((item, index) => {
let obj;
if (index == i) {
obj = {
value: item,
symbolSize: 50,
symbol: 'image://' + 'data:image/png;base64,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',
}
} else {
obj = {
value: item,
symbolSize: 30,
symbol: 'image://' + 'data:image/png;base64,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'
}
}
dataY.push(obj)
})
return dataY
},
initLineElseEcharts(el, data) {
let chart = echarts.init(el);
let index = 0;
let dataList = this.changeOnIndex(data.y, index);
let option = {
grid: {
top: 25,
right: 15,
left: "15%",
bottom: "27%",
},
tooltip: {
show: true,
trigger: "axis",
textStyle: {
fontSize: 30,
color: '#A3E2F4'
},
axisPointer: {
type: "none",
lineStyle: {
color: "#ddd",
},
},
formatter: "{c}"
},
legend: {
textStyle: {
// 图列内容样式
color: "#fff", // 字体颜色
// fontSize: "10",
},
right: 30,
icon: "roundRect",
// 小图标的宽高
itemHeight: 5
},
xAxis: {
type: "category",
data: data.x,
boundaryGap: false,
splitLine: {
show: false,
interval: "auto",
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#7ECEF4",
},
},
axisLabel: {
interval: 0,
rotate: 40,
margin: 10,
textStyle: {
fontSize: 26,
color: "#fff",
},
},
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#204561",
width: 1,
type: "dotted",
},
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#7ECEF4",
},
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 20,
color: "#fff",
},
},
},
series: [
{
name: "",
type: "line",
smooth: false,
showSymbol: true, // 节点长显
data: dataList,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#40A9FF",
},
{
offset: 1,
color: "#051F41",
},
],
false
),
},
},
itemStyle: {
normal: {
color: "#40A9FF",
},
},
emphasis: {
itemStyle: {
color: '#d4bc1d',
symbol: 'image://' + 'data:image/png;base64,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',
},
},
lineStyle: {
normal: {
width: 2,
},
},
}
],
};
setInterval(() => {
index = index + 1
if (index == data.y.length) {
index = 0
}
dataList = this.changeOnIndex(data.y, index);
chart.setOption({
series: [{
type: 'line',
data: dataList
}]
});
}, 2000)
chart.setOption(option);
tools.loopShowTooltip(chart, option, {
nterval: 3000,
loopSeries: true,
});
},
initLineElseEchartsR(el, data) {
if (this.intervalR != undefined) {
clearInterval(this.intervalR)
}
this.LineElse = echarts.init(el);
let index = 0;
let dataList = this.changeOnIndex(data.y, index);
let option = {
grid: {
top: 15,
right: "5%",
left: "5%",
bottom: "22%",
},
tooltip: {
show: true,
trigger: "axis",
textStyle: {
fontSize: 30,
color: '#A3E2F4'
},
axisPointer: {
lineStyle: {
color: "#ddd",
},
},
formatter: "{c} %"
},
legend: {
textStyle: {
// 图列内容样式
color: "#fff", // 字体颜色
// fontSize: "10",
},
right: 30,
icon: "roundRect",
// 小图标的宽高
itemHeight: 5
},
xAxis: {
type: "category",
data: data.x,
boundaryGap: false,
splitLine: {
show: false,
interval: "auto",
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#7ECEF4",
},
},
axisLabel: {
interval: 0,
textStyle: {
fontSize: 26,
color: "#fff",
},
},
},
yAxis: {
type: "value",
min: 80,
max: 100,
splitNumber: 3,
interval: 10,
splitLine: {
show: true,
lineStyle: {
color: "#204561",
width: 1,
type: "dotted",
},
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#7ECEF4",
},
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 20,
color: "#fff",
},
},
},
series: [
{
name: "",
type: "line",
smooth: false,
showSymbol: true, // 节点长显
data: dataList,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#40A9FF",
},
{
offset: 1,
color: "#051F41",
},
],
false
),
},
},
itemStyle: {
normal: {
color: "#40A9FF",
},
},
lineStyle: {
normal: {
width: 2,
},
},
}
],
};
this.intervalR = setInterval(() => {
index = index + 1
if (index == data.y.length) {
index = 0
}
dataList = this.changeOnIndex(data.y, index);
this.LineElse.setOption({
series: [{
type: 'line',
data: dataList
}]
});
}, 2000)
this.LineElse.setOption(option);
tools.loopShowTooltip(this.LineElse, option, {
nterval: 2000,
loopSeries: true,
});
},
initChartR1(el) {
let myChart = echarts.init(el)
let objData = {}
echarts2.forEach(item => {
objData[item.name] = item.value
})
let option = {
tooltip: {
show: true,
trigger: "item",
textStyle: {
fontSize: 30,
color: '#A3E2F4'
},
axisPointer: {
lineStyle: {
color: "#ddd",
},
},
formatter: "{b} : {c}({d}%)"
},
legend: {
top: 'center',
orient: 'vertical',
left: '60%',
textStyle: {
fontSize: 30,
color: '#9DB9EB',
},
formatter: function (name) {
return (
"{title|" + name + "} {value|" + objData[name] + "} {title|人}"
);
},
textStyle: {
rich: {
title: {
fontSize: 26,
lineHeight: 50,
color: "#fff",
},
value: {
fontSize: 26,
fontWeight: "bolder",
lineHeight: 50,
color: "#FFAD05",
},
},
},
},
graphic: {
elements: [{
type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
style: {
image: './images/pie-back.png', //这里添加图片地址
width: 120,
height: 120
},
left: '30%',//
top: 'middle' //配置图片居中
}]
},
series: [
{
name: '',
type: 'pie',
radius: ['40%', '50%'],
center: ["37%", "50%"],
labelLine: {
normal: {
show: false,
length: 20,
length2: 55
},
emphasis: {
show: false
}
},
label: {
normal: {
show: false,
formatter: "{b}",
textStyle: {
fontSize: 28,
},
position: 'outside'
},
emphasis: {
show: false
}
},
data: echarts2,
itemStyle: {
normal: {
color: function (colors) {
var colorList = [
"#eeee36", "#6336df", "#2edb8e", "#44cdf3", "#fcbf45"
];
return colorList[colors.dataIndex];
}
},
}
},
],
}
myChart.setOption(option)
tools.loopShowTooltip(myChart, option, {
nterval: 2000,
loopSeries: true,
});
},
initChartsBig(el) {
this.leftEcharts5 = echarts.init(el);
let option = {
color: ["#eeee36", "#6336df", "#4fb7c0", "#44cdf3", "#fcbf45"],
grid: {
left: -100,
top: 50,
bottom: 10,
right: 10,
containLabel: true
},
tooltip: {
trigger: 'item',
textStyle: {
fontSize: 30,
color: '#A3E2F4'
},
formatter: "{b} : {c} ({d}%)"
},
legend: {
show: false,
type: "scroll",
orient: "vartical",
// x: "right",
top: "center",
right: "10",
// bottom: "0%",
itemWidth: 30,
itemHeight: 12,
itemGap: 16,
textStyle: {
color: '#A3E2F4',
fontSize: 30,
fontWeight: 0
},
data: ['研究生及以上', '大学', '大专', '中专、技校', '初中及以下']
},
polar: {},
angleAxis: {
interval: 1,
type: 'category',
data: [],
z: 10,
axisLine: {
show: false,
lineStyle: {
color: "#0B4A6B",
width: 1,
type: "solid"
},
},
axisLabel: {
interval: 0,
show: true,
color: "#0B4A6B",
margin: 8,
fontSize: 16
},
},
radiusAxis: {
min: 40,
max: 120,
interval: 20,
axisLine: {
show: false,
lineStyle: {
color: "#0B3E5E",
width: 1,
type: "solid"
},
},
axisLabel: {
formatter: '{value} %',
show: false,
padding: [0, 0, 20, 0],
color: "#0B3E5E",
fontSize: 26,
},
splitLine: {
lineStyle: {
color: "#0B3E5E",
width: 2,
type: "solid"
}
}
},
calculable: true,
series: [{
type: 'pie',
radius: ["5%", "10%"],
hoverAnimation: false,
labelLine: {
normal: {
show: false,
length: 30,
length2: 55
},
emphasis: {
show: false
}
},
data: [{
name: '',
value: 0,
tooltip: { show: false },
itemStyle: {
normal: {
color: "#0B4A6B"
}
}
}]
}, {
type: 'pie',
radius: ["90%", "95%"],
hoverAnimation: false,
labelLine: {
normal: {
show: false,
length: 30,
length2: 55
},
emphasis: {
show: false
}
},
name: "",
data: [{
name: '',
value: 0,
tooltip: { show: false },
itemStyle: {
normal: {
color: "#0B4A6B"
}
}
}]
}, {
stack: 'a',
type: 'pie',
// radius: ['20%', '80%'],
// roseType: 'area',
zlevel: 10,
label: {
normal: {
show: true,
formatter: "{b}",
textStyle: {
fontSize: 28,
},
position: 'outside'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true,
length: 10,
length2: 55
},
emphasis: {
show: false
}
},
data: [{
value: 3103,
name: '研究生及以上'
},
{
value: 42543,
name: '大学'
},
{
value: 46669,
name: '大专'
},
{
value: 69437,
name: '中专、技校'
},
{
value: 25049,
name: '初中及以下'
}
]
},]
}
this.leftEcharts5.setOption(option, {
notMerge: true,
notMerge: false,
});
tools.loopShowTooltip(this.leftEcharts5, option, {
nterval: 2000,
loopSeries: true,
});
},
initBarCharts(el, data) {
let chart = echarts.init(el);
var option = {
tooltip: { //提示框组件
trigger: 'axis',
formatter: '{b}
{a0}: {c0}
{a1}: {c1}',
textStyle: {
fontSize: 30,
color: '#A3E2F4'
},
axisPointer: {
type: 'shadow',
label: {
backgroundColor: '#6a7985'
}
},
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 30,
}
},
grid: {
left: '9%',
right: '15%',
bottom: '10%',
top: 50,
},
legend: {//图例组件，颜色和名字
right: 10,
top: 0,
itemGap: 16,
itemWidth: 18,
itemHeight: 10,
data: [
{
name: '目标值',
}, {
name: '实际值',
//icon:'image://../wwwroot/js/url2.png', //路径
}
],
textStyle: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 30,
}
},
xAxis: [
{
type: 'category',
boundaryGap: true,//坐标轴两边留白
data: data.x,
axisLabel: { //坐标轴刻度标签的相关设置。
interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
margin: 15,
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 26,
}
},
axisTick: {//坐标轴刻度相关设置。
show: false,
},
axisLine: {//坐标轴轴线相关设置
lineStyle: {
color: '#fff',
opacity: 0.2
}
},
splitLine: { //坐标轴在 grid 区域中的分隔线。
show: false,
}
}
],
yAxis: [
{
name: "万元/人",
type: 'value',
splitNumber: 5,
axisLabel: {
textStyle: {
color: '#FFF',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 20,
}
},
nameTextStyle: {
color: "#a8aab0",
fontSize: 30
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false,
lineStyle: {
color: ['#fff'],
}
}
}
],
series: [
{
name: '目标值',
type: 'bar',
data: data.y2,
barWidth: 20,
barGap: 0.2,//柱间距离
label: {//图形上的文本标签
normal: {
show: false,
position: 'top',
textStyle: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 30,
},
},
},
itemStyle: {//图形样式
normal: {
barBorderRadius: [10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#9e65ea',
},
{
offset: 1,
color: '#051F41',
}], false),
},
},
},
{
name: '实际值',
type: 'bar',
data: data.y1,
barWidth: 20,
barGap: 0,//柱间距离
label: {//图形上的文本标签
normal: {
show: false,
position: 'top',
textStyle: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 30,
},
},
},
itemStyle: {//图形样式
normal: {
barBorderRadius: [10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1, color: '#051F41'
}, {
offset: 0, color: '#84fab0'
}], false),
},
},
markLine: {
symbol: ['none'],
silent: true,
data: [{
yAxis: 15.3,
name: "社会劳动生产率",
lineStyle: {
normal: {
type: "dashed",
width: 3,
color: '#0bff68'
}
},
label: {
show: true,
distance: 20,
fontWeight: "lighter",
formatter: "社会劳动生产率",
},
}, {
yAxis: 50.8,
lineStyle: {
normal: {
type: "dashed",
width: 3,
color: 'rgb(0, 255, 242)'
}
},
label: {
show: true,
distance: 20,
fontWeight: "lighter",
formatter: "省属企业平均劳动生产率",
},
}, {
yAxis: 69.2,
lineStyle: {
normal: {
type: "dashed",
width: 3,
color: '#f9d423'
}
},
label: {
show: true,
distance: 20,
fontWeight: "lighter",
formatter: "央企平均劳动生产率",
},
},]
},
}
]
};
chart.setOption(option);
tools.loopShowTooltip(chart, option, {
nterval: 2000,
loopSeries: true,
});
},
initBarChartsElse(el, data, name, lineInfo) {
let chart = echarts.init(el);
var option = {
tooltip: { //提示框组件
trigger: 'axis',
formatter: '{b}
{a0}: {c0}
{a1}: {c1}',
textStyle: {
fontSize: 30,
color: '#A3E2F4'
},
axisPointer: {
type: 'shadow',
label: {
backgroundColor: '#6a7985'
}
},
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 30,
}
},
grid: {
left: '10%',
right: '15%',
bottom: '10%',
top: 50,
},
legend: {//图例组件，颜色和名字
right: 10,
top: 0,
itemGap: 16,
itemWidth: 18,
itemHeight: 10,
data: [
{
name: '目标值',
}, {
name: '实际值',
//icon:'image://../wwwroot/js/url2.png', //路径
}
],
textStyle: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 30,
}
},
xAxis: [
{
type: 'category',
boundaryGap: true,//坐标轴两边留白
data: data.x,
axisLabel: { //坐标轴刻度标签的相关设置。
interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
margin: 15,
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 26,
}
},
axisTick: {//坐标轴刻度相关设置。
show: false,
},
axisLine: {//坐标轴轴线相关设置
lineStyle: {
color: '#fff',
opacity: 0.2
}
},
splitLine: { //坐标轴在 grid 区域中的分隔线。
show: false,
}
}
],
yAxis: [
{
name,
type: 'value',
splitNumber: 5,
axisLabel: {
textStyle: {
color: '#FFF',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 20,
}
},
nameTextStyle: {
color: "#a8aab0",
fontSize: 30
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false,
lineStyle: {
color: ['#fff'],
}
}
}
],
series: [
{
name: '目标值',
type: 'bar',
data: data.y2,
barWidth: 20,
barGap: 0,//柱间距离
label: {//图形上的文本标签
normal: {
show: false,
position: 'top',
textStyle: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 30,
},
},
},
itemStyle: {//图形样式
normal: {
barBorderRadius: [10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#9e65ea',
},
{
offset: 1,
color: '#051F41',
}], false),
},
},
},
{
name: '实际值',
type: 'bar',
data: data.y1,
barWidth: 20,
barGap: 0,//柱间距离
label: {//图形上的文本标签
normal: {
show: false,
position: 'top',
textStyle: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 30,
},
},
},
itemStyle: {//图形样式
normal: {
barBorderRadius: [10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1, color: '#051F41'
}, {
offset: 0, color: '#84fab0'
}], false),
},
},
markLine: {
symbol: ['none'],
silent: true,
data: [{
yAxis: lineInfo.value,
name: lineInfo.name,
lineStyle: {
normal: {
type: "dashed",
width: 3,
color: 'rgb(0, 255, 242)'
}
},
label: {
show: true,
distance: 20,
fontWeight: "lighter",
formatter: lineInfo.name,
},
}]
},
}
]
};
chart.setOption(option);
tools.loopShowTooltip(chart, option, {
nterval: 2000,
loopSeries: true,
});
},
initBarEcharts(el, data, nameList) {
let chart = echarts.init(el);
var scale = 2;
var singleData = data.y1;
var multipleData = data.y2;
var color = "#fff";
option = {
tooltip: {
show: true,
trigger: 'axis',
textStyle: {
fontSize: 30,
color: '#A3E2F4'
},
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: nameList,
align: 'left',
itemGap: 50,
// x: 'right',
right: '1%',
y: '1%',
icon: 'rect',
itemWidth: 15 * scale, // 图例图形宽度
itemHeight: 15 * scale, // 图例图形高度
textStyle: {
color: "#3fdaff",
fontSize: 16 * scale
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
textStyle: {
fontSize: 30,
color: '#A3E2F4'
},
xAxis: [{
type: 'category',
data: data.x,
axisLabel: {
// inside: true,
padding: [15, 0, 0, 0],
textStyle: {
color: "#fff",
fontSize: 26,
}
},
axisTick: {
inside: true,
length: 8 * scale,
lineStyle: {
color: color,
}
},
axisLine: {
lineStyle: {
color: color,
}
},
splitLine: {
lineStyle: {
color: 'rgba(80,224,255,0.3)',
type: 'dashed'
}
}
}],
yAxis: [{
type: 'value',
axisLabel: {
// inside: true,
padding: [0, 15, 0, 0],
textStyle: {
color: color,
fontSize: 20,
}
},
axisTick: {
lineStyle: {
color: color,
}
},
axisLine: {
lineStyle: {
color: color,
}
},
splitLine: {
lineStyle: {
color: '#fff',
type: 'dashed'
},
show: false,
},
nameTextStyle: {
color: "#fff",
fontSize: 16 * scale,
padding: [0, 0, 10, 0]
}
}],
series: [{
name: nameList[0],
type: 'bar',
barWidth: '15%',
barGap: '40%',
itemStyle: {
normal: {
color: 'rgba(94,218,255,0.4)',
}
},
data: singleData
},
{
name: nameList[1],
type: 'bar',
barWidth: '15%',
barGap: '40%',
itemStyle: {
normal: {
color: '#ffc72b',
}
},
data: multipleData
}]
};
chart.setOption(option);
tools.loopShowTooltip(chart, option, {
nterval: 2000,
loopSeries: true,
});
},
initBarEchartsElse(el, data, nameList) {
let chart = echarts.init(el);
var scale = 2;
var singleData = data.y1;
var multipleData = data.y2;
var color = "#fff";
option = {
textStyle: {
fontSize: 30,
color: '#A3E2F4'
},
tooltip: {
show: true,
trigger: 'axis',
textStyle: {
fontSize: 30,
color: '#A3E2F4'
},
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: '{b}
{a0}: {c0}
{a1}: {c1}',
},
legend: {
data: nameList,
align: 'left',
itemGap: 50,
// x: 'right',
right: '1%',
y: '1%',
icon: 'rect',
textStyle: {
color: "#3fdaff",
fontSize: 20
}
},
grid: {
top: "10%",
left: '5%',
right: '4%',
bottom: '20%',
},
xAxis: [{
type: 'category',
data: data.x,
axisLabel: {
// inside: true,
rotate: 30,
padding: [15, 0, 0, 0],
textStyle: {
color: "#fff",
fontSize: 26,
}
},
axisTick: {
inside: true,
length: 8 * scale,
lineStyle: {
color: color,
}
},
axisLine: {
lineStyle: {
color: color,
}
},
splitLine: {
lineStyle: {
color: 'rgba(80,224,255,0.3)',
type: 'dashed'
}
}
}],
yAxis: [{
type: 'value',
axisLabel: {
// inside: true,
padding: [0, 15, 0, 0],
textStyle: {
color: color,
fontSize: 20,
}
},
axisTick: {
lineStyle: {
color: color,
}
},
axisLine: {
lineStyle: {
color: color,
}
},
splitLine: {
lineStyle: {
color: '#fff',
type: 'dashed'
},
show: false,
},
nameTextStyle: {
color: "#fff",
fontSize: 16 * scale,
padding: [0, 0, 10, 0]
}
}],
series: [{
name: nameList[0],
type: 'line',
itemStyle: {
normal: {
color: 'rgba(94,218,255,0.4)',
}
},
label: {
show: false,
position: "top",
align: "center",
},
data: singleData
},
{
name: nameList[1],
type: 'bar',
barWidth: '15%',
barGap: '40%',
label: {
show: false,
position: "top",
align: "center",
},
itemStyle: {
normal: {
color: '#ffc72b',
}
},
data: multipleData
}, {
name: nameList[0],
type: 'bar',
barWidth: '15%',
barGap: '40%',
itemStyle: {
normal: {
color: 'rgba(94,218,255,0.4)',
}
},
label: {
show: false,
position: "top",
align: "center",
},
data: singleData
},]
};
chart.setOption(option);
tools.loopShowTooltip(chart, option, {
nterval: 2000,
loopSeries: true,
});
},
initStereoscopic(el, data) {
let chart = echarts.init(el);
option = {
tooltip: {
show: true,
trigger: 'axis',
textStyle: {
fontSize: 30,
color: '#A3E2F4'
},
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
top: 30,
bottom: 30,
left: 90,
right: 90,
textStyle: {
color: "#fff"
}
},
legend: {
icon: 'circle',
right: '4%',
top: '4%',
textStyle: {
color: '#fff',
fontSize: 26
},
data: ['缓冲池', '待岗池', '共享池']
},
calculable: true,
xAxis: [{
type: "category",
axisLine: {
lineStyle: {
color: '#fff'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
splitArea: {
show: false
},
axisLabel: {
// inside: true,
textStyle: {
color: "#fff",
fontSize: 26,
}
},
data: data.x,
}],
yAxis: [{
type: "value",
splitLine: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#fff'
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "#fff",
fontSize: 26,
}
},
splitArea: {
show: false
},
// data: ['中止合同人员', '双创人员', '考核待岗人员'],
}],
series: [{
name: "缓冲池",
type: "bar",
stack: "value",
barMaxWidth: 15,
barGap: "10%",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FF9915'
}, {
offset: 1,
color: 'rgba(245,221,111,0)'
}]),
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FF9915'
}, {
offset: 1,
color: 'rgba(245,221,111,0)'
}]),
}
},
data: data.y1,
},
{
name: "待岗池",
type: "bar",
stack: "value",
barMaxWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#9e65ea'
}, {
offset: 1,
color: 'rgba(24,191,207,0)'
}]),
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#9e65ea'
}, {
offset: 1,
color: 'rgba(24,191,207,0)'
}]),
}
},
data: data.y2
},
{
name: "共享池",
type: "bar",
stack: "value",
barMaxWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(24,191,207,1)'
}, {
offset: 1,
color: 'rgba(24,191,207,0)'
}]),
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(24,191,207,1)'
}, {
offset: 1,
color: 'rgba(24,191,207,0)'
}]),
}
},
data: data.y3
},
]
}
chart.setOption(option);
tools.loopShowTooltip(chart, option, {
nterval: 2000,
loopSeries: true,
});
},
initHorizontalBar(el) {
let chart = echarts.init(el);
var bg =
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARYAAAAUCAMAAAB/LOLCAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRFAABwAAAAAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwrxv9agAAABV0Uk5T/wA1p053q7yaZs0QRIlVJ++IId4ydKfDYQAAAFtJREFUeJzt0McNwDAQwLBzutPb/rMG/gbawOIIjCQQqYtoqxYxckv1BlvQZAvabEG9LSjbgnZb0GoLOV9byHPbQubFFjLaggZb0GQLumxBvS0ol5aj0U9pEfgA+DsJLXE1TzAAAAAASUVORK5CYII=';
var bar =
'image://data:image/png;base64,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';
var data = [10, 15];
var barWidth = 20;
var maxNum = 0;
for (var i = 0; i < data.length; i++) {
if (data[i] > maxNum) {
maxNum = data[i];
}
}
option = {
grid: {
top: '10%',
left: '20%',
right: '15%',
bottom: '0%',
},
xAxis: {
show: false,
},
yAxis: {
data: ["共享队伍", "共享单位"],
splitLine: {
show: false,
},
axisLabel: {
textStyle: { fontSize: 20, color: '#fff' },
},
axisLine: {
show: false,
},
axisTick: false,
},
series: [
{
type: 'pictorialBar',
barWidth: barWidth,
zlevel: 2,
data: data.map(function (item) {
return {
value: item,
symbol: bar,
};
}),
},
{
type: 'pictorialBar',
barWidth: barWidth,
data: data.map(function (item) {
return {
realValue: item,
value: maxNum,
symbol: bg,
};
}),
label: {
show: true,
position: 'right',
distance: 150,
align: "right",
formatter: function (params) {
console.log(params);
if (params.name != "共享队伍") {
return params.data.realValue + ' 个';
} else {
return params.data.realValue + ' 支';
}
},
color: '#fff',
fontSize: 35,
},
},
],
};
chart.setOption(option);
tools.loopShowTooltip(chart, option, {
nterval: 2000,
loopSeries: true,
});
},
initProvinceChart(el, mapData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]) {
var data = [
{
name: '大同市',
value: mapData[0].value,
value2: mapData[0].value
},
{
name: '朔州市',
value: mapData[1].value,
value2: mapData[1].value
},
{
name: '忻州市',
value: mapData[2].value,
value2: mapData[2].value
},
{
name: '吕梁市',
value: mapData[3].value,
value2: mapData[3].value
},
{
name: '太原市',
value: 1,
value2: 2
},
{
name: '阳泉市',
value: mapData[5].value,
value2: mapData[5].value
},
{
name: '晋中市',
value: mapData[6].value,
value2: mapData[6].value
},
{
name: '长治市',
value: mapData[7].value,
value2: mapData[7].value
},
{
name: '临汾市',
value: mapData[8].value,
value2: mapData[8].value
},
{
name: '晋城市',
value: mapData[9].value,
value2: mapData[9].value
},
{
name: '运城市',
value: mapData[10].value,
value2: mapData[10].value
}
]
for (let i = 0; i < data.length; i++) {
const name = data[i].name;
const mapDataObj = mapData.find(obj => obj.name === name);
if (mapDataObj) {
data[i].value = mapDataObj.value;
data[i].value2 = mapDataObj.value;
}
}
let formdata = '太原' // 中心点
this.geoCoordMap = []
/*获取地图数据*/
this.mapChart = echarts.init(el)
echarts.registerMap('shanxi', jsonData)
var mapFeatures = echarts.getMap('shanxi').geoJson.features
mapFeatures.forEach(v => {
// 地区名称
var name = v.properties.name
// 地区经纬度
this.geoCoordMap[name] = v.properties.centroid
// 按照地图乱序
// data.push({ name: v.properties.name, value: v.properties.centroid[0], value2: v.properties.centroid[1] })
})
// 地图数据
var chinaGeoCoordMap = {
太原市: [111.949248, 38.057014],
大同市: [113.595259, 40.29031],
阳泉市: [113.505474, 37.964652],
长治市: [112.813556, 36.791112],
晋城市: [112.551274, 35.577553],
朔州市: [112.433387, 39.531261],
晋中市: [112.936465, 37.696495],
运城市: [111.003957, 35.59],
忻州市: [112.333538, 38.7769],
临汾市: [111.517973, 36.48415],
吕梁市: [111.134335, 37.524366],
}
// 飞线点数据
var chinaDatas = [
[{
name: '太原市',
value: 0,
},],
[{
name: '大同市',
value: 0,
},],
[{
name: '阳泉市',
value: 0,
},],
[{
name: '长治市',
value: 0,
},],
[{
name: '晋城市',
value: 0,
},],
[{
name: '朔州市',
value: 0,
},],
[{
name: '晋中市',
value: 9,
},],
[{
name: '运城市',
value: 0,
},],
[{
name: '忻州市',
value: 0,
},],
[{
name: '临汾市',
value: 0,
},],
[{
name: '吕梁市',
value: 0,
},],
]
var convertData = function (data) {
var res = []
for (var i = 0; i < data.length; i++) {
var dataItem = data[i]
var fromCoord = chinaGeoCoordMap[dataItem[0].name]
var toCoord = [112.549248, 37.857014] //中心点地理坐标
if (fromCoord && toCoord) {
res.push([{
// 飞线从哪里出发
coord: toCoord,
},
{
// 飞线去往哪里
coord: fromCoord,
value: dataItem[0].value,
},
])
}
}
return res
}
var series = [];
[
[formdata, chinaDatas]
].forEach(function (item) {
series.push({
type: 'lines',
name: "模拟数据",
coordinateSystem: 'geo',
zlevel: 2,
effect: {
show: true,
period: 5, //值越小 速度越快
trailLength: 0.3, // 0-1 值越大，越拖
symbol: 'pin', //箭头图标
symbolSize: 8, //图标大小
color: "#E6C50B"
},
lineStyle: {
normal: {
show: true,
type: 'dashed',
width: 2, //尾迹线条宽度
opacity: 0.1, //尾迹线条透明度
curveness: 0.3, //尾迹线条曲直度
color: '#E6C50B', // 飞线颜色
},
},
data: convertData(item[1]),
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
//涟漪特效
period: 10, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 10, //波纹圆环最大限制，值越大波纹越大
color: '#E6C50B',
},
itemStyle: {
normal: {
color: '#E6C50B',
shadowBlur: 10,
shadowColor: '#E6C50B',
},
},
label: {
normal: {
formatter: '{b}',
position: 'right',
offset: [15, 0],
color: '#fff',
show: true
},
},
symbol: 'circle',
symbolSize: 9,
data: item[1].map(function (dataItem) {
return {
itemStyle: {
color: '#fff' // 修改标点的颜色
},
//在这里定义你所要展示的数据
name: dataItem[0].name,
value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
}
}),
})
})
let effectScatterData = [
{
itemStyle: {
color: "#fff"
},
name: "太原市",
value: [111.949248, 37.957014, 534, "山西焦煤机关",],
},
{
itemStyle: {
color: "#fff"
},
name: "太原市",
value: [111.949248, 37.957014, 65704, "西山煤电",]
},
{
itemStyle: {
color: "#fff"
},
name: "太原市",
value: [111.949248, 37.957014, 14972, "山煤国际",]
},
{
itemStyle: {
color: "#fff"
},
name: "太原市",
value: [111.949248, 37.957014, 91, "物资装备公司",]
},
{
itemStyle: {
color: "#fff"
},
name: "太原市",
value: [111.949248, 37.957014, 111, "金土地公司",]
},
{
itemStyle: {
color: "#fff"
},
name: "太原市",
value: [111.949248, 37.957014, 835, "销售公司",]
},
{
itemStyle: {
color: "#fff"
},
name: "太原市",
value: [111.949248, 37.957014, 117, "国发公司",]
},
{
itemStyle: {
color: "#fff"
},
name: "太原市",
value: [111.949248, 37.957014, 582, "投资公司",]
},
{
itemStyle: {
color: "#fff"
},
name: "太原市",
value: [111.949248, 37.957014, 117, "人力资源公司",]
},
{
itemStyle: {
color: "#fff"
},
name: "太原市",
value: [111.949248, 37.957014, 10, "金融资本公司",]
},
{
itemStyle: {
color: "#fff"
},
name: "太原市",
value: [111.949248, 37.957014, 843, "民爆集团",]
},
{
itemStyle: {
color: "#fff"
},
name: "太原市",
value: [111.949248, 37.957014, 10, "云数据公司",]
},
{
itemStyle: {
color: "#fff"
},
name: "太原市",
value: [111.949248, 37.957014, 218, "焦煤置业",]
},
{
itemStyle: {
color: "#fff"
},
name: "太原市",
value: [111.949248, 37.957014, 47, "新能源公司",]
},
{
itemStyle: {
color: "#fff"
},
name: "太原市",
value: [111.949248, 37.957014, 13, "油品公司",]
},
{
itemStyle: {
color: "#fff"
},
name: "太原市",
value: [111.949248, 37.957014, 29, "低碳公司",]
},
{
itemStyle: {
color: "#fff"
},
name: "太原市",
value: [111.949248, 37.957014, 67, "交易中心",]
},
{
itemStyle: {
color: "#fff"
},
name: "太原市",
value: [111.949248, 37.957014, 48, "招标公司",]
},
{
itemStyle: {
color: "#fff"
},
name: "晋中市",
value: [112.936465, 37.696495, 49047, "汾西矿业",]
},
{
itemStyle: {
color: "#fff"
},
name: "临汾市",
value: [111.517973, 35.88415, 53563, "霍州煤电",]
},
{
itemStyle: {
color: "#fff"
},
name: "临汾市",
value: [111.517973, 35.88415, 9508, "山西焦化",]
},
{
itemStyle: {
color: "#fff"
},
name: "吕梁市",
value: [111.134335, 37.524366, 9960, "华晋焦煤",]
},
]
series[1].data.forEach(item => {
item.img = 'image://https://madeapie.com/asset/get/s/data-1619059838735-QE9mBZmhh.png'
})
let option = {
tooltip: {
trigger: "item",
padding: 15,
backgroundColor: 'rgba(0, 0, 0, 0)',
enterable: true,
transitionDuration: 1,
formatter: (params, ticket, callback) => {
// 清空所有轮播
for (var k in this.geoCoordMap) {
this.mapChart.dispatchAction({
// type: 'geoUnSelect',
type: 'downplay',
name: k,
})
}
// 如果鼠标滑动到线线上面，则返回空
this.mapChart.dispatchAction({
// type: 'geoSelect',
type: 'highlight',
name: params.name,
})
if (params.componentSubType == 'lines') {
return
}
if (params.componentSubType == 'effectScatter') {
let tipHtml = `
`
callback(ticket, tipHtml)
return tipHtml
}
if (params.componentSubType == 'map') {
return
}
},
},
geo: {
show: true,
map: 'shanxi',
layoutCenter: ['50.5%', '52%'], //地图位置
layoutSize: '100%',
zoom: 1.1, //当前视角的缩放比例
// roam: true, //是否开启平游或缩放
scaleLimit: { //滚轮缩放的极限控制
min: 1,
max: 2
},
roam: false,
itemStyle: {
normal: {
areaColor: '#25B9E9',
shadowColor: '#25B9E9',
borderWidth: 6, //设置外层边框
borderColor: '#00FFFF',
shadowOffsetX: 5,
shadowOffsetY: 5,
shadowBlur: 5,
},
emphasis: {
areaColor: '#013d95',
borderColor: '#e7e1a0',
borderWidth: 4, //设置外层边框
},
},
},
series: [
// 区域散点图
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
//涟漪特效
period: 2, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 8, //波纹圆环最大限制，值越大波纹越大
color: '#d4bc1d',
},
emphasis: {
itemStyle: {
color: '#d4bc1d'
}
},
label: {
show: true,
normal: {
show: false
},
},
symbol: 'circle',
symbolSize: 0,
data: effectScatterData,
// data: series[1].data,
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
//涟漪特效
period: 2, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 8, //波纹圆环最大限制，值越大波纹越大
color: '#d4bc1d',
},
emphasis: {
itemStyle: {
// color: '#d4bc1d'
symbol: function (value, params) {
return params.data.img;
},
symbolSize: [66, 93],
symbolOffset: [0, -30],
}
},
label: {
show: true,
normal: {
show: false
},
},
symbol: 'circle',
symbolSize: 30,
data: series[1].data,
},
// {
// type: 'scatter',
// coordinateSystem: 'geo',
// itemStyle: {
// color: '#f00',
// },
// symbol: function (value, params) {
// return params.data.img;
// },
// symbolSize: [66, 93],
// symbolOffset: [0, -30],
// z: 9999,
// data: series[1].data,
// },
// 地图数据
{
type: 'map',
mapType: 'shanxi',
aspectScale: 0.75,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '100%',
zoom: 1.1, //当前视角的缩放比例
// roam: true, //是否开启平游或缩放
scaleLimit: { //滚轮缩放的极限控制
min: 1,
max: 2
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
color: '#fff',
fontSize: 32,
fontWeight: "bolder"
}
},
itemStyle: {
normal: {
areaColor: '#1C4FBB',
borderColor: 'rgba(5,216,252,0.7)',
borderWidth: 6,//隐藏省界线
shadowColor: 'rgba(5,216,252,0.7)',
shadowBlur: 90
},
emphasis: {
areaColor: 'rgba(25,79,183,0.6)',
borderColor: '#d4bc1d',
borderWidth: 8, //设置外层边框
label: {
color: "#fff"
}
}
},
data: data,
},
// 线 和 点
{
type: 'lines',
zlevel: 1, //设置这个才会有轨迹线的小尾巴
effect: {
show: true,
period: 3,
trailLength: 0.1,
color: '#d4bc1d', //流动点颜色
symbol: 'arrow',
symbolSize: 15
},
lineStyle: {
color: '#d4bc1d', //线条颜色
show: true,
type: "dashed",
width: 5,
opacity: 0.4,
curveness: 0.2
},
data: series[0].data
},
],
}
let that = this
this.mapChart.on('click', function (params) {
if (params.name == '太原市') {
that.showChartLTipDouble('太原市')
}
})
tools.loopShowTooltip(this.mapChart, option, {
interval: 2000,
loopSeries: false,
});
this.mapChart.setOption(option)
},
initTwoBarEcharts(el, data) {
this.twoBar = echarts.init(el);
option = {
tooltip: {
show: true,
trigger: 'axis',
textStyle: {
fontSize: 30,
color: '#A3E2F4'
},
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: "{c}"
},
grid: {
top: '15%',
right: '3%',
left: '14%',
bottom: '15%'
},
xAxis: [{
type: 'category',
data: data.x,
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
},
axisLabel: {
color: '#e2e9ff',
textStyle: {
fontSize: 26
},
},
}],
yAxis: [{
name: '',
axisLabel: {
formatter: '{value}',
color: '#e2e9ff',
textStyle: {
fontSize: 20,
},
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,1)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
}
}],
series: [{
type: 'bar',
data: data.y,
barWidth: '20px',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 1,
color: "#02355C",
}, //柱图渐变色
{
offset: 0,
color: "#45DAD1",
},], false),
shadowColor: 'rgba(0,160,221,1)',
shadowBlur: 4,
}
},
}]
};
this.twoBar.setOption(option);
tools.loopShowTooltip(this.twoBar, option, {
nterval: 2000,
loopSeries: true,
});
},
initEchartsBar(el, data) {
let chart = echarts.init(el);
let xLabel = data.x
option = {
grid: {
top: "15%",
bottom: "15%",//也可设置left和right设置距离来控制图表的大小
left: "1%",
right: "1%"
},
tooltip: {
show: true,
trigger: 'axis',
textStyle: {
fontSize: 30,
color: '#A3E2F4'
},
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: '{c0}',
},
xAxis: {
data: xLabel,
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#11417a'
}
},
axisTick: {
show: false //隐藏X轴刻度
},
axisLabel: {
show: true,
margin: 14,
textStyle: {
fontSize: 26,
color: "#fff" //X轴文字颜色
}
},
},
yAxis: [
{
type: "value",
gridIndex: 0,
// splitNumber: 4,
splitLine: {
show: false,
lineStyle: {
color: '#A3C0DF',
width: 1
},
},
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#A3C0DF'
}
},
axisLabel: {
show: true,
margin: 14,
fontSize: 20,
textStyle: {
color: "#fff" //X轴文字颜色
}
},
},
],
series: [
{
name: "实习实训",
type: "bar",
barWidth: 20,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#07ecd9"
},
{
offset: 1,
color: "#034881"
}
])
}
},
data: data.y,
z: 10,
zlevel: 0,
"label": {
"show": true,
"position": "top",
"distance": 10,
fontSize: 26,
"color": "#01fff4"
}
},
{
// 分隔
type: "pictorialBar",
itemStyle: {
normal: {
color: "#0F375F"
}
},
symbolRepeat: "fixed",
symbolMargin: 6,
symbol: "rect",
symbolClip: true,
symbolSize: [20, 2],
symbolPosition: "start",
symbolOffset: [0, -1],
// symbolBoundingData: this.total,
data: data.y,
width: 25,
z: 0,
zlevel: 1,
},
]
};
chart.setOption(option);
tools.loopShowTooltip(chart, option, {
nterval: 2000,
loopSeries: true,
});
},
initEchartStack(el, data) {
let that = this;
this.mobilizeFL = echarts.init(el);
option = {
tooltip: {
show: true,
trigger: 'axis',
textStyle: {
fontSize: 30,
color: '#A3E2F4'
},
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
top: "10%",
bottom: "10%",//也可设置left和right设置距离来控制图表的大小
left: "10%",
right: "1%"
},
legend: {
data: ["入职", "离职", "内部调动", "跨二级调出", "跨二级调入"],
align: 'left',
itemGap: 50,
right: '1%',
y: '1%',
icon: 'rect',
textStyle: {
color: "#fff",
fontSize: 26
}
},
xAxis: {
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
margin: 14,
fontSize: 26,
textStyle: {
color: "#fff" //X轴文字颜色
}
},
data: data.x,
},
yAxis: {
type: "value",
gridIndex: 0,
// splitNumber: 4,
splitLine: {
show: false,
lineStyle: {
color: '#A3C0DF',
width: 1
},
},
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#A3C0DF'
}
},
axisLabel: {
show: true,
margin: 14,
fontSize: 20,
textStyle: {
color: "#fff" //X轴文字颜色
}
},
},
series: [
{
type: 'bar',
name: "入职",
stack: 'total',
barWidth: 26,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#91231F',
},
{
offset: 1,
color: '#F98784',
},
]),
},
data: data.y1,
},
{
type: 'bar',
stack: 'total',
name: "内部调动",
barWidth: 26,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#172A45',
},
{
offset: 1,
color: '#FF9915',
},
]),
},
data: data.y2,
},
{
type: 'bar',
name: "跨二级调出",
stack: 'total',
barWidth: 26,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#07806E',
},
{
offset: 1,
color: '#79FFEB',
},
]),
},
data: data.y3,
},
{
type: 'bar',
stack: 'total',
name: "跨二级调入",
barWidth: 26,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#9e65ea',
},
{
offset: 1,
color: '#514ddd',
},
]),
},
data: data.y4,
},
{
type: 'bar',
name: "离职",
stack: 'total',
barWidth: 26,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#69C0FF',
},
{
offset: 1,
color: '#1a98f8',
},
]),
},
data: data.y5,
},
],
};
that.mobilizeFL.setOption(option);
tools.loopShowTooltip(that.mobilizeFL, option, {
nterval: 2000,
loopSeries: true,
});
},
handleWarning() {
this.isShowMark = true
this.salaryFlag = true
this.pdfFlag = false
},
handleMark() {
this.isShowMark = false
this.salaryFlag = false
this.pdfFlag = false
},
handleChange() {
if (!this.changeFlag) {
this.config2 = {
waitTime: 2000,
header: ["单位名称", "算薪进度", "算薪周期", ""],
rowNum: 4,
data: [
["西山煤电铁路公司", '未参与算薪', '2023/6'],
["西山煤电铁路公司", '未参与算薪', '2023/6'],
["西山煤电斜沟矿", '未参与算薪', '2023/6'],
["汾西矿业曙光煤矿", '未参与算薪', '2023/6'],
["山煤国际霍尔辛赫", '未参与算薪', '2023/6'],
["霍州煤电-辛置煤矿", '未参与算薪', '2023/6'],
["华晋焦煤沙曲选煤厂", '未参与算薪', '2023/6'],
],
align: ["center", "center", "center", "center", "center"],
headerBGC: "#153A62",
oddRowBGC: "#061F42",
evenRowBGC: "#0C284A",
}
this.changeFlag = true
} else {
this.config2 = {
waitTime: 2000,
header: ["单位名称", "已算薪组织", "未算薪组织", "算薪进度百分比", ""],
rowNum: 4,
data: [
["山焦西山", '290', '46', '86%'],
["山焦汾西", '10', '38', '21%'],
["山焦霍州", '314', '3', '99%'],
["山焦山煤", '16', '35', '31%'],
["山焦华晋", '7', '1', '87%'],
],
align: ["center", "center", "center", "center", "center"],
headerBGC: "#153A62",
oddRowBGC: "#061F42",
evenRowBGC: "#0C284A",
}
this.changeFlag = false
}
},
handleORG() {
this.isShowMark = true
this.salaryFlag = false
this.pdfFlag = true
},
},
})