function bottomOption(alldata) { let data = []; for (var i in alldata) { data.push(alldata[i]); } let option = { // title: { // text: "公司运营趋势", // textStyle: { // color: "#fff" // } // }, color: [ "#73c0de", "#fac858", "#91cc75", "#3ba272", "#fc8452", "#9a60b4", "#3fb1e3", "#6be6c1", "#626c91", "#a0a7e6", "#c4ebad", "#96dee8" ], grid: { top: "15%", left: "3%", right: "4%", bottom: "0%", containLabel: true }, legend: { data: ["服务客户数量"], top: "0%", textStyle: { color: "#fff" } }, tooltip: { trigger: "item", backgroundColor: "#031952", color: "#fff", borderWidth: "0", //边框宽度设置1 // borderColor: "gray", //设置边框颜色 textStyle: { color: "#fff" //设置文字颜色 } }, xAxis: { type: "category", axisLabel: { color: "#fff" }, boundaryGap: false, data: [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ] }, yAxis: { type: "value", axisLabel: { color: "#fff" } }, series: [ { name: "服务对象数量", data: data, type: "line", smooth: true, areaStyle: {} } ] }; return option; } function bottomOption1(alldata) { let baoan = []; let chiz = []; let paiq = []; alldata.forEach(item => { for (var i in item) { for (var j in item[i]) { if (i === "baoan") { baoan.push(item[i][j]); } else if (i === "chiz") { chiz.push(item[i][j]); } else if (i === "paiq") { paiq.push(item[i][j]); } } } }); let option = { // title: { // text: "公司运营趋势", // textStyle: { // color: "#fff" // } // }, color: [ "#73c0de", "#fac858", "#91cc75", "#3ba272", "#fc8452", "#9a60b4", "#3fb1e3", "#6be6c1", "#626c91", "#a0a7e6", "#c4ebad", "#96dee8" ], grid: { top: "15%", left: "3%", right: "4%", bottom: "0%", containLabel: true }, legend: { data: ["保安员数量", "派遣数量", "持证数量"], top: "0%", textStyle: { color: "#fff" } }, tooltip: { trigger: "axis", backgroundColor: "#031952", color: "#fff", borderWidth: "0", //边框宽度设置1 // borderColor: "gray", //设置边框颜色 textStyle: { color: "#fff" //设置文字颜色 } }, xAxis: { type: "category", axisLabel: { color: "#fff" }, boundaryGap: false, data: [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ] }, yAxis: { // name: "(元)", type: "value", axisLabel: { color: "#fff" } }, series: [ { name: "保安员数量", type: "line", stack: "总量", data: baoan }, { name: "派遣数量", type: "line", stack: "总量", data: paiq }, { name: "持证数量", type: "line", stack: "总量", data: chiz } ] }; return option; } function middleOption1(alldata) { let baoan = []; let zc = []; let chiz = []; let sheb = []; let paiq = []; alldata.forEach(item => { for (var i in item) { for (var j in item[i]) { if (i === "baoan") { baoan.push(item[i][j]); } else if (i === "zc") { zc.push(item[i][j]); } else if (i === "chiz") { chiz.push(item[i][j]); } else if (i === "sheb") { sheb.push(item[i][j]); } else if (i === "paiq") { paiq.push(item[i][j]); } } } }); let option = { // title: { // text: "公司保安类数据对比", // textStyle: { // color: "#fff" // } // }, tooltip: { trigger: "axis", backgroundColor: "#031952", color: "#fff", borderWidth: "0", //边框宽度设置1 // borderColor: "gray", //设置边框颜色 textStyle: { color: "#fff" //设置文字颜色 } }, legend: { data: [ "总保安数", "正常保安数", "持证保安数", "过考保安数", "缴纳社保保安数", "保安派遣" ], bottom: "0%", textStyle: { color: "#fff" } }, color: [ "#73c0de", "#fac858", "#91cc75", "#3ba272", "#fc8452", "#9a60b4", "#3fb1e3", "#6be6c1", "#626c91", "#a0a7e6", "#c4ebad", "#96dee8" ], grid: { top: "10%", left: "3%", right: "2%", bottom: "15%", containLabel: true }, xAxis: { type: "category", boundaryGap: true, axisLabel: { color: "#fff" }, data: [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ] }, yAxis: { type: "value", axisLabel: { color: "#fff" } }, series: [ { name: "总保安数", type: "bar", barWidth: 9, data: baoan }, { name: "正常保安数", type: "bar", barWidth: 9, data: zc }, { name: "持证保安数", type: "bar", barWidth: 9, data: chiz }, // { // name: "过考保安数", // type: "bar", // barWidth: 9, // data: [] // }, { name: "缴纳社保保安数", type: "bar", barWidth: 9, data: sheb }, { name: "保安派遣", type: "bar", barWidth: 9, data: paiq } ] }; return option; } function middleOption2(alldata) { let data = []; for (var i in alldata) { data.push(alldata[i]); } let option = { // title: { // text: "服务客户", // textStyle: { // color: "#fff" // } // }, tooltip: { trigger: "axis", axisPointer: { type: "shadow" }, backgroundColor: "#031952", color: "#fff", borderWidth: "0", //边框宽度设置1 // borderColor: "gray", //设置边框颜色 textStyle: { color: "#fff" //设置文字颜色 } }, legend: { data: ["客户数"], bottom: "0%", textStyle: { color: "#fff" } }, color: [ "#73c0de", "#fac858", "#91cc75", "#3ba272", "#fc8452", "#9a60b4", "#3fb1e3", "#6be6c1", "#626c91", "#a0a7e6", "#c4ebad", "#96dee8" ], grid: { top: "10%", left: "10%", right: "2%", bottom: "25%", containLabel: false }, xAxis: { type: "category", boundaryGap: true, axisLabel: { color: "#fff", interval: 0, rotate: 40 }, data: [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ] }, yAxis: { type: "value", axisLabel: { color: "#fff" } }, series: [ { name: "客户数", type: "bar", data: data } ] }; return option; } function bottomOption2(alldata) { let data = []; let qcount = alldata["qcount"] || 0; data.push({ name: "青年", value: qcount }); let zcount = alldata["zcount"] || 0; data.push({ name: "中年", value: zcount }); let lcount = alldata["lcount"] || 0; data.push({ name: "老年", value: lcount }); let option = { tooltip: { trigger: "item", formatter: "{a}
{b}:{c}({d}%)", axisPointer: { type: "shadow" }, backgroundColor: "#031952", //设置背景图片 rgba格式 color: "#fff", borderWidth: "0", //边框宽度设置1 // borderColor: "gray", //设置边框颜色 textStyle: { color: "#fff" //设置文字颜色 } }, // legend: { // data: ["青年", "中年", "老年"], // top: "0%", // itemHeight: 10, // textStyle: { // color: "#fff" // } // }, color: [ "#73c0de", "#fac858", "#91cc75", "#3ba272", "#fc8452", "#9a60b4", "#3fb1e3", "#6be6c1", "#626c91", "#a0a7e6", "#c4ebad", "#96dee8" ], grid: { top: "10%", left: "5%", right: "30%", bottom: "4%", containLabel: true }, series: [ { name: "年龄结构", type: "pie", center: ["33%", "50%"], radius: "70%", data: data, label: { color: "#fff" } } ] }; return option; } function economicMiddle(data1, data2) { let sbData = []; let pqData = []; for (var a in data1) { sbData.push(data1[a]); } for (var b in data2) { pqData.push(data2[b]); } let option = { tooltip: { trigger: "axis", backgroundColor: "#031952", color: "#fff", borderWidth: "0", //边框宽度设置1 // borderColor: "gray", //设置边框颜色 textStyle: { color: "#fff" //设置文字颜色 } }, legend: { data: ["缴纳社保人数", "公司派遣人数"], bottom: "0%", textStyle: { color: "#fff" } }, color: [ "#73c0de", "#fac858", "#91cc75", "#3ba272", "#fc8452", "#9a60b4", "#3fb1e3", "#6be6c1", "#626c91", "#a0a7e6", "#c4ebad", "#96dee8" ], grid: { top: "10%", left: "5%", right: "4%", bottom: "15%", containLabel: true }, xAxis: { type: "category", boundaryGap: false, axisLabel: { color: "#fff" }, data: [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ] }, yAxis: { type: "value", axisLabel: { color: "#fff" } }, series: [ { name: "缴纳社保人数", type: "line", stack: "总量", data: sbData }, { name: "公司派遣人数", type: "line", stack: "总量", data: pqData } ] }; return option; } function economicPieOption(allData) { let title = "总"; let total = Number(allData.PCount) + Number(allData.WPCount); let option = { title: [ { text: "{name|" + title + "}\n{val|" + total + "}", top: "center", left: "center", textStyle: { rich: { name: { fontSize: 14, fontWeight: "normal", color: "#fff", padding: [10, 0] }, val: { fontSize: 20, fontWeight: "bold", color: "#fff" } } } } ], tooltip: { trigger: "item", backgroundColor: "#031952", color: "#fff", borderWidth: "0", //边框宽度设置1 // borderColor: "gray", //设置边框颜色 textStyle: { color: "#fff" //设置文字颜色 } }, legend: { bottom: "0%", right: "5%", textStyle: { color: "#fff" }, orient: "vertical" }, color: [ "#73c0de", "#fac858", "#91cc75", "#3ba272", "#fc8452", "#9a60b4", "#3fb1e3", "#6be6c1", "#626c91", "#a0a7e6", "#c4ebad", "#96dee8" ], series: [ { name: "人员分布", type: "pie", radius: ["40%", "70%"], label: { color: "#fff" }, data: [ { value: allData.PCount, name: "已派遣人数" }, { value: allData.WPCount, name: "未派遣人数" } ] } ] }; return option; } export default { bottomOption, bottomOption1, middleOption1, middleOption2, economicMiddle, economicPieOption, bottomOption2 };