改首页及统计明细表

zhengpz

2021-08-13 e07b830d7c4b3e401f3ffaaa65986618a2a4b77d

 src/views/home/indexEchart.js

@@ -6,6 +6,7 @@
  let data2 = [];
  let data3 = [];
  let data4 = [];
  // let legend = ["自招保安单位", "保安培训公司", "保安服务公司", "武装守押公司"];
  allData.forEach(item => {
    nameArr.push(item.name);
    data1.push(item.server.confess);
@@ -13,6 +14,30 @@
    data3.push(item.server.security);
    data4.push(item.server.armed);
  });
  function add(arr) {
    let total = 0;
    arr.forEach(i => {
      total += Number(i)
    })
    return total
  }
  // let legend1 = ["自招保安单位" + add(data1), "保安培训公司", "保安服务公司", "武装守押公司"];
  // let legendData = [{
  //   name: "自招保安单位",
  //   value: add(data1)
  // },
  // {
  //   name: "保安培训公司",
  //   value: add(data2)
  // },
  // {
  //   name: "保安服务公司",
  //   value: add(data3)
  // },
  // {
  //   name: "武装守押公司",
  //   value: add(data4)
  // }];
  let option = {
    tooltip: {
      trigger: "axis",
@@ -51,7 +76,10 @@
      itemWidth: 20,
      textStyle: {
        color: "#fff"
      }
      },
      // formatter: function (legend1) {
      //   return legend1;
      // }
    },
    grid: {
      top: '5%',
@@ -219,6 +247,83 @@
  return option;
}

function left3Data(allData) {
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['男', '女'],
      bottom: "1%",
      itemWidth: 20,
      textStyle: {
        color: "#fff"
      }
    },
    color: [
      "#91cc75",
      "#fac858",
      "#73c0de",
    ],
    grid: {
      top: '5%',
      left: "5%",
      right: "6%",
      bottom: "15%",
      containLabel: true
    },
    xAxis: [
      {
        type: 'value',
        splitLine: {
          show: false
        },
        axisLabel: {
          color: "#fff"
        },
      }
    ],
    yAxis: [

      {
        type: 'category',
        data: ['红谷滩分局', '青山湖分局', '南昌市公安局东湖分局', '南昌市公安局西湖分局', '南昌市公安局青云谱分局', '南昌市公安局湾里分局', '南昌市公安局高新开发区分局'],

        splitLine: {
          show: false
        },
        axisLabel: {
          color: "#fff"
        },
      }
    ],
    series: [
      {
        name: '男',
        type: 'bar',
        stack: '性别',
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '女',
        type: 'bar',
        stack: '性别',
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
    ]
  };
  return option
}

function right1Data(allData) {
  // let yueData = [
  //   "一月",
@@ -373,7 +478,6 @@

function right3Data(allData) {
  let data = [];
  let sumValue = 0;
  let legendData = [];
  let datas = allData.sort((a, b) => {
    return b.Count - a.Count
@@ -384,14 +488,14 @@
      value: item.Count
    }
    legendData.push(item.jurname)
    sumValue += Number(item.Count)
    // sumValue += Number(item.Count)
    data.push(obj)
  })
  // let arrName = getArrayValue(data, "name");
  // let arrValue = getArrayValue(data, "value");
  // let sumValue = 1000;
  // let objData = array2obj(data, "name");
  let optionData = getData(data);
  // let optionData = getData(data);

  // function getArrayValue(array, key) {
  //   var key = key || "value";
@@ -412,59 +516,137 @@
  //   return resObj;
  // }

  function getData(data) {
    var res = {
      series: [],
      yAxis: []
    };
    for (let i = 0; i < data.length; i++) {
      res.series.push({
        name: "分局预警占比",
        type: "pie",
        clockwise: true,
        z: 2,
        emphasis: {
          scale: false
        },
        // hoverAnimation: false,
        radius: [83 - i * 12 + '%', 78 - i * 12 + '%'],
        center: ["30%", "50%"],
        labelLine: {
          show: false
        },
        label: {
          show: false
        },
        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
            },
            label: {
              show: false
            },
            emphasis: {
              scale: false
            }
            // hoverAnimation: false
          }
        ]
      });
      res.yAxis.push(data[i].name);
    }
    return res;
  }
  // function getData(data) {
  //   var res = {
  //     series: [],
  //     yAxis: []
  //   };
  //   for (let i = 0; i < data.length; i++) {
  //     res.series.push({
  //       name: "分局预警占比",
  //       type: "pie",
  //       clockwise: true,
  //       z: 2,
  //       emphasis: {
  //         scale: false
  //       },
  //       // hoverAnimation: false,
  //       radius: [83 - i * 12 + '%', 78 - i * 12 + '%'],
  //       center: ["30%", "50%"],
  //       labelLine: {
  //         show: false
  //       },
  //       label: {
  //         show: false
  //       },
  //       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
  //           },
  //           label: {
  //             show: false
  //           },
  //           emphasis: {
  //             scale: false
  //           }
  //           // hoverAnimation: false
  //         }
  //       ]
  //     });
  //     res.yAxis.push(data[i].name);
  //   }
  //   return res;
  // }

  // let option = {
  //   tooltip: {
  //     show: true,
  //     trigger: "item",
  //     formatter: "{a}<br>{b}:{c}({d}%)",
  //     backgroundColor: "#031952", //设置背景图片 rgba格式
  //     color: "#fff",
  //     borderWidth: "0", //边框宽度设置1
  //     // borderColor: "gray", //设置边框颜色
  //     textStyle: {
  //       color: "#fff" //设置文字颜色
  //     },
  //   },
  //   color: [
  //     "#91cc75",
  //     "#fac858",
  //     "#73c0de",
  //     "#3ba272",
  //     "#fc8452",
  //     "#9a60b4",
  //     "#3fb1e3",
  //     "#6be6c1",
  //     '#626c91',
  //     '#a0a7e6',
  //     '#c4ebad',
  //     '#96dee8'
  //   ],

  //   legend: {
  //     right: "2%",
  //     top: "3%",
  //     //   icon: "circle",
  //     itemHeight: 10,
  //     show: true,
  //     data: legendData,
  //     selectedMode: false,
  //     textStyle: {
  //       color: "#fff"
  //     },
  //     orient: "vertical"
  //   },
  //   grid: {
  //     top: "5%",
  //     bottom: "50%",
  //     left: "30%",
  //     containLabel: false
  //   },
  //   yAxis: [
  //     {
  //       type: "category",
  //       inverse: true,
  //       z: 3,
  //       axisLine: {
  //         show: false
  //       },
  //       axisTick: {
  //         show: false
  //       },
  //       axisLabel: {
  //         interval: 0,
  //         inside: false,
  //         color: "#fff",
  //         fontSize: 8,
  //         // textStyle: {

  //         // },
  //         show: true
  //       },
  //       data: optionData.yAxis
  //     }
  //   ],
  //   xAxis: [
  //     {
  //       show: false
  //     }
  //   ],
  //   series: optionData.series
  // };
  let option = {
    tooltip: {
      show: true,
@@ -477,6 +659,18 @@
      textStyle: {
        color: "#fff" //设置文字颜色
      },
    },
    legend: {
      right: "2%",
      top: "10%",
      itemHeight: 10,
      show: true,
      selectedMode: false,
      textStyle: {
        color: "#fff"
      },
      data: legendData,
      orient: "vertical"
    },
    color: [
      "#91cc75",
@@ -492,56 +686,47 @@
      '#c4ebad',
      '#96dee8'
    ],

    legend: {
      right: "2%",
      top: "3%",
      //   icon: "circle",
      itemHeight: 10,
      show: true,
      data: legendData,
      selectedMode: false,
      textStyle: {
        color: "#fff"
    series: [
      {
        name: '分局预警占比',
        type: 'pie',
        radius: '70%',
        center: ['30%', '50%'],
        roseType: 'radius',
        itemStyle: {
          borderRadius: 0
        },
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: false
          }
        },
        data: data
      },
      orient: "vertical"
    },
    grid: {
      top: "5%",
      bottom: "50%",
      left: "30%",
      containLabel: false
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        z: 3,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          inside: false,
          color: "#fff",
          fontSize: 8,
          // textStyle: {

          // },
          show: true
        },
        data: optionData.yAxis
      }
    ],
    xAxis: [
      {
        show: false
      }
    ],
    series: optionData.series
      // {
      //     name: '面积模式',
      //     type: 'pie',
      //     radius: [20, 140],
      //     center: ['75%', '50%'],
      //     roseType: 'area',
      //     itemStyle: {
      //         borderRadius: 5
      //     },
      //     data: [
      //         {value: 30, name: 'rose 1'},
      //         {value: 28, name: 'rose 2'},
      //         {value: 26, name: 'rose 3'},
      //         {value: 24, name: 'rose 4'},
      //         {value: 22, name: 'rose 5'},
      //         {value: 20, name: 'rose 6'},
      //         {value: 18, name: 'rose 7'},
      //         {value: 16, name: 'rose 8'}
      //     ]
      // }
    ]
  };
  return option;
}
@@ -623,8 +808,8 @@
      // silent: true,
      map: 'ncMap',
      show: true,
      zoom: 1.14,
      top: '10%',
      zoom: 1.04,
      top: '8%',
      label: {
        show: false,
        color: '#fff',
@@ -726,6 +911,7 @@
export default {
  left1Data,
  left2Data,
  left3Data,
  right1Data,
  right2Data,
  right3Data,