From d554219390c8a33bc91921d459b37ecbce323062 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Mon, 19 Jul 2021 17:26:21 +0800
Subject: [PATCH] 主页注册量 对接数据
---
src/api/home/home.js | 4
vue.config.js | 1
src/views/wel/home.vue | 329 ++++++++++++++++++++++++++++--------------------------
3 files changed, 174 insertions(+), 160 deletions(-)
diff --git a/src/api/home/home.js b/src/api/home/home.js
index ea7b5a6..281b0b9 100644
--- a/src/api/home/home.js
+++ b/src/api/home/home.js
@@ -1,8 +1,8 @@
import request from '@/router/axios';
-export const startList = () => {
+export const getList = () => {
return request({
url: '/api/blade-user/getUserRegisterStatisticsData',
- method: 'get',
+ method: 'get'
})
}
\ No newline at end of file
diff --git a/src/views/wel/home.vue b/src/views/wel/home.vue
index 013ce0e..f08d14d 100644
--- a/src/views/wel/home.vue
+++ b/src/views/wel/home.vue
@@ -101,7 +101,7 @@
import * as echarts from "echarts";
import geojson from "@/geojson/nanchang.json";
-// import { getList } from "@api/home/home";
+import { getList } from "@/api/home/home";
export default {
data() {
@@ -264,172 +264,185 @@
onSixEcharts() {
this.echarts1.clear();
//改折线图
- // getList.then((res) => {
- // console.log(res, 243423);
- // });
- var option = {
- tooltip: {
- trigger: "axis",
- axisPointer: {
- type: "shadow",
- },
- },
- legend: {
- data: ["注册量", "在线率"],
- align: "right",
- right: 10,
- textStyle: {
- color: "#fff",
- },
- itemWidth: 10,
- itemHeight: 10,
- itemGap: 35,
- },
- grid: {
- left: "3%",
- right: "2%",
- bottom: "3%",
- containLabel: true,
- },
- xAxis: [
- {
- type: "category",
- data: [
- "东湖区",
- "西湖区",
- "青云谱区",
- "青山湖区",
- "新建区",
- "红谷滩区",
- "南昌县",
- "安义县",
- "进贤县",
- ],
- axisLine: {
- show: true,
- lineStyle: {
- color: "#063374",
- width: 1,
- type: "solid",
- },
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: "#00c7ff",
- },
- rotate: 45,
+ var that = this;
+ getList().then((res) => {
+ var data = [];
+ var datax = [];
+ var d = res.data.data;
+ for (var k in d) {
+ data.push(d[k].num);
+ datax.push(d[k].region);
+ }
+ console.log(res, 243423);
+
+ var option = {
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
},
},
- ],
- yAxis: [
- {
- type: "value",
- name: "注册量",
- axisLabel: {
- formatter: "{value}",
+ legend: {
+ data: ["注册量", "在线率"],
+ align: "right",
+ right: 10,
+ textStyle: {
+ color: "#fff",
},
- position: "left",
- axisTick: {
- show: false,
- },
- axisLine: {
- show: false,
- lineStyle: {
- color: "#00c7ff",
- width: 1,
- type: "solid",
- },
- },
- // max: 100,
- // min: 0,
- splitLine: {
- lineStyle: {
- color: "#063374",
- },
- },
+ itemWidth: 10,
+ itemHeight: 10,
+ itemGap: 35,
},
- {
- 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",
- },
- },
+ grid: {
+ left: "3%",
+ right: "2%",
+ bottom: "3%",
+ containLabel: true,
},
- ],
- series: [
- {
- name: "注册量",
- type: "bar",
- data: [44, 46, 48, 52, 55, 45, 56, 38, 66],
- barWidth: 6, //柱子宽度
- barGap: 0.4, //柱子之间间距
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: "#008cff",
- },
- {
- offset: 1,
- color: "#005193",
- },
- ]),
- opacity: 1,
+ xAxis: [
+ {
+ type: "category",
+ data: datax,
+ // [
+ // "东湖区",
+ // "西湖区",
+ // "青云谱区",
+ // "青山湖区",
+ // "新建区",
+ // "红谷滩区",
+ // "南昌县",
+ // "安义县",
+ // "进贤县",
+ // ],
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "#063374",
+ width: 1,
+ type: "solid",
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: "#00c7ff",
+ },
+ rotate: 45,
},
},
- },
- {
- name: "在线率",
- type: "line",
- data: [50, 54, 58, 55, 65, 72, 44, 55, 58],
- // barWidth: 6,
- // barGap: 0.4,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: "#c4e300",
- },
- {
- offset: 1,
- color: "#728400",
- },
- ]),
- opacity: 1,
+ ],
+ yAxis: [
+ {
+ type: "value",
+ name: "注册量",
+ axisLabel: {
+ formatter: "{value}",
+ },
+ position: "left",
+ axisTick: {
+ show: false,
+ },
+ minInterval: 1,
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: "#00c7ff",
+ width: 1,
+ type: "solid",
+ },
+ },
+ // max: 3,
+ // min: 0,
+ splitLine: {
+ lineStyle: {
+ color: "#063374",
+ },
},
},
- },
- ],
- };
- this.echarts1.setOption(option);
+ {
+ 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, 52, 55, 45, 56, 38, 66],
+ data: data,
+ barWidth: 6, //柱子宽度
+ barGap: 0.4, //柱子之间间距
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: "#008cff",
+ },
+ {
+ offset: 1,
+ color: "#005193",
+ },
+ ]),
+ 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() {
diff --git a/vue.config.js b/vue.config.js
index 47fe6c1..5eee893 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -37,6 +37,7 @@
'/api': {
//本地服务接口地址
target: 'http://s16s652780.51mypc.cn/api/',
+ // target: 'http://192.168.0.114:82/',
//target: 'http://localhost:82/',
//target: 'https://web.byisf.com/api/',
//远程演示服务地址,可用于直接启动项目
--
Gitblit v1.9.3