let app = new Vue({ el: '#app', data () { return { list: '', companyList: [ { name: '核心人力-1' }, { name: '核心人力-2' }, { name: '内部人才市场' }, { name: '薪酬福利' }, { name: '培训' } ], config5: { waitTime: 2000, header: ["单位名称", "平均工资涨幅", ''], data: [ ["山焦财务", '-12%'], ["山焦担保", '4%'], ["山焦股份", '6%'], ["山焦国华", '20%'], ["山焦国华", '9%'], ["山焦财务", '-1%'], ["山焦担保", '4%'], ["山焦股份", '6%'], ["山焦国华", '20%'], ["山焦国华", '9%'] ], align: ["center", "center"], headerBGC: "#153A62", oddRowBGC: "#061F42", evenRowBGC: "#0C284A", }, } }, mounted () { setTimeout(() => { this.budgetECharts(); this.salaryECharts(); this.aiQualityECharts1(); this.aiQualityECharts2(); }) }, methods: { aiQualityECharts1 () { let chart = echarts.init(document.getElementById("aiQuality1")); let option = { grid: { top: 30, right: 40, left: 75, bottom: 50, }, tooltip: { show: true, trigger: "axis", axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: "shadow", // 默认为直线,可选为:'line' | 'shadow' }, }, xAxis: { data: ["集团本部", "山焦财务", "山焦担保", "山焦股份", "山焦国华", "山焦机电", "山焦人力", "山焦民爆", "山焦事业", "山焦投资"], axisTick: { show: false, }, // x轴的字体颜色 axisLabel: { interval: 0, rotate: 40, textStyle: { color: "white", }, }, //y轴线的颜色以及宽度 axisLine: { show: true, lineStyle: { color: "#1E5389", width: 1, type: "solid", }, }, }, yAxis: { name: "单位吨:工", nameTextStyle: {//y轴上方单位的颜色 color: '#fff', }, axisTick: { lineStyle: { color: "#18416F", }, }, // y轴的字体颜色 axisLabel: { textStyle: { 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: [1200, 680, 562, 268, 717, 843, 987, 126, 723, 569], showBackground: true, backgroundStyle: { color: "#18416F", }, barWidth: "10%", itemStyle: { barBorderRadius: [10, 10, 0, 0], color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 0, color: "#13445D", }, //柱图渐变色 { offset: 1, color: "#45DAD1", }, ]), }, } ], legend: { data: ["入池人数", "出池人数"], textStyle: { // 图列内容样式 color: "#fff", // 字体颜色 // fontSize: "10", }, right: 30, icon: "roundRect", // 小图标的宽高 itemHeight: 5, }, }; chart.setOption(option); tools.loopShowTooltip(chart, option, { nterval: 2000, loopSeries: true, }); }, aiQualityECharts2 () { let chart = echarts.init(document.getElementById("aiQuality2")); let option = { grid: { top: 30, right: 40, left: 75, bottom: 50, }, tooltip: { show: true, trigger: "axis", axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: "shadow", // 默认为直线,可选为:'line' | 'shadow' }, }, xAxis: { data: ["集团本部", "山焦财务", "山焦担保", "山焦股份", "山焦国华", "山焦机电", "山焦人力", "山焦民爆", "山焦事业", "山焦投资"], axisTick: { show: false, }, // x轴的字体颜色 axisLabel: { interval: 0, rotate: 40, textStyle: { color: "white", }, }, //y轴线的颜色以及宽度 axisLine: { show: true, lineStyle: { color: "#1E5389", width: 1, type: "solid", }, }, }, yAxis: { name: "单位吨:人", nameTextStyle: {//y轴上方单位的颜色 color: '#fff' }, axisTick: { lineStyle: { color: "#18416F", }, }, // y轴的字体颜色 axisLabel: { textStyle: { 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: [1200, 680, 562, 268, 717, 843, 987, 126, 723, 569], showBackground: true, backgroundStyle: { color: "#18416F", }, barWidth: "10%", itemStyle: { barBorderRadius: [10, 10, 0, 0], 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, }, }; chart.setOption(option); tools.loopShowTooltip(chart, option, { nterval: 2000, loopSeries: true, }); }, budgetECharts () { let chart = echarts.init(document.getElementById("budget")); let option = { grid: { top: 35, right: 40, left: 60, bottom: 50, }, tooltip: { show: true, trigger: "axis", axisPointer: { lineStyle: { color: "#ddd", }, }, }, legend: { textStyle: { // 图列内容样式 color: "#fff", // 字体颜色 // fontSize: "10", }, right: 30, icon: "roundRect", // 小图标的宽高 itemHeight: 5 }, xAxis: { type: "category", data: ["集团公司", "山焦西山", "山焦汾西", "山焦霍州", '山焦山煤', '山焦华晋', '山焦焦化', '山焦民爆'], boundaryGap: false, splitLine: { show: false, interval: "auto", }, axisTick: { show: false, }, axisLine: { lineStyle: { color: "#7ECEF4", }, }, axisLabel: { interval: 0, rotate: 40, margin: 10, textStyle: { // fontSize: 10, 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: 10, color: "#fff", }, }, }, series: [ { name: "", type: "line", smooth: false, showSymbol: true, // 节点长显 symbol: 'image://' + 'data:image/png;base64,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', symbolSize: 30, data: ["1100", "400", "608", "811", '358', '698', '125', '765'], 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, }, }, } ], }; chart.setOption(option); tools.loopShowTooltip(chart, option, { nterval: 2000, loopSeries: true, }); }, salaryECharts () { let chart = echarts.init(document.getElementById("salary")); let option = { grid: { top: 35, right: 40, left: 60, bottom: 50, }, tooltip: { show: true, trigger: "axis", axisPointer: { lineStyle: { color: "#ddd", }, }, }, legend: { textStyle: { // 图列内容样式 color: "#fff", // 字体颜色 // fontSize: "10", }, right: 30, icon: "roundRect", // 小图标的宽高 itemHeight: 5, }, xAxis: { type: "category", data: ["集团公司", "山焦西山", "山焦汾西", "山焦霍州", '山焦山煤', '山焦华晋', '山焦焦化', '山焦民爆'], boundaryGap: false, splitLine: { show: false, interval: "auto", }, axisTick: { show: false, }, axisLine: { lineStyle: { color: "#7ECEF4", }, }, axisLabel: { interval: 0, rotate: 40, margin: 10, textStyle: { // fontSize: 10, 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: 10, color: "#fff", }, }, }, series: [ { name: "", type: "line", smooth: false, showSymbol: true, symbol: 'image://' + 'data:image/png;base64,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', symbolSize: 30, data: ['8000', '5000', '3500', '9000', '6000', '18000', '7500', '4500'], 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, }, }, } ], }; chart.setOption(option); tools.loopShowTooltip(chart, option, { nterval: 2000, loopSeries: true, }); }, }, })