改界面、对接口

zhengpz

2021-08-15 2abc33c4172e5a0e127fb43cac6167787f5170a1

 src/views/home/indexEchart.js

@@ -1,5 +1,5 @@
import * as echarts from "echarts";
import nc from '../../../public/nc.json';
import nc from "../../../public/nc.json";
function left1Data(allData) {
  let nameArr = [];
  let data1 = [];
@@ -16,6 +16,12 @@
    data4.push(item.server.armed);
    data5.push(item.server.region);
  });
  nameArr.reverse();
  data1.reverse();
  data2.reverse();
  data3.reverse();
  data4.reverse();
  data5.reverse();
  let option = {
    tooltip: {
      trigger: "axis",
@@ -28,13 +34,13 @@
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
      }
    },
    color: [
      '#2ec7c9',
      '#b6a2de',
      '#5ab1ef',
      '#ffb980',
      "#2ec7c9",
      "#b6a2de",
      "#5ab1ef",
      "#ffb980",

      // "#fac858",
      // "#73c0de",
@@ -43,10 +49,10 @@
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      '#626c91',
      '#a0a7e6',
      '#c4ebad',
      '#96dee8'
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    // legend: {
    //   data: ["自招保安单位", "保安培训公司", "保安服务公司", "武装守押公司"],
@@ -60,9 +66,9 @@
    //   // }
    // },
    grid: {
      top: '5%',
      top: "5%",
      left: "5%",
      right: "8%",
      right: "10%",
      bottom: "5%",
      containLabel: true
    },
@@ -90,7 +96,7 @@
        name: "自招保安单位",
        type: "bar",
        stack: "total",
        barWidth: 20,
        barWidth: 17,
        emphasis: {
          focus: "series"
        },
@@ -157,7 +163,7 @@
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
      }
    },
    color: [
      "#3fb1e3",
@@ -168,10 +174,10 @@
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      '#626c91',
      '#a0a7e6',
      '#c4ebad',
      '#96dee8'
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    legend: {
      data: ["持证人数", "未持证人数"],
@@ -182,13 +188,21 @@
      }
    },
    grid: {
      top: '5%',
      top: "10%",
      left: "5%",
      right: "6%",
      bottom: "15%",
      bottom: "4%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      axisLabel: {
        color: "#fff",
        rotate: -80
      },
      data: nameArr
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#fff"
@@ -200,13 +214,6 @@
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: "category",
      axisLabel: {
        color: "#fff"
      },
      data: nameArr
    },
    series: [
      {
@@ -236,12 +243,12 @@

function left3Data(allData) {
  let data = [
    { value: allData[0].mnum ? Number(allData[0].mnum) : 0, name: '男' },
    { value: allData[0].gnum ? Number(allData[0].gnum) : 0, name: '女' }
  ]
    { value: allData[0].mnum ? Number(allData[0].mnum) : 0, name: "男" },
    { value: allData[0].gnum ? Number(allData[0].gnum) : 0, name: "女" }
  ];
  let option = {
    tooltip: {
      trigger: 'item',
      trigger: "item",
      formatter: "{a}<br>{b}:{c}({d}%)",
      axisPointer: {
        type: "shadow"
@@ -252,42 +259,42 @@
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
      }
    },
    color: [
      '#008DEC',
      '#886EFF',
    ],
    legend: {
      right: "8%",
      bottom: "10%",
      itemHeight: 10,
      show: true,
      selectedMode: false,
      textStyle: {
        color: "#fff"
      },
      data: ['男', '女'],
      orient: "vertical"
    color: ["#008DEC", "#886EFF"],
    // legend: {
    //   right: "8%",
    //   bottom: "10%",
    //   itemHeight: 10,
    //   show: true,
    //   selectedMode: false,
    //   textStyle: {
    //     color: "#fff"
    //   },
    //   data: ['男', '女'],
    //   orient: "vertical"
    // },
    grid: {
      top: "10%",
      left: "5%",
      right: "30%",
      bottom: "4%",
      containLabel: true
    },
    series: [
      {
        name: '性别比例',
        type: 'pie',
        center: ['43%', '50%'],
        radius: '70%',
        name: "性别比例",
        type: "pie",
        center: ["33%", "50%"],
        radius: "70%",
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          color: "#fff"
        }
      }
    ]
  };
  return option
  return option;
}

function right1Data(allData) {
@@ -325,10 +332,10 @@
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      '#626c91',
      '#a0a7e6',
      '#c4ebad',
      '#96dee8'
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],

    legend: {
@@ -390,10 +397,10 @@
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      '#626c91',
      '#a0a7e6',
      '#c4ebad',
      '#96dee8'
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],

    legend: {
@@ -446,17 +453,17 @@
  let data = [];
  let legendData = [];
  let datas = allData.sort((a, b) => {
    return b.Count - a.Count
  })
    return b.Count - a.Count;
  });
  datas.forEach(item => {
    let obj = {
      name: item.jurname,
      value: item.Count
    }
    legendData.push(item.jurname)
    };
    legendData.push(item.jurname);
    // sumValue += Number(item.Count)
    data.push(obj)
  })
    data.push(obj);
  });
  // let arrName = getArrayValue(data, "name");
  // let arrValue = getArrayValue(data, "value");
  // let sumValue = 1000;
@@ -624,16 +631,18 @@
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
      }
    },
    legend: {
      right: "2%",
      top: "10%",
      right: "5%",
      top: "5%",
      itemHeight: 10,
      show: true,
      itemGap:8,
      selectedMode: false,
      textStyle: {
        color: "#fff"
        color: "#fff",
        fontSize:11
      },
      data: legendData,
      orient: "vertical"
@@ -647,18 +656,18 @@
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      '#626c91',
      '#a0a7e6',
      '#c4ebad',
      '#96dee8'
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    series: [
      {
        name: '分局预警占比',
        type: 'pie',
        radius: '75%',
        center: ['30%', '50%'],
        roseType: 'radius',
        name: "分局预警占比",
        type: "pie",
        radius: "75%",
        center: ["35%", "55%"],
        roseType: "radius",
        itemStyle: {
          borderRadius: 0
        },
@@ -671,7 +680,7 @@
          }
        },
        data: data
      },
      }
      // {
      //     name: '面积模式',
      //     type: 'pie',
@@ -711,15 +720,16 @@
  //   }
  //   return res;
  // };
  let name = '';
  let label = '';
  let symbolUrl = '';
  let geoData = []
  allData['table'].forEach((item, i) => {
  let name = "";
  let label = "";
  let symbolUrl = "";
  let geoData = [];
  allData["table"].forEach((item, i) => {
    let obj = {};
    if (type === 1) {
      name = '保安员名称';
      label = "押运人员：" +
      name = "保安员名称";
      label =
        "押运人员：" +
        item.name +
        "<br />当前位置：" +
        item.location +
@@ -727,13 +737,13 @@
        item.linkman +
        "<br />联系电话：" +
        item.tel;
      symbolUrl = require('@/assets/img/people.png')
      symbolUrl = require("@/assets/img/people.png");
      obj = {
        name: label,
        value: allData['geoData'][i]
      }
        value: allData["geoData"][i]
      };
    } else if (type === 2) {
      name = '押运车辆';
      name = "押运车辆";
      label =
        "押运车辆车牌号：" +
        item.carNum +
@@ -745,14 +755,15 @@
        item.linkman +
        "<br />联系电话：" +
        item.tel;
      symbolUrl = require('@/assets/img/car.png')
      symbolUrl = require("@/assets/img/car.png");
      obj = {
        name: label,
        value: allData['geoData'][i],
      }
        value: allData["geoData"][i]
      };
    } else if (type === 3) {
      name = '枪支';
      label = "枪支编号：" +
      name = "枪支";
      label =
        "枪支编号：" +
        item.number +
        "<br />当前位置：" +
        item.location +
@@ -762,17 +773,16 @@
        item.linkman +
        "<br />联系电话：" +
        item.tel;
      symbolUrl = require('@/assets/img/gun.png')
      symbolUrl = require("@/assets/img/gun.png");
      obj = {
        name: label,
        value: allData['geoData'][i]
      }
        value: allData["geoData"][i]
      };
    }
    geoData.push(obj)
  })
    geoData.push(obj);
  });


  echarts.registerMap('ncMap', ncMap);
  echarts.registerMap("ncMap", ncMap);
  // echarts.registerMap('chinaMapOutline', chinaMapOutline);
  let option = {
    // backgroundColor: '#181F4E',
@@ -780,12 +790,11 @@
    //   trigger: 'item',
    // },
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        if (typeof (params.value)[1] == "undefined") {
      trigger: "item",
      formatter: function(params) {
        if (typeof params.value[1] == "undefined") {
          return params.name;
        } else {
          debugger
          return params.name;
        }
      },
@@ -793,104 +802,102 @@
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      borderColor: "gray", //设置边框颜色
      extraCssText: 'box-shadow: 0 0 3px rgba(   211,211,211, 0.5);',
      extraCssText: "box-shadow: 0 0 3px rgba(   211,211,211, 0.5);",
      textStyle: {
        color: "#fff" //设置文字颜色
      },
      }
    },
    geo: {
      // silent: true,
      map: 'ncMap',
      map: "ncMap",
      show: true,
      zoom: 1.04,
      top: '8%',
      top: "8%",
      label: {
        show: false,
        color: '#fff',
        color: "#fff",
        emphasis: {
          textStyle: {
            color: '#fff'
            color: "#fff"
          }
        }
      },

      roam: true,
      itemStyle: {
        areaColor: 'rgba(0,255,255,.02)',
        borderColor: '#00ffff',
        areaColor: "rgba(0,255,255,.02)",
        borderColor: "#00ffff",
        borderWidth: 1.5,
        shadowColor: '#00ffff',
        shadowColor: "#00ffff",
        shadowOffsetX: 0,
        shadowOffsetY: 4,
        shadowBlur: 10,

        shadowBlur: 10
      },
      emphasis: {
        itemStyle: {
          color: 'transparent', //悬浮背景
          color: "transparent", //悬浮背景
          textStyle: {
            color: '#fff'
            color: "#fff"
          }
        }
      }
    },
    series: [
      {
        map: 'ncMap',
        map: "ncMap",
        // silent: true,
        type: 'map',
        type: "map",
        geoIndex: 0,
        // aspectScale: 0.75, //长宽比
        zoom: 1.14,
        label: {
          show: false,
          color: '#fff'
          color: "#fff"
        },
        emphasis: {
          label: {
            color: '#fff'
            color: "#fff"
          }
        },
        top: '10%',
        top: "10%",
        roam: true,
        itemStyle: {
          areaColor: 'rgba(0,255,255,.02)',
          borderColor: '#00ffff',
          areaColor: "rgba(0,255,255,.02)",
          borderColor: "#00ffff",
          borderWidth: 1.5,
          shadowColor: '#00ffff',
          shadowColor: "#00ffff",
          shadowOffsetX: 0,
          shadowOffsetY: 4,
          shadowBlur: 10,

          shadowBlur: 10
        },
        emphasis: {
          itemStyle: {
            areaColor: 'transparent', //悬浮背景
            areaColor: "transparent", //悬浮背景
            textStyle: {
              color: '#fff'
              color: "#fff"
            }
          }
        }
      },
      {
        name: name,
        type: 'scatter',
        coordinateSystem: 'geo',
        type: "scatter",
        coordinateSystem: "geo",
        // roam: false,
        symbol: 'image://' + symbolUrl,
        symbol: "image://" + symbolUrl,
        symbolSize: [30, 30],
        label: {
          show: false,
          color: '#fff',
          fontSize: 9,
          color: "#fff",
          fontSize: 9
        },
        itemStyle: {
          color: '#FF0000', //标志颜色
          color: "#FF0000" //标志颜色
        },
        data: geoData,
        showEffectOn: 'render',
        showEffectOn: "render",
        rippleEffect: {
          brushType: 'stroke'
          brushType: "stroke"
        },
        hoverAnimation: true,
        emphasis: {
@@ -899,8 +906,8 @@
        zlevel: 1
      }
    ]
  }
  return option
  };
  return option;
}
export default {
  left1Data,