Merge branch 'master' of http://192.168.0.105:10010/r/zhba_regulatory

liuyg

2021-08-02 e352f6419f6b2b49567421785694a20d23ecb13d

 src/views/home/indexEchart.js

@@ -1,3 +1,5 @@
import * as echarts from "echarts";
import nc from '../../../public/nc.json';
function left1Data(allData) {
  let nameArr = [];
  let data1 = [];
@@ -16,7 +18,14 @@
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
      },
      backgroundColor: "#031952", //设置背景图片 rgba格式
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
    },
    color: [
      '#2ec7c9',
@@ -45,7 +54,7 @@
      }
    },
    grid: {
      top:'5%',
      top: '5%',
      left: "5%",
      right: "6%",
      bottom: "10%",
@@ -126,7 +135,14 @@
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
      },
      backgroundColor: "#031952", //设置背景图片 rgba格式
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
    },
    color: [
      "#3fb1e3",
@@ -151,7 +167,7 @@
      }
    },
    grid: {
      top:'5%',
      top: '5%',
      left: "5%",
      right: "6%",
      bottom: "15%",
@@ -182,7 +198,7 @@
        name: "持证人数",
        type: "bar",
        // barWidth:30,
        barWidth: 20,
        barWidth: 15,
        stack: "total",
        emphasis: {
          focus: "series"
@@ -356,76 +372,45 @@
}

function right3Data(allData) {
  let data = [
    {
      name: "新建县",
      value: 154
    },
    {
      name: "安义县",
      value: 611
    },
    {
      name: "红谷滩新区",
      value: 400
    },
    {
      name: "西湖区",
      value: 200
    },
    {
      name: "东湖区",
      value: 250
    },
    {
      name: "经开区",
      value: 281
    },
    {
      name: "青云谱区",
      value: 320
    },
    {
      name: "高新区",
      value: 231
    },
    {
      name: "湾里区",
      value: 210
    },
    {
      name: "进贤县",
      value: 187
    },
    {
      name: "青山湖区",
      value: 190
  let data = [];
  let sumValue = 0;
  let legendData = [];
  let datas = allData.sort((a, b) => {
    return b.Count - a.Count
  })
  datas.forEach(item => {
    let obj = {
      name: item.jurname,
      value: item.Count
    }
  ];
    legendData.push(item.jurname)
    sumValue += Number(item.Count)
    data.push(obj)
  })
  // let arrName = getArrayValue(data, "name");
  // let arrValue = getArrayValue(data, "value");
  let sumValue = 1000;
  // let sumValue = 1000;
  // let objData = array2obj(data, "name");
  let optionData = getData(data);

  function getArrayValue(array, key) {
    var key = key || "value";
    var res = [];
    if (array) {
      array.forEach(function(t) {
        res.push(t[key]);
      });
    }
    return res;
  }
  // function getArrayValue(array, key) {
  //   var key = key || "value";
  //   var res = [];
  //   if (array) {
  //     array.forEach(function (t) {
  //       res.push(t[key]);
  //     });
  //   }
  //   return res;
  // }

  function array2obj(array, key) {
    var resObj = {};
    for (var i = 0; i < array.length; i++) {
      resObj[array[i][key]] = array[i];
    }
    return resObj;
  }
  // function array2obj(array, key) {
  //   var resObj = {};
  //   for (var i = 0; i < array.length; i++) {
  //     resObj[array[i][key]] = array[i];
  //   }
  //   return resObj;
  // }

  function getData(data) {
    var res = {
@@ -439,7 +424,7 @@
        clockWise: true,
        z: 2,
        hoverAnimation: false,
        radius: [90 - i * 8 + "%", 85 - i * 8 + "%"],
        radius: [83 - i * 12 + '%', 78 - i * 12 + '%'],
        center: ["30%", "50%"],
        labelLine: {
          show: false
@@ -478,7 +463,14 @@
    tooltip: {
      show: true,
      trigger: "item",
      formatter: "{a}<br>{b}:{c}({d}%)"
      formatter: "{a}<br>{b}:{c}({d}%)",
      backgroundColor: "#031952", //设置背景图片 rgba格式
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
    },
    color: [
      "#91cc75",
@@ -501,19 +493,7 @@
      //   icon: "circle",
      itemHeight: 10,
      show: true,
      data: [
        "新建县",
        "安义县",
        "红谷滩新区",
        "西湖区",
        "东湖区",
        "经开区",
        "青云谱区",
        "高新区",
        "湾里区",
        "进贤县",
        "青山湖区"
      ],
      data: legendData,
      selectedMode: false,
      textStyle: {
        color: "#fff"
@@ -558,10 +538,201 @@
  };
  return option;
}
function middleData(allData, type) {
  var ncMap = nc;
  // var convertData = function (allData) {
  //   var res = [];
  //   for (var i = 0; i < data.length; i++) {
  //     var geoCoord = geoCoordMap[data[i].name];
  //     if (geoCoord) {
  //       res.push({
  //         name: data[i].name,
  //         value: geoCoord.concat(data[i].value)
  //       });
  //     }
  //   }
  //   return res;
  // };
  let name = '';
  let label = '';
  let symbolUrl = '';
  let geoData = []
  allData['table'].forEach((item, i) => {
    let obj = {};
    if (type === 1) {
      name = '保安员名称';
      label = '名称';
      symbolUrl = require('@/assets/img/people.png')
      obj = {
        name: item.name,
        value: allData['geoData'][i]
      }
    } else if (type === 2) {
      name = '押运车辆';
      label = '押运车辆车牌号';
      symbolUrl = require('@/assets/img/car.png')
      obj = {
        name: item.carNum,
        value: allData['geoData'][i]
      }
    } else if (type === 3) {
      name = '枪支';
      label = '枪支编号';
      symbolUrl = require('@/assets/img/gun.png')
      obj = {
        name: item.number,
        value: allData['geoData'][i]
      }
    }
    geoData.push(obj)
  })


  echarts.registerMap('ncMap', ncMap);
  // echarts.registerMap('chinaMapOutline', chinaMapOutline);
  let option = {
    // backgroundColor: '#181F4E',
    // tooltip: {
    //   trigger: 'item',
    // },
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        if (typeof (params.value)[1] == "undefined") {
          return params.name;
        } else {
          return label + ' : ' + params.name;
        }
      },
      backgroundColor: "#031952", //设置背景图片 rgba格式
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
    },
    geo: {
      // silent: true,
      map: 'ncMap',
      show: true,
      zoom: 1.14,
      top: '10%',
      label: {
        normal: {
          show: false,
          textStyle: {
            color: '#fff'
          }
        },
        emphasis: {
          textStyle: {
            color: '#fff'
          }
        }
      },

      roam: true,
      itemStyle: {
        normal: {
          areaColor: 'rgba(0,255,255,.02)',
          borderColor: '#00ffff',
          borderWidth: 1.5,
          shadowColor: '#00ffff',
          shadowOffsetX: 0,
          shadowOffsetY: 4,
          shadowBlur: 10,
        },
        emphasis: {
          color: 'transparent', //悬浮背景
          textStyle: {
            color: '#fff'
          }
        }
      }
    },
    series: [
      {
        map: 'ncMap',
        // silent: true,
        type: 'map',
        geoIndex: 0,
        // aspectScale: 0.75, //长宽比
        zoom: 1.14,
        label: {
          normal: {
            show: false,
            textStyle: {
              color: '#fff'
            }
          },
          emphasis: {
            textStyle: {
              color: '#fff'
            }
          }
        },
        top: '10%',
        roam: true,
        itemStyle: {
          normal: {
            areaColor: 'rgba(0,255,255,.02)',
            borderColor: '#00ffff',
            borderWidth: 1.5,
            shadowColor: '#00ffff',
            shadowOffsetX: 0,
            shadowOffsetY: 4,
            shadowBlur: 10,
          },
          emphasis: {
            areaColor: 'transparent', //悬浮背景
            textStyle: {
              color: '#fff'
            }
          }
        }
      },
      {
        name: name,
        type: 'scatter',
        coordinateSystem: 'geo',
        // roam: false,
        symbol: 'image://' + symbolUrl,
        symbolSize: [30, 30],
        label: {
          normal: {
            show: false,
            textStyle: {
              color: '#fff',
              fontSize: 9,
            },
            // formatter(value) {
            //   return value.data.value[0]
            // }
          }
        },
        itemStyle: {
          normal: {
            color: '#FF0000', //标志颜色
          }
        },
        data: geoData,
        showEffectOn: 'render',
        rippleEffect: {
          brushType: 'stroke'
        },
        hoverAnimation: true,
        zlevel: 1
      }
    ]
  }
  return option
}
export default {
  left1Data,
  left2Data,
  right1Data,
  right2Data,
  right3Data
  right3Data,
  middleData
};