首页文字更改，保安单位经营情况四个页面

zpzgiser

2021-07-18 fd61a737e45cc7075b1d008524f1883dcea15aad

 src/views/securityUnitOperation/securityEchart.js

@@ -1,10 +1,27 @@
function bottomOption(data) {
  let option = {
    title: {
      text: "公司运营趋势",
    // title: {
    //   text: "公司运营趋势",
    //   textStyle: {
    //     color: "#fff"
    //   }
    // },
    grid: {
      top: "10%",
      left: "3%",
      right: "4%",
      bottom: "15%",
      containLabel: true
    },
    legend: {
      data: ["趋势"],
      bottom: "0%",
      textStyle: {
        color: "#fff"
      }
    },
    tooltip: {
      trigger: "item"
    },
    xAxis: {
      type: "category",
@@ -35,7 +52,8 @@
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320, 132, 1111, 321, 342, 134],
        name: "趋势",
        data: [0.1, 0.3, 0.2, 0.5, 0.1,0.4, 0.32, 0.13, 0.21, 0.12, 0.25, 0.11],
        type: "line",
        smooth: true,
        areaStyle: {}
@@ -46,12 +64,12 @@
}
function middleOption1(data) {
  let option = {
    title: {
      text: "公司保安类数据对比",
      textStyle: {
        color: "#fff"
      }
    },
    // title: {
    //   text: "公司保安类数据对比",
    //   textStyle: {
    //     color: "#fff"
    //   }
    // },
    tooltip: {
      trigger: "axis"
    },
@@ -64,13 +82,14 @@
        "缴纳社保保安数",
        "缴纳社保数"
      ],
      bottom: "2%",
      bottom: "0%",
      textStyle: {
        color: "#fff"
      }
    },
    grid: {
      left: "3%",
      top: "10%",
      left: "5%",
      right: "4%",
      bottom: "15%",
      containLabel: true
@@ -145,12 +164,12 @@
}
function middleOption2(data) {
  let option = {
    title: {
      text: "服务客户",
      textStyle: {
        color: "#fff"
      }
    },
    // title: {
    //   text: "服务客户",
    //   textStyle: {
    //     color: "#fff"
    //   }
    // },
    tooltip: {
      trigger: "axis",
      axisPointer: {
@@ -159,15 +178,16 @@
    },
    legend: {
      data: ["客户数"],
      bottom: "5%",
      bottom: "0%",
      textStyle: {
        color: "#fff"
      }
    },
    grid: {
      left: "3%",
      top: "10%",
      left: "12%",
      right: "4%",
      bottom: "7%",
      bottom: "15%",
      containLabel: true
    },
    xAxis: {
@@ -199,9 +219,132 @@
    },
    series: [
      {
        name: "2011年",
        name: "客户数",
        type: "bar",
        data: [231, 123, 441, 123, 321, 333, 111, 221, 332, 442, 132, 51]
      }
    ]
  };
  return option;
}

function economicMiddle(data) {
  let option = {
    // title: {
    //   text: "公司保安类数据对比",
    //   textStyle: {
    //     color: "#fff"
    //   }
    // },
    tooltip: {
      trigger: "axis"
    },
    legend: {
      data: [
        "缴纳社保人数",
        '公司派遣人数'
      ],
      bottom: "0%",
      textStyle: {
        color: "#fff"
      }
    },
    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: [120, 132, 101, 134, 90, 230, 210, 214, 123, 22, 132, 321]
      },
      {
        name: "公司派遣人数",
        type: "line",
        stack: "总量",
        data: [220, 182, 191, 234, 290, 330, 310, 111, 222, 132, 143, 123]
      },
    ]
  };
  return option;
}
function economicPieOption() {
  let title = "总";
  let total = "111";
  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"
    },
    legend: {
      bottom: "0%",
      left: "center",
      textStyle: {
        color: "#fff"
      }
    },
    series: [
      {
        name: "人员分布",
        type: "pie",
        radius: ["40%", "70%"],
        data: [
          { value: 1048, name: "已派遣人数" },
          { value: 735, name: "未派遣人" }
        ]
      }
    ]
  };
@@ -211,5 +354,7 @@
export default {
  bottomOption,
  middleOption1,
  middleOption2
  middleOption2,
  economicMiddle,
  economicPieOption
};