let barImg =
'data:image/png;base64,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'
let app = new Vue({
el: '#app',
data () {
return {
start: 0,
end: 9,
touch: true,
timeCommon: '',
echartC1: {
national: '',
province: ''
},
echartC2: {
national: '',
province: ''
},
titleName: '',
twinkle7: [],
twinkle8: [],
twinkleR6: [],
showTip: false,
tipNum: '',
time: '',
year: '2022',
config1: {
number: [100],
content: '{nt}个',
},
centerData: '',
storageRecordConfig: {
header: ['', '公司名称', '工作情况'],
headerBGC: '#05507b33',
oddRowBGC: '#69c0ff0f',
evenRowBGC: '',
headerHeight: '50',
rowNum: 4,
align: ['center', 'center', 'center', 'center'],
data: [],
},
storageRecordConfig2: {
header: ['企业名称', '预警内容', '数据抓取日期', '累计未获取数据日期'],
headerBGC: '#05507b33',
oddRowBGC: '#05507b33',
evenRowBGC: '',
headerHeight: '50',
rowNum: 4,
align: ['center', 'center', 'center', 'center'],
data: [],
},
companyList: companyList,
companyListTitle: companyListTitle,
commonOption: []
}
},
beforeMount () {
},
mounted () {
this.getUrlParams()
this.time = formatDate()
this.timer = setInterval(() => {
this.time = formatDate()
}, 1000)
this.centerData = data
},
beforeDestroy () {
clearInterval(this.timer);
clearInterval(this.timeCommon);
},
methods: {
handleGoIndex () {
window.location.href = './index.html'
},
change () {
if (this.end < this.companyList.length) {
this.start += 9
this.end += 9
} else {
this.start = 0
this.end = 9
}
},
judgeCarousel () {
let a = {
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: '25%',
},
legend: {
data: '',
top: '12%',
right: '5%',
textStyle: {
color: 'rgba(250,250,250,0.6)',
fontSize: 16,
},
},
xAxis: {
// data: companyList.map(item => item.name),
data: '',
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,
},
},
},
],
}
a.xAxis.data = this.companyList.map(item => item.name)
if (this.companyList.length > 18) {
a.dataZoom = [
{
// start: 9,//默认为@
// end: 100,//黑认认为1@0
type: "slider",
show: false,
// xAxisIndex: [0]
handlesize: 0,//滑动条的 左右2个滑动条的大小
startValue: 17,// 初始显示值
endValue: 0,// 结束显示值
height: 10,//组件高度
left: "5%",
right: "4%",//右边的距离
bottom: "25%",//底边的距离
borderColor: "#939",
fillerColor: "#269cdb",
borderRadius: 5,
backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
showDataShadow: false,//是否显示数据阴影
showDetail: false,//即拖拽时候是否显示详细数值信息
truerealtime: true,//是否实时更新
filterMode: "filter"
}, {
type: 'inside',
show: true,
start: 1,
end: 100,
zoomOnMouseWheel:false, //滚轮是否触发缩放
moveOnMouseMove:false, //鼠标滚轮触发滚动
}
]
}
this.commonOption = a
},
generateEcharts () {
// 左侧图表
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()
},
// 获取地址栏参数
getUrlParams (id) {
let url = window.location.href
// 通过 ? 分割获取后面的参数字符串
let urlStr = url.split('?')[1]
// 创建空对象存储参数
let obj = {};
// 再通过 & 将每一个参数单独分割出来
let paramsArr = urlStr.split('&')
for (let i = 0, len = paramsArr.length; i < len; i++) {
// 再通过 = 将每一个参数分割为 key:value 的形式
let arr = paramsArr[i].split('=')
obj[arr[0]] = arr[1];
}
this.access_token = obj.access_token
this.orgNumber = obj.id
this.titleName = decodeURIComponent(obj.name)
// Promise.all([this.getData(), this.getInstitutional()])
// .then((arr) => {
// this.generateEcharts()
// })
// .catch((err) => console.log(err));
this.getInstitutional()
},
// 获取组织机构
getInstitutional () {
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
"Data": {
"paramType": "ORG",
"orgNumber": this.orgNumber
// "orgNumber": '1494979736584079360'
}
}
post('/ierp/kapi/v2/mdnb/mdnb_das/Data/CockpitScreen', value).then(res => {
this.companyList = res.data.map(item => {
return { name: item.orgName, id: item.orgNumber }
})
this.getData()
this.judgeCarousel()
resolve(1);
})
});
},
getData () {
let that = this
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
"Data": {
"paramType": "DATA",
"orgNumber": this.orgNumber
}
}
post('/ierp/kapi/v2/mdnb/mdnb_das/Data/CockpitScreen', value).then(res => {
res.orgData = res.data[0]
// 定机构
// 弹窗
// return
// 左侧图表
tipData.analysis[0] = res.orgData.area1.intAnalysis.map(item => item.analysis)
//各二级企业本部机构数
dataL1[0] = []
dataL1[1] = []
dataL1[2] = []
res.orgData.area1.card1.forEach(item => {
dataL1[0].push(item['ZBPZ0088'])
dataL1[1].push(item['ZBPZ0010'])
dataL1[2].push(item['ZBPZ0089'])
})
// 各二级企业所属架构数
dataL2[0] = []
res.orgData.area1.card2.forEach(item => {
dataL2[0].push(item['ZBPZ0024'])
})
// 定职数
// 弹窗
// 左侧图表
tipData.analysis[2] = res.orgData.area2.intAnalysis.map(item => item.analysis)
//各二级企业本部中层管理人数
dataL3[0] = []
res.orgData.area2.card1.forEach(item => {
dataL3[0].push(item['ZBPZ0091'])
})
// 各二级企业管理人员数
dataL4[1] = []
dataL4[0] = []
dataL4[2] = []
res.orgData.area2.card1.forEach(item => {
dataL4[1].push(item['ZBPZ0091'])
dataL4[0].push(item['ZBPZ0093'])
dataL4[2].push(item['ZBPZ0092'])
})
// 定员额
// 弹窗
tipData.analysis[1] = res.orgData.area3.intAnalysis.map(item => item.analysis)
// 各二级企业总人数
dataL5[0] = []
dataL5[1] = []
dataL5[2] = []
res.orgData.area3.card1.forEach(item => {
dataL5[0].push(item['ZBPZ0006'])
dataL5[1].push(item['ZBPZ0050'])
dataL5[2].push(item['ZBPZ0051'])
})
// 各二级企业本部员额数
dataL6[0] = []
dataL6[2] = []
dataL6[1] = []
res.orgData.area3.card2.forEach(item => {
dataL6[0].push(item['ZBPZ0031'])
dataL6[2].push(item['ZBPZ0094'])
dataL6[1].push(item['ZBPZ0095'])
})
// 人数变化和全员劳动生产率变化率分析
dataL7[0] = []
dataL7[1] = []
res.orgData.area3.card3.forEach(item => {
dataL7[0].push(item['ZBPZ0050'])
dataL7[1].push(item['ZBPZ0039'])
})
// 人数变化和人工利润率变化分析
dataL8[0] = []
dataL8[1] = []
res.orgData.area3.card4.forEach(item => {
dataL8[0].push(item['ZBPZ0050'])
dataL8[1].push(item['ZBPZ0041'])
})
// 定机制
// 弹窗
tipData.analysis[6] = res.orgData.area4.intAnalysis.map(item => item.analysis)
// 各二级企业招聘需求公告人次情况
dataR1[0] = []
dataR1[1] = []
res.orgData.area4.card1.forEach(item => {
dataR1[0].push(item['ZBPZ0057'])
dataR1[1].push(item['ZBPZ0058'])
})
// 各二级企业录用结果公示人次
dataR2[0] = []
dataR2[1] = []
res.orgData.area4.card2.forEach(item => {
dataR2[0].push(item['ZBPZ0059'])
dataR2[1].push(item['ZBPZ0060'])
})
// 各二级企业年利润与招聘情况分析
dataR3[0] = []
dataR3[1] = []
res.orgData.area4.card3.forEach(item => {
dataR3[0].push(item['ZBPZ0054'])
dataR3[1].push(item['ZBPZ0055'])
})
// 各二级企业"退二进一"完成情况
dataR4[0] = []
dataR4[1] = []
res.orgData.area4.card4.forEach(item => {
dataR4[0].push(item['ZBPZ0056'])
dataR4[1].push(item['ZBPZ0055'])
})
// 定薪酬
// 弹窗
tipData.analysis[5] = res.orgData.area5.intAnalysis.map(item => item.analysis)
// 各二级企业在岗职工平均薪酬
dataR5[0] = []
dataR5[1] = []
res.orgData.area5.card1.forEach(item => {
dataR5[0].push(item['ZBPZ0064'])
dataR5[1].push(item['ZBPZ0063'])
})
// 各二级企业利润与薪酬变动情况
dataR6[0] = []
dataR6[1] = []
res.orgData.area5.card2.forEach(item => {
dataR6[0].push(item['ZBPZ0061'])
dataR6[1].push(item['ZBPZ0062'])
})
// 定任期
// 弹窗
tipData.analysis[6] = res.orgData.area6.intAnalysis.map(item => item.analysis)
// 各二级企业全员绩效考核
dataR7[0] = []
res.orgData.area6.card1.forEach(item => {
dataR7[0].push(item['ZBPZ0066'])
})
// 各二级企业任期制契约化考核完成率
dataR8[0] = []
res.orgData.area6.card2.forEach(item => {
dataR8[0].push(item['ZBPZ0065'])
})
// 中间
// 架岗人员
this.centerData.info.value1 = res.orgData.area7.ZBPZ0037
this.centerData.info.value2 = res.orgData.area7.ZBPZ0038
this.centerData.info.value3 = res.orgData.area7.ZBPZ0006
// 六定改革成效
// this.centerData.changeInfo[0].value1 = res.orgData.area8.ZBPZ0067
// this.centerData.changeInfo[0].value2 = res.orgData.area8.ZBPZ0068
// this.centerData.changeInfo[0].value3 = res.orgData.area8.ZBPZ0069
this.centerData.changeInfo[0].value1 = res.orgData.area8.ZBPZ0077
this.centerData.changeInfo[0].value2 = res.orgData.area8.ZBPZ0078
this.centerData.changeInfo[0].value3 = res.orgData.area8.ZBPZ0079
this.centerData.changeInfo[2].value1 = res.orgData.area8.ZBPZ0074
this.centerData.changeInfo[2].value2 = res.orgData.area8.ZBPZ0075
this.centerData.changeInfo[2].value3 = res.orgData.area8.ZBPZ0076
this.centerData.changeInfo[1].value1 = res.orgData.area8.ZBPZ0071
this.centerData.changeInfo[1].value2 = res.orgData.area8.ZBPZ0072
this.centerData.changeInfo[1].value3 = res.orgData.area8.ZBPZ0073
// 核心指标监测
// 弹窗
tipData.analysis[3] = res.orgData.area9.intAnalysis.map(item => item.analysis)
// 各二级企业全员劳动生产率
dataC1[0] = []
dataC1[1] = []
res.orgData.area9.card1.forEach(item => {
dataC1[0].push(item['ZBPZ0035'])
dataC1[1].push(item['ZBPZ0039'])
})
// 各二级企业人工成本利润率
dataC2[1] = []
dataC2[0] = []
res.orgData.area9.card2.forEach(item => {
dataC2[1].push(item['ZBPZ0040'])
dataC2[0].push(item['ZBPZ0041'])
})
this.echartC1.national = res.orgData.area9.card1[0].ZBPZ0097
this.echartC1.province = res.orgData.area9.card1[0].ZBPZ0096
this.echartC2.national = res.orgData.area9.card2[0].ZBPZ0099
this.echartC2.province = res.orgData.area9.card2[0].ZBPZ0098
// 分析预警中心
// 工作台分析
this.storageRecordConfig.data = []
res.orgData.area10.card1.forEach(item => {
this.storageRecordConfig.data.push(['', item.enterprise, item.work])
})
this.storageRecordConfig = { ...this.storageRecordConfig }
// 数据库预警
// this.storageRecordConfig2.data = []
// res.orgData.area10.card2.forEach(item => {
// this.storageRecordConfig.data.push(['', item.warning, item.date])
// })
// 数据整理
dataL7[0].forEach((item, index) => {
if (dataL7[1][index] < 0 && dataL7[0][index] > 0) {
let obj = { value: [this.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: [this.companyList[index].name, dataL8[0][index]], symbolSize: 15 }
this.twinkle8.push(obj)
}
})
// params.value > 0 && fjxdataL2[0][params.dataIndex] < 0
// fjxdataL2[0].forEach((item, index) => {
// if (fjxdataL2[1][index] > 0 && fjxdataL2[0][index] < 0) {
// let obj = { value: [this.companyList[index].name, fjxdataL2[1][index]], symbolSize: 15 }
// this.twinkleR6.push(obj)
// }
// })
this.tipData = tipData.analysis
this.generateEcharts()
if (this.companyList.length > 18) {
this.timeCommon = setInterval(() => {
if (that.touch) {
if (that.commonOption.dataZoom[0].startValue < that.companyList.length) {
that.commonOption.dataZoom[0].endValue += 18
that.commonOption.dataZoom[0].startValue += 18
} else {
that.commonOption.dataZoom[0].endValue = 0
that.commonOption.dataZoom[0].startValue = 18
}
that.generateEcharts()
}
}, 15000)
}
resolve(1)
})
});
},
handleShowTip (index) {
this.showTip = true
this.tipNum = index
},
handleGoPage (id, name) {
if (name == '山西三元煤业股份有限公司') {
window.location.href = './index4SY.html?id=' + id + `&access_token=${this.access_token}` + `&name=${name}`
} else {
window.location.href = './index4.html?id=' + id + `&access_token=${this.access_token}` + `&name=${name}`
}
},
handleGoBack () {
window.history.go(-1)
},
numFormat (value) {
if (!value) return '0'
// var intPart = Number(value).toFixed(0) // 获取整数部分
var intPart = parseInt(value)// 获取整数部分
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),
color: [
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#5e7ae9',
},
{
offset: 1,
color: '#082550',
},],
}
],
series: [
{
name: '各三级企业本部机构数核定上限',
type: 'line',
// yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 8, //标记的大小
smooth: false,
itemStyle: {
//折线拐点标志的样式
color: '#fbe138',
borderColor: '#fbe138',
width: 2,
shadowColor: '#fbe138',
shadowBlur: 4,
},
lineStyle: {
color: '#fbe138',
width: 2,
},
data: dataL1[2],
},
{
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: dataL1[0],
},
{
name: '当前各三级企业本部机构数',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: params => {
if (params.value > dataL1[2][params.dataIndex]) {
return 'yellow'
} else {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#5e7ae9',
},
{
offset: 1,
color: '#082550',
},
])
}
},
},
},
data: dataL1[1],
},
],
// tooltip: {
// trigger: 'item',
// position: 'top'
// },
}
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),
color: [
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},],
}
],
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'])
let option = {
..._.cloneDeep(this.commonOption),
color: [
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#6480f3',
},
{
offset: 1,
color: '#082550',
},],
}
],
series: [
{
name: '六定改革前各三级本部中层管理人数',
type: 'bar',
barWidth: 15,
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: '#69c0ff',
fontStyle: 'normal',
textAlign: 'left',
fontSize: 16,
},
formatter: function (data) {
if (data.name == '云时代') {
return data.value
} else {
return ''
}
}
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#6480f3',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataL4[0],
},
{
name: '当前各三级本部中层管理人数',
type: 'bar',
barWidth: 15,
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: '#6480f3',
fontStyle: 'normal',
textAlign: 'left',
fontSize: 16,
},
formatter: function (data) {
if (data.name == '云时代') {
return data.value
} else {
return ''
}
}
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#43ede3',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataL4[1],
},
{
name: '各三级本部中层管理人数核定上限',
type: 'line',
// yAxisIndex: 1,
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 8, //标记的大小
smooth: false,
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: '#fbe138',
fontStyle: 'normal',
textAlign: 'left',
fontSize: 16,
},
formatter: function (data) {
if (data.name == '云时代') {
return data.value
} else {
return ''
}
}
}
},
itemStyle: {
//折线拐点标志的样式
color: '#fbe138',
borderColor: '#fbe138',
width: 2,
shadowColor: '#fbe138',
shadowBlur: 4,
},
lineStyle: {
color: '#fbe138',
width: 2,
},
data: dataL4[2],
},
],
}
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),
color: [
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#6480f3',
},
{
offset: 1,
color: '#082550',
},],
}
],
series: [
{
name: '六定改革前各三级本部中层管理人数',
type: 'bar',
barWidth: 15,
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: '#69c0ff',
fontStyle: 'normal',
textAlign: 'left',
fontSize: 16,
},
formatter: function (data) {
if (data.name == '云时代') {
return data.value
} else {
return ''
}
}
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#6480f3',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataL4[0],
},
{
name: '当前各三级本部中层管理人数',
type: 'bar',
barWidth: 15,
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: '#6480f3',
fontStyle: 'normal',
textAlign: 'left',
fontSize: 16,
},
formatter: function (data) {
if (data.name == '云时代') {
return data.value
} else {
return ''
}
}
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#43ede3',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: dataL4[1],
},
{
name: '各三级本部中层管理人数核定上限',
type: 'line',
// yAxisIndex: 1,
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 8, //标记的大小
smooth: false,
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: '#fbe138',
fontStyle: 'normal',
textAlign: 'left',
fontSize: 16,
},
formatter: function (data) {
if (data.name == '云时代') {
return data.value
} else {
return ''
}
}
}
},
itemStyle: {
//折线拐点标志的样式
color: '#fbe138',
borderColor: '#fbe138',
width: 2,
shadowColor: '#fbe138',
shadowBlur: 4,
},
lineStyle: {
color: '#fbe138',
width: 2,
},
data: dataL4[2],
},
],
}
option.title.text = '各三级企业本部中层管理人数'
option.legend.data = ['六定改革前各三级本部中层管理人数', '当前各三级本部中层管理人数', '各三级本部中层管理人数核定上限']
option.legend.show = true
// option.yAxis.push({
// splitLine: {
// show: false,
// },
// axisLine: {
// show: false,
// },
// })
myChart.setOption(option)
},
initChartL5 () {
let myChart = echarts.init(this.$refs['echartL5'])
let option = {
..._.cloneDeep(this.commonOption),
color: [
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},],
}
],
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)
},
showTipClose () {
// this.paymentShow = false
this.showTip = false
this.showTip2 = false
this.titleShow = false
},
initChartL6 () {
let myChart = echarts.init(this.$refs['echartL6'])
let option = {
..._.cloneDeep(this.commonOption),
color: [
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#43ede3',
},
{
offset: 1,
color: '#082550',
},],
}
],
series: [
{
name: '各三级企业本部员额数',
type: 'bar',
barWidth: 15,
itemStyle: {
color: params => {
if (params.value > dataL6[1][params.dataIndex]) {
return 'red'
} else {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#43ede3',
},
{
offset: 1,
color: '#082550',
},
])
}
},
},
data: dataL6[0],
},
{
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: dataL6[2],
},
{
name: '各三级企业本部员额数核定上限',
type: 'line',
yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 8, //标记的大小
smooth: false,
itemStyle: {
//折线拐点标志的样式
color: '#fbe138',
borderColor: '#fbe138',
width: 2,
shadowColor: '#fbe138',
shadowBlur: 4,
},
lineStyle: {
color: '#fbe138',
width: 2,
},
data: dataL6[1],
},
],
}
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: [
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},],
}
],
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 > this.echartC1.province) {
return 'green'
} 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: this.echartC1.national,
lineStyle: {
color: '#fff',
},
label: {
formatter: '{b}',
position: 'end',
padding: [20, 100, 10, 30],
color: '#fff',
},
},
{
name: '央企平均水平',
yAxis: this.echartC1.province,
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 = {
show: true,
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: [
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},],
}
],
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 > this.echartC2.province) {
return 'green'
} 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: this.echartC2.province,
lineStyle: {
color: '#fff',
},
label: {
formatter: '{b}',
position: 'end',
padding: [24, 100, 10, 30],
color: '#fff',
},
},
{
name: '央企平均水平',
yAxis: this.echartC2.national,
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 = {
show: true,
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: [
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#45DAD1',
},
{
offset: 1,
color: '#082550',
},],
}
],
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: 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年累计招聘数']
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),
color: [
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#6480f3',
},
{
offset: 1,
color: '#082550',
},],
}
],
series: [
{
name: '2022年退出人数和2023年当前累计退出人数之和',
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年招聘人数和2023年当前累计招聘人数之和',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: params => {
if (dataR4[0][params.dataIndex] / 2 < params.value) {
return 'red'
}
else {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#6480f3',
},
{
offset: 1,
color: '#082550',
},
])
}
},
},
},
data: dataR4[1],
},
],
}
option.title.text = '各三级企业"退二进一"完成情况'
option.legend.data = ['2022年退出人数和2023年当前累计退出人数之和', '2022年招聘人数和2023年当前累计招聘人数之和']
option.legend.show = true
option.yAxis[0] = {
//type: 'log',
//min: 1,
//logBase: 3,
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLabel: {
show: true,
formatter: function (value) {
return value === 1 ? 0 : value
},
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
}
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),
color: [
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#B889EA',
},
{
offset: 1,
color: '#082550',
},],
}
],
series: [
{
name: '全员绩效考核完成率',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: params => {
if (params.value < 50) {
return 'yellow'
}
else {
return 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),
color: [
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#43ede3',
},
{
offset: 1,
color: '#082550',
},],
}
],
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)
},
},
})