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: "10%", left: "3%", right: "4%", bottom: "15%", containLabel: true }, legend: { data: ["趋势"], bottom: "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: { name: "(元)", type: "value", axisLabel: { color: "#fff" } }, series: [ { name: "趋势", data: data, type: "line", smooth: true, areaStyle: {} } ] }; return option; } function bottomOption1(alldata) { let option = { // title: { // text: "公司运营趋势", // textStyle: { // color: "#fff" // } // }, color: [ "#73c0de", "#fac858", "#91cc75", "#3ba272", "#fc8452", "#9a60b4", "#3fb1e3", "#6be6c1", "#626c91", "#a0a7e6", "#c4ebad", "#96dee8" ], grid: { top: "10%", left: "3%", right: "4%", bottom: "15%", containLabel: true }, legend: { data: ["趋势"], bottom: "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: { name: "(元)", type: "value", axisLabel: { color: "#fff" } }, series: [ { name: "趋势", data: [10,20,14,15,16,17,24,15,3,7,11,23], type: "line", smooth: true, areaStyle: {} } ] }; 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: "22%", containLabel: false }, xAxis: { type: "category", boundaryGap: true, axisLabel: { color: "#fff", interval: 0 }, data: [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ] }, yAxis: { type: "value", axisLabel: { color: "#fff" } }, series: [ { name: "客户数", type: "bar", data: data } ] }; return option; } function economicMiddle(data) { let data1 = []; for (var a in data) { data1.push(data[a]) } 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: data1 }, { name: "公司派遣人数", type: "line", stack: "总量", data: [220, 182, 191, 234, 290, 330, 310, 111, 222, 132, 143, 123] } ] }; 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%"], data: [ { value: allData.PCount, name: "已派遣人数" }, { value: allData.WPCount, name: "未派遣人" } ] } ] }; return option; } export default { bottomOption, bottomOption1, middleOption1, middleOption2, economicMiddle, economicPieOption };