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", }, configLast: { waitTime: 2000, header: ["学校名称", "成果项目", ''], rowNum: 4, data: [ ["山西大学", '煤矸石煤泥清洁高效利用关键技术与应用'], ["太原理工大学", '智能通风与灾害管控'], ["太原理工大学", '焦炉煤气整合技术'], ["太原理工大学", '煤焦化副产品精细'], ["河北理工大学", '瓦斯高效抽采关键技术与装备技术'], ], align: ["center", "center"], headerBGC: "#153A62", oddRowBGC: "#061F42", evenRowBGC: "#0C284A", }, configOrg: { waitTime: 2000, rowNum: 1, data: [ ["西铭矿选煤厂", '组织信息变更', '2023-05-19', '山焦西山'], ["房城建安有限公司", '组织信息变更', '2023-04-03', '山焦西山'], ["兴盛园煤业", '组织信息变更', '2023-04-03', '山焦霍州'], ["万家庄煤业", '组织信息变更', '2023-06-08', '山焦霍州'], ["山焦西山", '组织更名', '2023-07-11', '山焦西山'], ], align: ["center", "center", "center", "center", "center"], oddRowBGC: "#3B9DEE", evenRowBGC: "#1E5389", }, configChange: { waitTime: 2000, header: ["姓名", "调出单位", "调入单位", "调动时间", '变动状态', ""], rowNum: 4, data: [ ["王志军", '山焦霍州', '山焦人力', '2023-01-01', '调动完成'], ["胡国继", '山焦霍州', '山西焦煤集团招标有限公司', '2023-01-01', '调动完成'], ["解红梅", '公共事业发展分公司', '山焦霍州', '2023-01-01', '调动完成'], ["段树成", '山焦华晋', '山焦机电', '2023-01-01', '调动完成'], ["任勇华", '山焦西山', '山焦机电', '2023-01-01', '调动中'], ["任全祥", '山焦山煤', '山焦机电', '2023-01-01', '调动中'], ["宋旭海", '山焦华晋', '山焦销售', '2023-01-01', '调动中'], ["卫志毅", '汾西矿业集团公司', '山焦机电', '2023-01-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", }, 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] }, twoIndex: 1, time2: 1, time3: 1, time4: 1, isShowMark: false, changeFlag: false, userFlag: true, salaryIndex: 1, sx: [], xy: [], fx: [], fy1: [], fy2: [], fy3: [], fy4: [], } }, mounted() { this.$nextTick(() => { this.sx = spArr(salaryList.x, 5) this.sy = spArr(salaryList.y, 5) this.fx = spArr(mobilizeList.x, 5) this.fy1 = spArr(mobilizeList.y1, 5) this.fy2 = spArr(mobilizeList.y2, 5) this.fy3 = spArr(mobilizeList.y3, 5) this.fy4 = spArr(mobilizeList.y4, 5) console.log(this.fx); 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]}) 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) 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() }) }, 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]}) this.initLineElseEchartsR(echarts90, { x: that.sx[that.salaryIndex], y: that.sy[that.salaryIndex] }) that.salaryIndex += 1 }, 10000); }, // 针对从业人员类别的定时器 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 = { title: { show: false, top: 5, left: "center", text: title, textStyle: { color: "#5EB7FF", fontWeight: "normal", fontSize: 32 } }, grid: { top: 30, right: 40, 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: 30, }, }, //y轴线的颜色以及宽度 axisLine: { show: true, lineStyle: { color: "#1E5389", width: 1, type: "solid", }, }, }, yAxis: { name: unit, axisTick: { lineStyle: { color: "#18416F", }, }, // y轴的字体颜色 axisLabel: { textStyle: { color: "white", fontSize: 30, }, }, nameTextStyle: { fontSize: 30, }, 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: { barBorderRadius: [30, 30, 0, 0], color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 0, color: "#02355C", }, //柱图渐变色 { offset: 1, color: "#40A9FF", }, ]), }, onclick: function (params) { // 获取被点击的柱状图的数据 var data = params.data; console.log('点击的柱状图数据为:', data); // 在此处添加你的逻辑处理代码 } } ], legend: { data: ["入池人数", "出池人数"], textStyle: { // 图列内容样式 color: "#fff", // 字体颜色 // fontSize: "10", }, right: 30, icon: "roundRect", // 小图标的宽高 itemHeight: 5, }, }; 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' }, }, xAxis: { data: data.x, axisTick: { show: false, }, // x轴的字体颜色 axisLabel: { interval: 0, // rotate: 40, textStyle: { color: "white", fontSize: 30, }, }, //y轴线的颜色以及宽度 axisLine: { show: true, lineStyle: { color: "#1E5389", width: 1, type: "solid", }, }, }, yAxis: { name: unit, axisTick: { lineStyle: { color: "#18416F", }, }, // y轴的字体颜色 axisLabel: { textStyle: { color: "white", fontSize: 30, }, }, nameTextStyle: { fontSize: 30, 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) { this.LineChart = echarts.init(el); 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", }, }, }, 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: 30, 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: 30, color: "#fff", }, }, }, series: [ { name: "", type: "line", smooth: false, 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: "#45DAD1", }, { offset: 1, color: "#051F41", }, ], false ), }, }, itemStyle: { normal: { color: "#45DAD1", }, }, lineStyle: { normal: { width: 2, }, }, } ], }; this.LineChart.setOption(option); tools.loopShowTooltip(this.LineChart, option, { nterval: 2000, loopSeries: true, }); }, initLineElseEcharts(el, data) { let chart = echarts.init(el); 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", }, }, }, 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: 30, 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: 30, color: "#fff", }, }, }, series: [ { name: "", type: "line", smooth: false, 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, }, }, } ], }; chart.setOption(option); tools.loopShowTooltip(chart, option, { nterval: 2000, loopSeries: true, }); }, initLineElseEchartsR(el, data) { this.LineElse = echarts.init(el); 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: "{b} : {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: 30, color: "#fff", }, }, }, yAxis: { type: "value", min: 60, max: 100, splitNumber: 3, interval: 20, splitLine: { show: true, lineStyle: { color: "#204561", width: 1, type: "dotted", }, }, axisTick: { show: false, }, axisLine: { lineStyle: { color: "#7ECEF4", }, }, axisLabel: { margin: 10, textStyle: { fontSize: 30, color: "#fff", }, }, }, series: [ { name: "", type: "line", smooth: false, 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, }, }, } ], }; this.LineElse.setOption(option); tools.loopShowTooltip(this.LineElse, option, { nterval: 2000, loopSeries: true, }); }, initChartR1(el) { let myChart = echarts.init(el) data = echarts2; arrName = getArrayValue(data, "name"); arrValue = getArrayValue(data, "value"); sumValue = eval(arrValue.join("+")); objData = array2obj(data, "name"); optionData = getData(data); function getArrayValue(array, key) { var key = key || "value"; var res = []; if (array) { array.forEach(function (t) { res.push(t[key]); }); } return res; } function array2obj(array, key) { var resObj = {}; for (var i = 0; i < array.length; i++) { resObj[array[i][key]] = array[i]; } return resObj; } function getData(data) { var res = { series: [], yAxis: [], }; for (let i = 0; i < data.length; i++) { // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']); res.series.push({ name: "", type: "pie", clockWise: false, //顺时加载 hoverAnimation: false, //鼠标移入变大 radius: [53 - i * 15 + "%", 48 - i * 15 + "%"], center: ["35%", "50%"], label: { show: false, }, itemStyle: { label: { show: false, }, labelLine: { show: false, }, borderWidth: 5, }, data: [ { value: data[i].value, name: data[i].name, }, { value: sumValue - data[i].value, name: "", itemStyle: { color: "rgba(0,0,0,0)", borderWidth: 0, }, tooltip: { show: false, }, hoverAnimation: false, }, ], }); res.series.push({ name: "", type: "pie", silent: true, z: 1, clockWise: false, //顺时加载 hoverAnimation: false, //鼠标移入变大 radius: [53 - i * 15 + "%", 48 - i * 15 + "%"], center: ["35%", "50%"], label: { show: false, }, itemStyle: { label: { show: false, }, labelLine: { show: false, }, borderWidth: 5, }, data: [ { value: 7.5, itemStyle: { color: "rgb(3, 31, 62)", borderWidth: 0, }, tooltip: { show: false, }, hoverAnimation: false, }, { value: 2.5, name: "", itemStyle: { color: "rgba(0,0,0,0)", borderWidth: 0, }, tooltip: { show: false, }, hoverAnimation: false, }, ], }); res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%"); } return res; } let option = { graphic: { elements: [{ type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group, style: { image: './images/loop.png', //这里添加图片地址 width: 320, height: 320 }, left: '150',// top: 'middle' //配置图片居中 }] }, legend: { show: true, icon: "circle", top: "center", left: "60%", data: arrName, width: 50, formatter: function (name) { return ( "{title|" + name + "} {value|" + objData[name].value + "} {title|项}" ); }, textStyle: { rich: { title: { fontSize: 24, lineHeight: 28, color: "#fff", }, value: { fontSize: 32, lineHeight: 35, color: "#95DE64", fontWeight: "bolder" }, }, }, }, tooltip: { show: false, normal: { show: false, trigger: "item", textStyle: { fontSize: 30, color: '#A3E2F4' }, label: { margin: 10, // label 距离轴的距离 color: '#FFF', // 文字的颜色 fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体) fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700) fontSize: '30', // 文字字体大小 lineHeight: '50', // 行高 }, }, // formatter: "{a}
{b}:{c}({d}%)666", textStyle: { color: '#FFF', // 文字的颜色 fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体) fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700) }, formatter: data => { console.log(data) // 小圆点 return `
${data.name}:${data.percent}` }, }, color: [ "rgb(24, 183, 142)", "rgb(1, 179, 238)", "rgb(22, 75, 205)", "rgb(52, 52, 176)", ], grid: { top: "21%", bottom: "48%", left: "36%", containLabel: false, }, yAxis: [ { type: "category", inverse: true, axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { interval: 0, inside: true, textStyle: { color: "#fff", fontSize: 24, }, show: true, }, data: optionData.yAxis, }, ], xAxis: [ { show: false, }, ], series: optionData.series, } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }); }, initChartsBig(el) { this.leftEcharts5 = echarts.init(el); let option = { color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"], 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: 30 }, 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: '本期值', //icon:'image://../wwwroot/js/url2.png', //路径 }, { name: '同期值', }], 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: 20, } }, axisTick: {//坐标轴刻度相关设置。 show: false, }, axisLine: {//坐标轴轴线相关设置 lineStyle: { color: '#fff', opacity: 0.2 } }, splitLine: { //坐标轴在 grid 区域中的分隔线。 show: false, } } ], yAxis: [ { name: "万元/人", type: 'value', splitNumber: 5, axisLabel: { textStyle: { color: '#a8aab0', fontStyle: 'normal', fontFamily: '微软雅黑', fontSize: 30, } }, nameTextStyle: { color: "#a8aab0", fontSize: 30 }, axisLine: { show: false }, axisTick: { show: false }, splitLine: { show: false, lineStyle: { color: ['#fff'], } } } ], series: [ { name: '本期值', type: 'bar', data: data.y1, barWidth: 10, barGap: 0,//柱间距离 label: {//图形上的文本标签 normal: { show: false, position: 'top', textStyle: { color: '#a8aab0', fontStyle: 'normal', fontFamily: '微软雅黑', fontSize: 30, }, }, }, itemStyle: {//图形样式 normal: { barBorderRadius: [5, 5, 0, 0], color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 1, color: '#153363' }, { offset: 0, color: 'rgba(104, 253, 255, 0.7)' }], false), }, }, markLine: { symbol: ['none'], silent: true, data: [{ yAxis: 15.3, name: "社会劳动生产率", lineStyle: { normal: { type: "dashed", width: 3, color: '#3E7DFE' } }, label: { show: true, distance: 20, fontWeight: "lighter", formatter: "社会劳动生产率", }, }, { yAxis: 50.8, lineStyle: { normal: { type: "dashed", width: 3, color: 'red' } }, label: { show: true, distance: 20, fontWeight: "lighter", formatter: "省属企业平均劳动生产率", }, }, { yAxis: 69.2, lineStyle: { normal: { type: "dashed", width: 3, color: 'rgba(127, 128, 225, 0.7)' } }, label: { show: true, distance: 20, fontWeight: "lighter", formatter: "央企平均劳动生产率", }, },] }, }, { name: '同期值', type: 'bar', data: data.y2, barWidth: 10, barGap: 0.2,//柱间距离 label: {//图形上的文本标签 normal: { show: false, position: 'top', textStyle: { color: '#a8aab0', fontStyle: 'normal', fontFamily: '微软雅黑', fontSize: 30, }, }, }, itemStyle: {//图形样式 normal: { barBorderRadius: [5, 5, 0, 0], color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 1, color: '#153363' }, { offset: 0, color: 'rgba(127, 128, 225, 0.7)' }], false), }, }, } ] }; 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: '15%', right: '15%', bottom: '10%', top: 50, }, legend: {//图例组件,颜色和名字 right: 10, top: 0, itemGap: 16, itemWidth: 18, itemHeight: 10, data: [{ name: '本期值', //icon:'image://../wwwroot/js/url2.png', //路径 }, { name: '同期值', }], 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: 20, } }, axisTick: {//坐标轴刻度相关设置。 show: false, }, axisLine: {//坐标轴轴线相关设置 lineStyle: { color: '#fff', opacity: 0.2 } }, splitLine: { //坐标轴在 grid 区域中的分隔线。 show: false, } } ], yAxis: [ { name, type: 'value', splitNumber: 5, axisLabel: { textStyle: { color: '#a8aab0', fontStyle: 'normal', fontFamily: '微软雅黑', fontSize: 30, } }, nameTextStyle: { color: "#a8aab0", fontSize: 30 }, axisLine: { show: false }, axisTick: { show: false }, splitLine: { show: false, lineStyle: { color: ['#fff'], } } } ], series: [ { name: '本期值', type: 'bar', data: data.y1, barWidth: 10, barGap: 0,//柱间距离 label: {//图形上的文本标签 normal: { show: false, position: 'top', textStyle: { color: '#a8aab0', fontStyle: 'normal', fontFamily: '微软雅黑', fontSize: 30, }, }, }, itemStyle: {//图形样式 normal: { barBorderRadius: [5, 5, 0, 0], color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 1, color: '#153363' }, { offset: 0, color: 'rgba(104, 253, 255, 0.7)' }], false), }, }, markLine: { symbol: ['none'], silent: true, data: [{ yAxis: lineInfo.value, name: lineInfo.name, lineStyle: { normal: { type: "dashed", width: 3, color: '#3E7DFE' } }, label: { show: true, distance: 20, fontWeight: "lighter", formatter: lineInfo.name, }, }] }, }, { name: '同期值', type: 'bar', data: data.y2, barWidth: 10, barGap: 0.2,//柱间距离 label: {//图形上的文本标签 normal: { show: false, position: 'top', textStyle: { color: '#a8aab0', fontStyle: 'normal', fontFamily: '微软雅黑', fontSize: 30, }, }, }, itemStyle: {//图形样式 normal: { barBorderRadius: [5, 5, 0, 0], color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 1, color: '#153363' }, { offset: 0, color: 'rgba(127, 128, 225, 0.7)' }], false), }, }, } ] }; 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: 20, } }, 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' } }, 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: '28%', }, xAxis: [{ type: 'category', data: data.x, axisLabel: { // inside: true, rotate: 30, padding: [15, 0, 0, 0], textStyle: { color: "#fff", fontSize: 20, } }, 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, }); }, initStereoscopic(el) { let chart = echarts.init(el); // 绘制左侧面 const CubeLeft = echarts.graphic.extendShape({ shape: { x: 0, y: 0 }, buildPath: function (ctx, shape) { // 会canvas的应该都能看得懂,shape是从custom传入的 const xAxisPoint = shape.xAxisPoint const c0 = [shape.x + 17, shape.y] const c1 = [shape.x - 23, shape.y - 6] const c2 = [xAxisPoint[0] - 23, xAxisPoint[1] - 13] const c3 = [xAxisPoint[0] + 17, xAxisPoint[1]] ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath() } }) // 绘制右侧面 const CubeRight = echarts.graphic.extendShape({ shape: { x: 0, y: 0 }, buildPath: function (ctx, shape) { const xAxisPoint = shape.xAxisPoint const c1 = [shape.x + 17, shape.y] const c2 = [xAxisPoint[0] + 17, xAxisPoint[1]] const c3 = [xAxisPoint[0] + 35, xAxisPoint[1] - 15] const c4 = [shape.x + 35, shape.y - 15] ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath() } }) // 绘制顶面 const CubeTop = echarts.graphic.extendShape({ shape: { x: 0, y: 0 }, buildPath: function (ctx, shape) { const c1 = [shape.x + 17, shape.y] const c2 = [shape.x + 35, shape.y - 15] //右点 const c3 = [shape.x - 5, shape.y - 20] const c4 = [shape.x - 23, shape.y - 6] ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath() } }) // 注册三个面图形 echarts.graphic.registerShape('CubeLeft', CubeLeft) echarts.graphic.registerShape('CubeRight', CubeRight) echarts.graphic.registerShape('CubeTop', CubeTop) const VALUE = [100, 56, 50] option = { tooltip: { trigger: 'axis', textStyle: { fontSize: 30, color: '#A3E2F4' }, axisPointer: { type: 'shadow' }, formatter: function (params, ticket, callback) { const item = params[1] return item.name + ' : ' + item.value; } }, grid: { left: '10%', right: '10%', top: '17%', bottom: '12%', }, xAxis: { type: 'category', data: ['中止合同人员', '双创人员', '考核待岗人员'], axisLine: { show: false, lineStyle: { color: 'white' } }, axisTick: { show: false, length: 9, alignWithLabel: true, lineStyle: { color: '#7DFFFD', fontSize: 35, } }, axisLabel: { fontSize: 35 } }, yAxis: { show: false, type: 'value', axisLine: { show: true, lineStyle: { color: 'white' } }, splitLine: { show: false }, axisTick: { show: false }, axisLabel: { fontSize: 30 }, boundaryGap: ['20%', '20%'] }, series: [{ type: 'custom', renderItem: (params, api) => { const location = api.coord([api.value(0), api.value(1)]) return { type: 'group', children: [{ type: 'CubeLeft', shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1], xAxisPoint: api.coord([api.value(0), 0]) }, style: { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#1BC9F1' }, { offset: 1, color: '#1C7084' } ]) } }, { type: 'CubeRight', shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1], xAxisPoint: api.coord([api.value(0), 0]) }, style: { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#1C7287' }, { offset: 1, color: '#1BC3EB' } ]) } }, { type: 'CubeTop', shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1], xAxisPoint: api.coord([api.value(0), 0]) }, style: { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#06728A' }, { offset: 1, color: '#06728A' } ]) } }] } }, data: VALUE }, { type: 'bar', label: { normal: { show: true, position: 'top', formatter: (e) => { switch (e.name) { case '雄县': return VALUE[0] case '安新': return VALUE[1] case '容城': return VALUE[2] } }, fontSize: 30, color: '#fff', offset: [2, -25] } }, itemStyle: { color: 'transparent' }, tooltip: { }, data: VALUE }] } 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: 35, 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: 1, value2: 3 }, { name: '太原市', value: 1, value2: 4 }, { name: '太原市', value: 1, value2: 5 }, { 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 = { 太原市: [112.149248, 37.957014], 大同市: [113.295259, 40.09031], 阳泉市: [113.505474, 38.064652], 长治市: [113.113556, 36.191112], 晋城市: [112.551274, 35.577553], 朔州市: [112.433387, 39.531261], 晋中市: [112.936465, 37.696495], 运城市: [111.003957, 35.222778], 忻州市: [112.733538, 38.8769], 临汾市: [111.517973, 36.08415], 吕梁市: [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 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 == 'scatter') { let tipHtml = `

数量:${data[params.dataIndex].value2}

` callback(ticket, tipHtml) return tipHtml } if (params.componentSubType == 'map') { let tipHtml = `

数量:${data[params.dataIndex].value2}

` callback(ticket, tipHtml) return tipHtml } }, }, geo: { show: true, map: 'shanxi', layoutCenter: ['50.5%', '52%'], //地图位置 layoutSize: '100%', layoutCenter: ["50%", "50%"], //地图位置 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: '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: '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: 30, data: series[1].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' } }, 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: 26 }, }, 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: 0, color: 'rgba(0,244,255,1)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(0,77,167,1)' // 100% 处的颜色 }], false), barBorderRadius: [30, 30, 30, 30], 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: '{b}
{a0}: {c0}', }, xAxis: { data: xLabel, axisLine: { show: true, //隐藏X轴轴线 lineStyle: { color: '#11417a' } }, axisTick: { show: false //隐藏X轴刻度 }, axisLabel: { show: true, margin: 14, fontSize: 30, textStyle: { 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: 26, 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) { this.mobilizeFL = echarts.init(el); option = { tooltip: { show: true, trigger: 'axis', textStyle: { fontSize: 30, color: '#A3E2F4' }, axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data: ["入职","内部调动","跨二级调出","跨二级调入",], align: 'left', itemGap: 50, // x: 'right', 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: 26, textStyle: { color: "#fff" //X轴文字颜色 } }, }, series: [ { type: 'bar', name:"入职", stack: 'total', barWidth: 26, itemStyle: { barBorderRadius: [30, 30, 30, 30], }, data: data.y1, }, { type: 'bar', stack: 'total', name:"内部调动", barWidth: 26, itemStyle: { barBorderRadius: [30, 30, 30, 30], }, data: data.y2, }, { type: 'bar', name:"跨二级调出", stack: 'total', barWidth: 26, itemStyle: { barBorderRadius: [30, 30, 30, 30], }, data: data.y3, }, { type: 'bar', stack: 'total', name:"跨二级调入", barWidth: 26, itemStyle: { barBorderRadius: [30, 30, 30, 30], }, data: data.y4, }, ], }; this.mobilizeFL.setOption(option); tools.loopShowTooltip(this.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'], ], 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 } }, }, })