首页数据

liuyg

2021-08-10 84daeec964b7fb8569e95ea01b761f2f77a923f1

首页数据

 src/api/home/home.js

@@ -20,4 +20,11 @@
    url: '/api/blade-user/getUserTypeCount',
    method: 'get'
  })
}

export const getMapData = () => {
  return request({
    url: '/api/blade-user/getUserDistrictTypeCount',
    method: 'get'
  })
}

 src/views/wel/home.vue

@@ -93,7 +93,7 @@
import * as echarts from "echarts";

import geojson from "@/geojson/nanchang.json";
import { getList, getSevenDaty, getLeftUp } from "@/api/home/home";
import { getList, getSevenDaty, getLeftUp, getMapData } from "@/api/home/home";

export default {
  data() {
@@ -122,10 +122,16 @@
    // this.onTwoEcharts();
    this.createechart1(); //建立图表1
    this.onSixEcharts(); //图表1数据
    this.createMapJson();
    // this.createMapJson();
    this.getLeftUp(); // 左上角数据
    this.getMapDataMethod(); // 左上角数据
  },
  methods: {
    getMapDataMethod() {
      getMapData().then((res) => {
        this.createMapJson(res.data.data);
      });
    },
    getLeftUp() {
      (this.leftUp = []), (this.OurNumLeftUp = 0);
      getLeftUp().then((res) => {
@@ -152,7 +158,7 @@
            value: item.num,
          });
        });
        // console.log(this.leftUp);
        console.log(d);
      });
    },
    getDataSevenDaty() {
@@ -305,7 +311,7 @@
          data.push(d[k].num);
          datax.push(d[k].region);
        }
        // console.log(res, 243423);
        console.log(res, 243423);

        var option = {
          tooltip: {
@@ -315,7 +321,8 @@
            },
          },
          legend: {
            data: ["注册量", "在线率"],
            // data: ["注册量", "在线率"],
            data: ["注册量"],
            align: "right",
            right: 10,
            textStyle: {
@@ -394,42 +401,43 @@
                },
              },
            },
            {
              type: "value",
              name: "",
              // min: 0,
              // max: 250,
              // interval: 50,
              axisLabel: {
                formatter: "{value} %",
              },
              position: "right",
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#00c7ff",
                  width: 1,
                  type: "solid",
                },
              },
              max: 100,
              min: 0,
              splitLine: {
                lineStyle: {
                  color: "#063374",
                },
              },
            },
            // ,
            // {
            //   type: "value",
            //   name: "",
            //   // min: 0,
            //   // max: 250,
            //   // interval: 50,
            //   axisLabel: {
            //     formatter: "{value} %",
            //   },
            //   position: "right",
            //   axisTick: {
            //     show: false,
            //   },
            //   axisLine: {
            //     show: false,
            //     lineStyle: {
            //       color: "#00c7ff",
            //       width: 1,
            //       type: "solid",
            //     },
            //   },
            //   max: 100,
            //   min: 0,
            //   splitLine: {
            //     lineStyle: {
            //       color: "#063374",
            //     },
            //   },
            // },
          ],
          series: [
            {
              name: "注册量",
              type: "bar",
              data: [44, 46, 48, 56, 50, 66, 52, 43, 45],
              // data: data,
              // data: [44, 46, 48, 56, 50, 66, 52, 43, 45],
              data: data,
              barWidth: 6, //柱子宽度
              barGap: 0.4, //柱子之间间距
              itemStyle: {
@@ -448,36 +456,71 @@
                },
              },
            },
            {
              name: "在线率",
              type: "line",
              data: [50, 54, 58, 55, 65, 72, 44, 55, 58],
              // barWidth: 6,
              // barGap: 0.4,
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#c4e300",
                    },
                    {
                      offset: 1,
                      color: "#728400",
                    },
                  ]),
                  opacity: 1,
                },
              },
            },
            // ,
            // {
            //   name: "在线率",
            //   type: "line",
            //   // data: [50, 54, 58, 55, 65, 72, 44, 55, 58],
            //   // barWidth: 6,
            //   // barGap: 0.4,
            //   yAxisIndex: 1,
            //   itemStyle: {
            //     normal: {
            //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //         {
            //           offset: 0,
            //           color: "#c4e300",
            //         },
            //         {
            //           offset: 1,
            //           color: "#728400",
            //         },
            //       ]),
            //       opacity: 1,
            //     },
            //   },
            // },
          ],
        };
        that.echarts1.setOption(option);
      });
    },

    createMapJson() {
    createMapJson(data2) {
      console.log(data2);
      var ds = {
        东湖区: {},
        西湖区: {},
        青云谱区: {},
        青山湖区: {},
        新建区: {},
        红谷滩区: {},
        南昌县: {},
        安义县: {},
        进贤县: {},
      };
      var d2 = {
        东湖区: "",
        西湖区: "",
        青云谱区: "",
        青山湖区: "",
        新建区: "",
        红谷滩区: "",
        南昌县: "",
        安义县: "",
        进贤县: "",
      };
      for (var k in data2) {
        for (var n in ds) {
          if (data2[k].region == n) {
            ds[n] = {
              ...data2[k],
            };
            d2[n] = data2[k].num;
          }
        }
      }
      console.log(ds);
      var myChart = echarts.init(document.getElementById("draw_yjy"));

      //geoCoordMap把所有可能出现的城市加到数组里面
@@ -494,17 +537,6 @@
      };

      //2014年数据
      var d2 = {
        东湖区: 44,
        西湖区: 46,
        青云谱区: 48,
        青山湖区: 56,
        新建区: 50,
        红谷滩区: 66,
        南昌县: 52,
        安义县: 43,
        进贤县: 45,
      };

      var colors = [
        [
@@ -682,8 +714,20 @@
                  let txtCon =
                    "<div style='text-align:left;' >" +
                    p.name +
                    ":<br />用户数：" +
                    "<br />用户数：" +
                    d2[p.name] +
                    "<br />治保会队伍：" +
                    ds[p.name].zbh +
                    "<br />内保干部队伍：" +
                    ds[p.name].nbgb +
                    "<br />治安巡防队伍：" +
                    ds[p.name].zaxf +
                    "<br />信息员队伍：" +
                    ds[p.name].xxy +
                    "<br />保安员队伍：" +
                    ds[p.name].bay +
                    "<br />警务辅助队伍：" +
                    ds[p.name].jwfz +
                    "</div>";
                  return txtCon;
                },