let barImg =
'data:image/png;base64,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'
let app = new Vue({
el: '#app',
data() {
return {
twinkle7: [],
twinkle8: [],
twinkleR6: [],
showTip: false,
tipNum: '',
time: '',
year: '2022',
config1: {
number: [100],
content: '{nt}个',
},
centerData: '',
storageRecordConfig: {
header: ['', '所属集团', '工作情况'],
headerBGC: '#05507b33',
oddRowBGC: '#69c0ff0f',
evenRowBGC: '',
headerHeight: '40',
rowNum: 4,
align: ['center', 'center', 'center', 'center'],
data: [
['', '山西三元煤业股份有限公司', '中层管理人数改革有待改善'],
['', '山西煤炭运销集团三元石窟煤业有限公司', '全员劳动生产率增速显著高于人员增速'],
['', '山西煤炭运销集团三元石窟煤业有限公司', '人工成本利润率增长且总人数下降'],
['', '山西煤炭运销集团三元石窟煤业有限公司', '总人数压减成效突出'],
['', '山西三元福达煤业有限公司', '集团人数增长速度较快'],
['', '长治市聚通能源发展有限公司', '本部机构压减成效明显'],
['', '长治三元中能煤业有限公司', '人工成本利润率显著降低'],
['', '山西马堡煤业有限公司', '人工成本利润率显著降低'],
['', '山西长治郊区三元南耀小常煤业有限公司', '人工成本利润率显著增长且总人数不变'],
['', '山西长治王庄煤业有限责任公司', '人工成本利润率显著降低'],
['', '山西长治王庄煤业有限责任公司', '年利润亏损但年薪酬增长'],
['', '山西煤炭运销集团三元古韩荆宝煤业有限公司', '人工成本利润率增长且总人数不变'],
['', '长治县三元王庄华泰水泥有限公司', '人工成本利润率增长且总人数不变']
],
},
storageRecordConfig2: {
header: ['企业名称', '预警内容', '数据抓取日期', '累计未获取数据日期'],
headerBGC: '#05507b33',
oddRowBGC: '#05507b33',
evenRowBGC: '',
headerHeight: '40',
rowNum: 4,
align: ['center', 'center', 'center', 'center'],
data: [
['山西焦煤', '经营业绩考核延迟更新', '2022.12.01-12.31', '3天'],
['山西文旅', '六定长效机制情况未更新', '2022.12.01-12.31', '7天'],
['大地控股', '经营业绩考核延迟更新', '2022.12.01-12.31', '3天'],
['国际能源', '六定长效机制情况未更新', '2022.12.01-12.31', '1天'],
['山西焦煤', '经营业绩考核延迟更新', '2022.12.01-12.31', '3天'],
['山西焦煤', '六定长效机制情况未更新', '2022.12.01-12.31', '3天'],
],
},
companyList: companyList,
companyListTitle: companyListTitle,
commonOption: {
title: {
text: 'xxx',
x: 'center',
y: '3%',
textStyle: {
color: '#69C0FF',
fontSize: 24,
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: {
top: '22%',
right: '5%',
left: '8%',
bottom: '26%',
},
legend: {
data: '',
top: '12%',
right: '5%',
textStyle: {
color: 'rgba(250,250,250,0.6)',
fontSize: 14,
},
},
xAxis: {
data: companyList.map(item => item.name),
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#005094',
width: 1,
},
},
axisTick: {
show: false, //隐藏X轴刻度
},
axisLabel: {
show: true,
rotate: 15,
textStyle: {
color: 'rgba(255,255,255,0.6)', //X轴文字颜色
fontSize: 16,
},
},
},
yAxis: [
{
type: 'value',
nameTextStyle: {
color: '#ebf8ac',
fontSize: 16,
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(250,250,250,0.6)',
fontSize: 16,
},
},
},
],
},
}
},
beforeMount(){
dataL7[0].forEach((item,index) => {
if(dataL7[1][index] < 0 && dataL7[0][index] > 0){
let obj = {value:[companyList[index].name ,dataL7[0][index]],symbolSize:15 }
this.twinkle7.push(obj)
}
})
// if (dataL8[1][params.dataIndex] < 0 && params.value > 0) {
dataL8[0].forEach((item,index) => {
if(dataL8[1][index] < 0 && dataL8[0][index] > 0){
let obj = {value:[companyList[index].name ,dataL8[0][index]],symbolSize:15 }
this.twinkle8.push(obj)
}
})
//params.value > 0 && dataR6[0][params.dataIndex] < 0
// params.value > 0 && fjxdataL2[0][params.dataIndex] < 0
dataR6[0].forEach((item,index) => {
if(dataR6[1][index] > 0 && dataR6[0][index] < 0){
let obj = {value:[companyList[index].name ,dataR6[1][index]],symbolSize:15 }
this.twinkleR6.push(obj)
}
})
console.log(this.twinkleR6)
},
mounted() {
this.time = formatDate()
this.timer = setInterval(() => {
this.time = formatDate()
}, 1000)
this.centerData = data
// 左侧图表
this.initChartL1()
this.initChartL2()
this.initChartL3()
this.initChartL4()
this.initChartL5()
this.initChartL6()
this.initChartL7()
this.initChartL8()
// 中间图表
this.initChartC1()
this.initChartC2()
// 右侧图表
this.initChartR1()
this.initChartR2()
this.initChartR3()
this.initChartR4()
this.initChartR5()
this.initChartR6()
this.initChartR7()
this.initChartR8()
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer);
}
},
methods: {
handleShowTip(index) {
this.showTip = true
this.tipNum = index
},
handleGoPage(url) {
if (url.length) {
window.location.href = url
}
},
handleGoBack() {
window.history.go(-1)
},
numFormat(value) {
if (!value) return '0'
var intPart = Number(value).toFixed(0) // 获取整数部分
var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
var floatPart = '.00' // 预定义小数部分
var value2Array = value.toString().split('.')
// =2表示数据有小数位
if (value2Array.length === 2) {
floatPart = value2Array[1].toString() // 拿到小数部分
if (floatPart.length === 1) {
// 补0
return intPartFormat + '.' + floatPart + '0'
} else {
return intPartFormat + '.' + floatPart
}
} else {
return intPartFormat
}
},
initChartL1() {
let myChart = echarts.init(this.$refs['echartL1'])
let option = {
..._.cloneDeep(this.commonOption),
series: [
{
name: '当前各三级企业本部机构数',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataL1[0],
},
],
}
option.title.text = '各三级企业本部机构数'
option.legend.data = ['当前各三级企业本部机构数']
option.yAxis.push({
splitLine: {
show: false,
},
axisLine: {
show: false,
},
})
myChart.setOption(option)
},
initChartL2() {
let myChart = echarts.init(this.$refs['echartL2'])
let option = {
..._.cloneDeep(this.commonOption),
series: [
{
name: '当前各三级企业所属架构数',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataL2[0]
}
],
}
option.title.text = '各三级企业所属架构数'
option.legend.data = ['当前各三级企业所属架构数']
option.yAxis.push({
splitLine: {
show: false,
},
axisLine: {
show: false,
},
})
myChart.setOption(option)
},
initChartL3() {
let myChart = echarts.init(this.$refs['echartL3'])
console.log(this.commonOption, "this.commonOption")
let option = {
..._.cloneDeep(this.commonOption),
series: [
{
name: '当前总部中层管理人数',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#5e7ae9',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataL3[0],
},
],
}
option.title.text = '各三级企业本部中层管理人数'
option.legend.data = ['当前总部中层管理人数']
option.yAxis.push({
type: 'value',
axisLine: {
show: false,
},
splitLine: {
show: false,
},
})
myChart.setOption(option)
},
initChartL4() {
let myChart = echarts.init(this.$refs['echartL4'])
let option = {
..._.cloneDeep(this.commonOption),
series: [
{
name: '当前管理人员数',
type: 'bar',
barWidth: 12,
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 8, //标记的大小
smooth: false,
itemStyle: {
//折线拐点标志的样式
color: '#B889EA',
borderColor: '#B889EA',
width: 2,
shadowColor: '#B889EA',
shadowBlur: 4,
},
lineStyle: {
color: '#B889EA',
width: 2,
},
data: dataL4[0],
},
{
name: '管理人员数占总人数比值',
yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
type: 'line',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataL4[1],
markLine: {
data: [
{
name: '管理人员比值核定上限',
yAxis: 15,
lineStyle: {
color: '#fff',
},
label: {
formatter: '{b}',
position: 'middle',
color: '#fff',
},
}
],
label: {
distance: [20, 8],
},
},
},
],
}
option.title.text = '各三级企业管理人员数'
option.legend.data = ['当前管理人员数', '管理人员数占总人数比值']
option.legend.show = true
option.tooltip = {
trigger: 'axis',
formatter: '{a0}:{c0}' + '
' + '{a1}:{c1}' + '%'
}
option.yAxis.push({
max: 20,
type: 'value',
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: true,
formatter: '{value} %',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
})
myChart.setOption(option)
},
initChartL5() {
let myChart = echarts.init(this.$refs['echartL5'])
let option = {
..._.cloneDeep(this.commonOption),
series: [
{
name: '各三级企业总人数',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataL5[0],
},
{
name: '去年同期人数变化率',
type: 'line',
yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 8, //标记的大小
smooth: false,
itemStyle: {
//折线拐点标志的样式
color: '#b889ea',
borderColor: '#b889ea',
width: 2,
shadowColor: '#b889ea',
shadowBlur: 4,
},
lineStyle: {
color: '#b889ea',
width: 2,
},
data: dataL5[1],
},
],
}
option.title.text = '各三级企业总人数'
option.legend.data = ['各三级企业总人数', '去年同期人数变化率']
option.legend.show = true
option.tooltip = {
trigger: 'axis',
formatter: '{a0}:{c0}' + '
' + '{a1}:{c1}' + '%'
}
option.yAxis.push({
type: 'value',
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: true,
formatter: '{value} %',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
})
myChart.setOption(option)
},
initChartL6() {
let myChart = echarts.init(this.$refs['echartL6'])
let option = {
..._.cloneDeep(this.commonOption),
series: [
{
name: '本部员额数',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
barBorderRadius: [10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#43ede3',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataL6[0],
},
],
}
option.title.text = '各三级企业本部员额数'
option.legend.data = ['本部员额数']
option.legend.show = true
option.yAxis.push({
splitLine: {
show: false,
},
axisLine: {
show: false,
},
})
myChart.setOption(option)
},
initChartL7() {
let myChart = echarts.init(this.$refs['echartL7'])
let option = {
..._.cloneDeep(this.commonOption),
color: ['#43ede3'],
series: [
{
name: '人数变化',
type: 'line',
barWidth: 15,
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 15, //标记的大小
smooth: false,
itemStyle: {
color: params => {
if (dataL7[1][params.dataIndex] < 0 && params.value > 0) {
return 'red'
} else {
return '#43ede3'
}
},
},
// markLine: {
// data: [{ type: 'average', name: 'Avg' }],
// },
data: dataL7[0],
},
{
name: '全员劳动生产率同比变化',
type: 'line',
barWidth: 15,
// yAxisIndex: 1,
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 15, //标记的大小
smooth: false,
itemStyle: {
//折线拐点标志的样式
color: '#b889ea',
borderColor: '#b889ea',
width: 2,
shadowColor: '#b889ea',
shadowBlur: 4,
},
data: dataL7[1],
},
{
type: 'effectScatter',
coordinateSystem: 'cartesian2d',
showEffectOn: 'render',
rippleEffect: {
period: 10,
scale: 4,
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
color: 'red'
},
lineStyle: {
color: '#43ede3',
width: 2,
},
data: this.twinkle7,
},
],
}
option.title.text = '人数变化和全员劳动生产率变化率分析'
option.legend.data = ['人数变化', '全员劳动生产率同比变化']
option.legend.show = true
option.tooltip = {
trigger: 'axis',
formatter: '{a0}:{c0}' + '%' + '
' + '{a1}:{c1}' + '%'
}
option.yAxis = [
{
type: 'value',
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLabel: {
show: true,
formatter: '{value} %',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
},
{
type: 'value',
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: true,
formatter: '{value} %',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
}
]
myChart.setOption(option)
},
initChartL8() {
let myChart = echarts.init(this.$refs['echartL8'])
let option = {
..._.cloneDeep(this.commonOption),
color: ['#43ede3'],
series: [
{
name: '人数变化',
type: 'line',
barWidth: 15,
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 15, //标记的大小
smooth: false,
itemStyle: {
color: params => {
if (dataL8[1][params.dataIndex] < 0 && params.value > 0) {
return 'red'
} else {
return '#43ede3'
}
},
},
lineStyle: {
color: '#43ede3',
width: 2,
},
// markLine: {
// data: [{ type: 'average', name: 'Avg' }],
// },
data: dataL8[0],
},
{
name: '人工成本利润率同比变化',
type: 'line',
barWidth: 15,
// yAxisIndex: 1,
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 15, //标记的大小
smooth: false,
itemStyle: {
//折线拐点标志的样式
color: '#b889ea',
borderColor: '#b889ea',
width: 2,
shadowColor: '#b889ea',
shadowBlur: 4,
},
data: dataL8[1],
},
{
type: 'effectScatter',
coordinateSystem: 'cartesian2d',
showEffectOn: 'render',
rippleEffect: {
period: 10,
scale: 4,
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
color: 'red'
},
lineStyle: {
color: '#43ede3',
width: 2,
},
data: this.twinkle8,
},
],
}
option.title.text = '人数变化和人工利润率变化分析'
option.legend.data = ['人数变化', '人工成本利润率同比变化']
option.legend.show = true
option.tooltip = {
trigger: 'axis',
formatter: '{a0}:{c0}' + '%' + '
' + '{a1}:{c1}' + '%'
}
option.yAxis = [
{
type: 'value',
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLabel: {
show: true,
formatter: '{value} %',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
},
{
type: 'value',
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: true,
formatter: '{value} %',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
}
]
myChart.setOption(option)
},
// 中间图表---------------------------------------------开始
initChartC1() {
let myChart = echarts.init(this.$refs['echartC1'])
let option = {
..._.cloneDeep(this.commonOption),
color: ['#69c0ff'],
series: [
{
name: '全员劳动生产率(万/人)',
type: 'bar',
barWidth: 12,
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 8, //标记的大小
smooth: false,
itemStyle: {
color: params => {
if (params.value < 0 && dataC1[1][params.dataIndex] < 0) {
return 'red'
} else if (params.value < 0) {
return 'yellow'
} else {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},
])
}
},
},
lineStyle: {
color: '#B889EA',
width: 2,
},
data: dataC1[0],
markLine: {
data: [
{
name: '省属企业平均水平',
yAxis: 50.13,
lineStyle: {
color: '#fff',
},
label: {
formatter: '{b}',
position: 'end',
padding: [20, 100, 10, 30],
color: '#fff',
},
},
{
name: '央企平均水平',
yAxis: 69.4,
lineStyle: {
color: '#fff',
},
label: {
formatter: '{b}',
position: 'end',
padding: [-4, 150, 10, 30],
color: '#fff',
},
},
],
label: {
distance: [20, 8],
},
},
},
{
name: '全员劳动生产率同比变化',
yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
type: 'line',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataC1[1],
},
],
}
option.title.text = '各三级全员劳动生产率'
option.legend.data = ['全员劳动生产率同比变化', '全员劳动生产率(万/人)']
option.legend.show = true
option.grid.right = '15%'
option.tooltip = {
trigger: 'axis',
formatter: '{a0}:{c0}' + '
' + '{a1}:{c1}' + '%'
}
option.yAxis.push({
type: 'value',
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: true,
formatter: '{value} %',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
})
myChart.setOption(option)
tools.loopShowTooltip(myChart, option, {
nterval: 2000,
loopSeries: true,
});
},
initChartC2() {
let myChart = echarts.init(this.$refs['echartC2'])
let option = {
..._.cloneDeep(this.commonOption),
color: ['#69c0ff'],
series: [
{
name: '人工成本利润率同比变化',
type: 'line',
yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 8, //标记的大小
smooth: false,
itemStyle: {
//折线拐点标志的样式
color: '#B889EA',
borderColor: '#B889EA',
width: 2,
shadowColor: '#B889EA',
shadowBlur: 4,
},
lineStyle: {
color: '#B889EA',
width: 2,
},
data: dataC2[0],
},
{
name: '人工成本利润率',
type: 'bar',
barWidth: 15,
itemStyle: {
color: params => {
if (params.value < 0 && dataC2[1][params.dataIndex] < 0) {
return 'red'
} else if (params.value < 0) {
return 'yellow'
} else {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},
])
}
},
},
data: dataC2[1],
markLine: {
data: [
{
name: '省属企业平均水平',
yAxis: 67.09,
lineStyle: {
color: '#fff',
},
label: {
formatter: '{b}',
position: 'end',
padding: [24, 100, 10, 30],
color: '#fff',
},
},
{
name: '央企平均水平',
yAxis: 81,
lineStyle: {
color: '#fff',
},
label: {
formatter: '{b}',
position: 'end',
padding: [-24, 200, 10, 30],
color: '#fff',
},
},
],
label: {
distance: [20, 8],
},
},
},
],
}
option.title.text = '各三级人工成本利润率'
option.legend.data = ['人工成本利润率同比变化', '人工成本利润率']
option.legend.show = true
option.tooltip = {
trigger: 'axis',
formatter: '{a0}:{c0}' + '%' + '
' + '{a1}:{c1}' + '%'
}
option.grid.right = '15%'
option.yAxis = [
{
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLabel: {
show: true,
formatter: '{value} %',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
},
{
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
formatter: '{value} %',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
}
]
myChart.setOption(option)
tools.loopShowTooltip(myChart, option, {
nterval: 2000,
loopSeries: true,
});
},
// 右侧图表---------------------------------------------开始
initChartR1() {
let myChart = echarts.init(this.$refs['echartR1'])
let commonOptions = this.commonOption
commonOptions.yAxis[0].splitNumber = 2
let option = {
..._.cloneDeep(commonOptions),
series: [
{
name: '招聘需求公告次数',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataR1[0],
},
{
name: '招聘需求公告累计招聘人次',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#43ede3',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataR1[1],
},
],
}
option.title.text = '各三级企业招聘需求公告人次情况'
option.legend.data = ['招聘需求公告次数', '招聘需求公告累计招聘人次']
option.legend.show = true
option.yAxis.push({
splitLine: {
show: false,
},
axisLine: {
show: false,
},
})
myChart.setOption(option)
},
initChartR2() {
let myChart = echarts.init(this.$refs['echartR2'])
let commonOptions = this.commonOption
commonOptions.yAxis[0].splitNumber = 2
let option = {
..._.cloneDeep(commonOptions),
series: [
{
name: '录用结果公示次数',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataR2[0],
},
{
name: '录用结果公示累计公示人数',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#45DAD1',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataR2[1],
},
],
}
option.title.text = '各三级企业录用结果公示人次'
option.legend.data = ['录用结果公示次数', '录用结果公示累计公示人数']
option.legend.show = true
option.yAxis.push({
type: 'value',
axisLine: {
show: false,
},
splitLine: {
show: false,
},
})
myChart.setOption(option)
},
initChartR3() {
let myChart = echarts.init(this.$refs['echartR3'])
let commonOptions = this.commonOption
commonOptions.yAxis[0].splitNumber = 2
let option = {
..._.cloneDeep(commonOptions),
color: ['#45DAD1'],
series: [
{
name: '2022年利润(万)',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataR3[0],
},
{
name: '2022年累计招聘数',
yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
type: 'bar',
barWidth: 15,
itemStyle: {
color: params => {
if (params.value > 0 && dataR3[0][params.dataIndex] < 0) {
return 'red'
} else {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#45DAD1',
},
{
offset: 1,
color: '#082550',
},
])
}
},
},
data: dataR3[1],
},
],
}
option.title.text = '各三级企业年利润与招聘情况分析'
option.legend.data = ['2022年利润(万)', '2022年累计招聘数']
option.legend.show = true
option.yAxis[0].max = function (value) {
if (Math.abs(value.max) > Math.abs(value.min)) {
return (Math.abs(value.max) * 1.2).toFixed(2);
} else {
return (Math.abs(value.min) * 1.2).toFixed(2);
}
}
option.yAxis[0].min = function (value) {
if (Math.abs(value.max) > Math.abs(value.min)) {
return (-Math.abs(value.max) * 1.2).toFixed(2);
} else {
return (-Math.abs(value.min) * 1.2).toFixed(2);
}
}
option.yAxis.push({
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
formatter: '{value}',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
max: function (value) {
if (Math.abs(value.max) > Math.abs(value.min)) {
return (Math.abs(value.max) * 1.2).toFixed(2);
} else {
return (Math.abs(value.min) * 1.2).toFixed(2);
}
},
min: function (value) {
if (Math.abs(value.max) > Math.abs(value.min)) {
return (-Math.abs(value.max) * 1.2).toFixed(2);
} else {
return (-Math.abs(value.min) * 1.2).toFixed(2);
}
}
})
// option.yAxis = [
// {
// max: function (val) {
// if (Math.abs(val.max) > Math.abs(val.min)) {
// return (Math.abs(val.max) * 1.2).toFixed(0)
// } else {
// return (Math.abs(val.min) * 1.2).toFixed(0)
// }
// },
// min: function (val) {
// if (Math.abs(val.max) > Math.abs(val.min)) {
// return (-Math.abs(val.max) * 1.2).toFixed(0)
// } else {
// return (Math.abs(val.min) * 1.2).toFixed(0)
// }
// },
// splitLine: {
// show: false,
// },
// axisLine: {
// show: false,
// },
// axisLabel: {
// show: true,
// formatter: '{value}',
// textStyle: {
// color: 'rgba(250,250,250,0.6)',
// },
// },
// }
// ]
myChart.setOption(option)
},
initChartR4() {
let myChart = echarts.init(this.$refs['echartR4'])
let commonOptions = this.commonOption
commonOptions.yAxis[0].splitNumber = 2
let option = {
..._.cloneDeep(commonOptions),
series: [
{
name: '2022年退出人数',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataR4[0],
},
{
name: '2022年累计招聘人数',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#45DAD1',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataR4[1],
},
],
}
option.title.text = '各三级企业"退二进一"完成情况'
option.legend.data = ['2022年退出人数', '2022年累计招聘人数']
option.legend.show = true
option.yAxis.push({
splitLine: {
show: false,
},
axisLine: {
show: false,
},
})
myChart.setOption(option)
},
initChartR5() {
let myChart = echarts.init(this.$refs['echartR5'])
let option = {
..._.cloneDeep(this.commonOption),
series: [
{
name: '去年同期在岗职工平均薪酬',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataR5[0],
},
{
name: '在岗职工平均薪酬',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#6682F5',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataR5[1],
}
],
}
option.title.text = '各三级企业在岗职工平均薪酬'
option.legend.data = ['去年同期在岗职工平均薪酬', '在岗职工平均薪酬']
option.legend.show = true
option.yAxis.push({
splitLine: {
show: false,
},
axisLine: {
show: false,
},
})
myChart.setOption(option)
},
initChartR6() {
let myChart = echarts.init(this.$refs['echartR6'])
let option = {
..._.cloneDeep(this.commonOption),
color: ['#69c0ff'],
series: [
{
name: '2022年利润累计涨幅率',
type: 'line',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 8, //标记的大小
smooth: false,
itemStyle: {
//折线拐点标志的样式
color: '#B889EA',
borderColor: '#B889EA',
width: 2,
shadowColor: '#B889EA',
shadowBlur: 4,
},
lineStyle: {
color: '#B889EA',
width: 2,
},
data: dataR6[0],
},
{
name: '2022年薪酬累计涨幅率',
type: 'line',
barWidth: 15,
yAxisIndex: 1,
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 12, //标记的大小
smooth: false,
itemStyle: {
color: params => {
if (params.value > 0 && dataR6[0][params.dataIndex] < 0) {
return 'yellow'
} else {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},
])
}
},
},
data: dataR6[1],
},
{
yAxisIndex: 1,
type: 'effectScatter',
coordinateSystem: 'cartesian2d',
showEffectOn: 'render',
rippleEffect: {
period: 10,
scale: 4,
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
color: 'yellow'
},
lineStyle: {
color: '#43ede3',
width: 2,
},
data: this.twinkleR6,
},
],
}
option.title.text = '各三级企业利润与薪酬变动情况'
option.legend.data = ['2022年利润累计涨幅率', '2022年薪酬累计涨幅率']
option.tooltip = {
trigger: 'axis',
formatter: '{a0}:{c0}' + '%' + '
' + '{a1}:{c1}' + '%'
}
option.yAxis = [
{
max: function (value) {
if (Math.abs(value.max) > Math.abs(value.min)) {
return (Math.abs(value.max) * 1.2).toFixed(2);
} else {
return (Math.abs(value.min) * 1.2).toFixed(2);
}
},
min: function (value) {
if (Math.abs(value.max) > Math.abs(value.min)) {
return (-Math.abs(value.max) * 1.2).toFixed(2);
} else {
return (-Math.abs(value.min) * 1.2).toFixed(2);
}
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
formatter: '{value} %',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
},
{
max: function (value) {
if (Math.abs(value.max) > Math.abs(value.min)) {
return (Math.abs(value.max) * 1.2).toFixed(2);
} else {
return (Math.abs(value.min) * 1.2).toFixed(2);
}
},
min: function (value) {
if (Math.abs(value.max) > Math.abs(value.min)) {
return (-Math.abs(value.max) * 1.2).toFixed(2);
} else {
return (-Math.abs(value.min) * 1.2).toFixed(2);
}
},
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
formatter: '{value} %',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
}
]
myChart.setOption(option)
},
initChartR7() {
let myChart = echarts.init(this.$refs['echartR7'])
let option = {
..._.cloneDeep(this.commonOption),
series: [
{
name: '全员绩效考核完成率',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#B889EA',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataR7[0],
},
],
}
option.title.text = '各三级企业全员绩效考核 '
// option.legend.data = ['劳动合同签约完成率', '目标值']
option.tooltip = {
trigger: 'axis',
formatter: '{a0}:{c0}' + '%'
}
option.yAxis[0].axisLabel = {
show: true,
formatter: '{value} %',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
}
myChart.setOption(option)
},
initChartR8() {
let myChart = echarts.init(this.$refs['echartR8'])
let option = {
..._.cloneDeep(this.commonOption),
series: [
{
name: '任期制契约化完成率',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#43ede3',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataR8[0],
},
],
}
option.title.text = '各三级企业任期制契约化完成率'
option.tooltip = {
trigger: 'axis',
formatter: '{a0}:{c0}' + '%'
}
option.yAxis[0].axisLabel = {
show: true,
formatter: '{value} %',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
}
myChart.setOption(option)
},
},
})