From 27c5590aab433687c58dbf41e9271f71008834f0 Mon Sep 17 00:00:00 2001
From: TreeWish <1131093754@qq.com>
Date: 星期一, 27 二月 2023 11:48:05 +0800
Subject: [PATCH] 修改大屏首页
---
src/components/Screen/bottom.vue | 31
src/components/Screen/top.vue | 7
src/components/chart/ServiceGet.vue | 126 +++++++
src/components/chart/FileFormat.vue | 265 +++++---------
src/components/chart/BaseBarChart.vue | 313 +++++++++++++++++
src/views/Thematic/index.vue | 20
src/api/screen.js | 12
src/components/Screen/left.vue | 56 ++
src/components/Screen/right.vue | 117 +++---
src/components/chart/ProjectCategory.vue | 116 ++++--
10 files changed, 766 insertions(+), 297 deletions(-)
diff --git a/src/api/screen.js b/src/api/screen.js
index 5e00108..1ff92b7 100644
--- a/src/api/screen.js
+++ b/src/api/screen.js
@@ -42,4 +42,14 @@
// 鍥藉缁村害-鏁伴噺缁熻
export function countCountryDimension(params) {
return request.get("/oneMap/countCountryDimension", { params: params })
-}
\ No newline at end of file
+}
+
+//鏈嶅姟璁块棶娆℃暟
+export function GetServicesVisitsCount(){
+ return request.get("/oneMap/countDataServiceType")
+}
+
+//鎸夌収绫诲埆璁块棶缁熻璁块棶娆℃暟
+export function GetTypeVisitsCount(){
+ return request.get("/oneMap/countLargeCategories")
+}
diff --git a/src/components/Screen/bottom.vue b/src/components/Screen/bottom.vue
index 1aacfc6..94e85d3 100644
--- a/src/components/Screen/bottom.vue
+++ b/src/components/Screen/bottom.vue
@@ -70,21 +70,21 @@
return {
YXState: true,
yxImg: require("../../assets/img/Screen/yximg.png"),
- currMenu: "椤圭洰灞曠ず",
+ currMenu: "涓撻灞曠ず",
currProject: "",
searchName: "",
menuList: [
{
- menuName: "椤圭洰灞曠ず",
+ menuName: "涓撻灞曠ず",
children: [
- // {
- // name: "鍏ㄥ浗绠＄綉鍥�",
- // id: "qggwt",
- // },
- // {
- // name: "鍏ㄧ悆绠＄綉鍥�",
- // id: "qqgwt",
- // },
+ {
+ name: "鍏ㄥ浗绠＄綉鍥�",
+ id: "qggwt",
+ },
+ {
+ name: "鍏ㄧ悆绠＄綉鍥�",
+ id: "qqgwt",
+ },
{
name: "鍏ㄥ浗椤圭洰",
id: "qgxm",
@@ -96,7 +96,7 @@
],
},
{
- menuName: "宸ョ▼灞曠ず",
+ menuName: "椤圭洰灞曠ず",
children: [
{
name: "涓縿涓滅嚎绠￠亾宸ョ▼",
@@ -199,16 +199,18 @@
case "宸ョ▼宸¤":
this.showPathLine(child)
break
- case "宸ョ▼灞曠ず":
+ case "椤圭洰灞曠ず":
this.DisplayCurrentProject(child)
break
- case "椤圭洰灞曠ず":
+ case "涓撻灞曠ず":
this.changeProject(child)
break
default:
break
}
},
+
+ //宸ョ▼宸¤
async showPathLine(params) {
const line = wktToGeoJSON(params.wkt)
const position = line.coordinates[0]
@@ -280,7 +282,7 @@
async getCountProjectDisplay() {
const res = await countProjectLocation()
if (res.code === 200) {
- const menu = this.menuList.find(item => item.menuName == "宸ョ▼灞曠ず")
+ const menu = this.menuList.find(item => item.menuName == "椤圭洰灞曠ず")
menu.children = res.result.map(item => {
return {
name: item.projname,
@@ -305,6 +307,7 @@
}
},
+ //涓撻灞曠ず
changeProject(params) {
this.$bus.$emit('changeProject', params.name)
}
diff --git a/src/components/Screen/left.vue b/src/components/Screen/left.vue
index 97ee516..f643744 100644
--- a/src/components/Screen/left.vue
+++ b/src/components/Screen/left.vue
@@ -4,23 +4,52 @@
<img :src="leftImg" @click="ChangeLeft" />
</div>
<div class="leftContainer" v-if="ChartDisplay">
- <div class="current1" style="height: 27%;" id="leftCurrent1">
+ <div class="current1" id="leftCurrent1">
<div class="aside-title">鏁版嵁鐢宠娆℃暟</div>
<count-data-apply ></count-data-apply>
</div>
- <div class="current1" style="height: 27%;" id="leftCurrent2">
- <div class="aside-title">鏈嶅姟绫诲埆</div>
-
+ <div class="current1" id="leftCurrent2">
+ <div class="aside-title">鐢ㄦ埛璁块棶閲�</div>
<service-type></service-type>
</div>
- <div class="current1" style="height: 36%;" id="leftCurrent3">
- <div class="aside-title">瀛樺偍淇℃伅</div>
+ <div class="current1" id="leftCurrent3">
+ <div class="aside-title">椤圭洰瀛樺偍淇℃伅</div>
<data-storage></data-storage>
</div>
</div>
- <div class="leftContainer" v-if="ProjectreeDisplay">
- <project-tree></project-tree>
+ <!-- 鍏ㄧ悆缁熻娆℃暟 -->
+ <div class="leftContainer" v-if="GlobleChartDisplay">
+ <div class="current1" id="leftCurrent1">
+ <div class="aside-title">鏁版嵁鐢宠娆℃暟</div>
+ <count-data-apply ></count-data-apply>
+ </div>
+ <div class="current1" id="leftCurrent2">
+ <div class="aside-title">鐢ㄦ埛璁块棶閲�</div>
+ <service-type></service-type>
+ </div>
+ <div class="current1" id="leftCurrent3">
+ <div class="aside-title">椤圭洰瀛樺偍淇℃伅</div>
+ <data-storage></data-storage>
+ </div>
</div>
+<!-- 鍏ㄥ浗椤圭洰缁熻娆℃暟 -->
+ <div class="leftContainer" v-if="CountryChartDisplay">
+ <div class="current1" id="leftCurrent1">
+ <div class="aside-title">鏁版嵁鐢宠娆℃暟</div>
+ <count-data-apply ></count-data-apply>
+ </div>
+ <div class="current1" id="leftCurrent2">
+ <div class="aside-title">鐢ㄦ埛璁块棶閲�</div>
+ <service-type></service-type>
+ </div>
+ <div class="current1" id="leftCurrent3">
+ <div class="aside-title">椤圭洰瀛樺偍淇℃伅</div>
+ <data-storage></data-storage>
+ </div>
+ </div>
+ <!-- <div class="leftContainer" v-if="ProjectreeDisplay">
+ <project-tree></project-tree>
+ </div> -->
</div>
</template>
<script>
@@ -40,6 +69,8 @@
leftMessage: "init",
ChartDisplay: true,
ProjectreeDisplay: false,
+ GlobleChartDisplay:false,
+ CountryChartDisplay:false,
leftImg: require("../../assets/img/Screen/rightArrow.png"),
}
},
@@ -76,6 +107,11 @@
this.leftMessage = "init"
// this.OpenLeftInitChart();
this.$parent.ChangeWidth("leftView")
+
+ this.$bus.$on("changeProject", name => {
+
+ })
+
},
//鎵撳紑宸ョ▼鏍�
OpenLeftProjectTree() {
@@ -543,14 +579,13 @@
.leftContainer {
height: 100%;
width: calc(100% - 7px);
-
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
.current1 {
- height: 30%;
+ height: 32%;
width: 100%;
background: url(../../assets/img/Screen/chartbg.png);
background-size: 100% 100%;
@@ -562,7 +597,6 @@
background: url(../../assets/img/Screen/contentBg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
-
}
}
}
diff --git a/src/components/Screen/right.vue b/src/components/Screen/right.vue
index bb7186f..47b45a5 100644
--- a/src/components/Screen/right.vue
+++ b/src/components/Screen/right.vue
@@ -2,21 +2,27 @@
<div class="current">
<div class="rightContainer" v-if="ChartDisplay">
<div class="current1">
- <div class="aside-title">宸ョ▼绉嶇被</div>
+ <div class="aside-title">椤圭洰缁熻</div>
<project-category></project-category>
</div>
- <div class="" style="width: 100%;height: 60%">
- <div class="aside-title">鏂囦欢鏍煎紡</div>
- <div class="content" style="height: calc(100% - 30px)">
+ <div class="current1">
+ <div class="aside-title">鏁版嵁缁熻</div>
+ <!-- <div class="content" style="height:30px">
<div class="header">
<div>鏍煎紡</div>
<div>鏁伴噺</div>
</div>
- <file-format></file-format>
- </div>
+ </div> -->
+ <file-format></file-format>
+ </div>
+ <div class="current1">
+ <div class="aside-title">鏈嶅姟璁块棶娆℃暟</div>
+
+ <Service-Get></Service-Get>
</div>
</div>
- <div
+
+ <!-- <div
class="rightContainer2"
v-if="CourtyDisplay && currentProject =='鍏ㄧ悆椤圭洰'"
>
@@ -29,6 +35,8 @@
<country-dimension-pie ref="pieRef"></country-dimension-pie>
</div>
</div>
+
+
<div class="rightContainer2" v-if="CourtyDisplay && currentProject =='鍏ㄥ浗椤圭洰'">
<div class="current1">
<div class="aside-title">椤圭洰鏁伴噺鏌辩姸鍥�</div>
@@ -38,7 +46,7 @@
<div class="aside-title">椤圭洰鏁伴噺楗肩姸鍥�</div>
<province-dimension-pie ref="pieRef"></province-dimension-pie>
</div>
- </div>
+ </div> -->
<div class="rightarrow">
<img :src="RightImg" @click="ChangeRight" />
</div>
@@ -54,6 +62,7 @@
import CountryDimensionPie from "../chart/CountryDimensionPie.vue"
import ProvinceDimensionBar from "../chart/CountryProvinceBar.vue"
import ProvinceDimensionPie from "../chart/CountryProvincePie.vue"
+import ServiceGet from "../chart/ServiceGet.vue"
import { countCountryDimension, countProvinceDimension } from "@/api/screen.js"
export default {
@@ -66,7 +75,8 @@
CountryDimensionBar,
CountryDimensionPie,
ProvinceDimensionBar,
- ProvinceDimensionPie
+ ProvinceDimensionPie,
+ ServiceGet,
},
data() {
return {
@@ -96,14 +106,14 @@
this.ChartDisplay = !this.ChartDisplay
}
- if (this.leftMessage == "projectree") {
- if (this.CourtyDisplay) {
- this.RightImg = require("../../assets/img/Screen/leftArrow.png")
- } else {
- this.RightImg = require("../../assets/img/Screen/rightArrow.png")
- }
- this.CourtyDisplay = !this.CourtyDisplay
- }
+ // if (this.leftMessage == "projectree") {
+ // if (this.CourtyDisplay) {
+ // this.RightImg = require("../../assets/img/Screen/leftArrow.png")
+ // } else {
+ // this.RightImg = require("../../assets/img/Screen/rightArrow.png")
+ // }
+ // this.CourtyDisplay = !this.CourtyDisplay
+ // }
// this.ChartDisplay = !this.ChartDisplay
this.$parent.ChangeWidth("right")
@@ -118,16 +128,16 @@
},
//鎵撳紑宸ョ▼鏍�
- OpenLeftProjectTree() {
- this.ChartDisplay = false
- this.CourtyDisplay = true
- this.leftMessage = "projectree"
- this.$parent.ChangeWidth("leftTree")
- },
+ // OpenLeftProjectTree() {
+ // this.ChartDisplay = false
+ // this.CourtyDisplay = true
+ // this.leftMessage = "projectree"
+ // this.$parent.ChangeWidth("leftTree")
+ // },
},
}
</script>
-<style lang="less">
+<style lang="less" sc>
.current {
height: 100%;
width: 100%;
@@ -150,7 +160,6 @@
.rightContainer {
height: 100%;
width: calc(100% - 45px);
-
display: flex;
flex-direction: column;
align-items: center;
@@ -163,37 +172,37 @@
background-repeat: no-repeat;
}
}
- .rightContainer2 {
- height: 100%;
- width: calc(100% - 45px);
+ // .rightContainer2 {
+ // height: 100%;
+ // width: calc(100% - 45px);
- display: flex;
- flex-direction: column;
- align-items: center;
- .current1 {
- margin-top: 10px;
- margin-bottom: 30px;
- height: 32%;
- width: 100%;
- background: url(../../assets/img/Screen/chartbg.png);
- background-size: 100% 100%;
- background-repeat: no-repeat;
+ // display: flex;
+ // flex-direction: column;
+ // align-items: center;
+ // .current1 {
+ // margin-top: 10px;
+ // margin-bottom: 30px;
+ // height: 30%;
+ // width: 100%;
+ // background: url(../../assets/img/Screen/chartbg.png);
+ // background-size: 100% 100%;
+ // background-repeat: no-repeat;
+ // }
+ // }
+ .content {
+ width: 100%;
+ background: url(../../assets/img/Screen/contentBg.png);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ .header {
+ margin: 0px auto;
+ padding: 10px 0;
+ width: 80%;
+ display: flex;
+ justify-content: space-between;
+ color: #fff;
+ font-size: 13px;
}
- }
-}
-.content {
- width: 100%;
- background: url(../../assets/img/Screen/contentBg.png);
- background-size: 100% 100%;
- background-repeat: no-repeat;
- .header {
- margin: 0px auto;
- padding: 10px 0;
- width: 80%;
- display: flex;
- justify-content: space-between;
- color: #fff;
- font-size: 13px;
}
}
</style>
diff --git a/src/components/Screen/top.vue b/src/components/Screen/top.vue
index 0c98efb..8355adb 100644
--- a/src/components/Screen/top.vue
+++ b/src/components/Screen/top.vue
@@ -1,7 +1,7 @@
<template>
<div class="top">
<div class="topleft">
- <div
+ <!-- <div
class="topleft1"
:class="currView == 'chart' ? 'active' : ''"
@click="OpenInitChart"
@@ -16,7 +16,7 @@
>
<img src="../../assets/img/Screen/ptree.png" />
<span>宸ョ▼椤圭洰</span>
- </div>
+ </div> -->
</div>
<div class="topCenter">
<div>绠＄綉涓�寮犲浘</div>
@@ -44,7 +44,7 @@
mounted() {
this.$bus.$on('changeProject', name => {
if (name == '鍏ㄥ浗椤圭洰' || name == '鍏ㄧ悆椤圭洰') {
- this.OpenProjectree()
+ // this.OpenProjectree()
}
})
},
@@ -68,7 +68,6 @@
this.currView = "tree"
this.$parent.$refs.mapleft.OpenLeftProjectTree()
this.$parent.$refs.mapright.OpenLeftProjectTree()
-
},
},
}
diff --git a/src/components/chart/BaseBarChart.vue b/src/components/chart/BaseBarChart.vue
new file mode 100644
index 0000000..6a6cbfc
--- /dev/null
+++ b/src/components/chart/BaseBarChart.vue
@@ -0,0 +1,313 @@
+<template>
+ <div class="barchar" ref="chart"></div>
+</template>
+
+<script>
+import * as echarts from "echarts"
+import { countCountryDimension } from "@/api/screen.js"
+export default {
+ props: {
+ width: {
+ type: String,
+ default: '100%'
+ },
+ height: {
+ type: String,
+ default: '100%'
+ },
+ autoResize: {
+ type: Boolean,
+ default: true
+ },
+ // option: {
+ // type: Object,
+ // required: true
+ // },
+ type: {
+ type: String,
+ default: 'canvas'
+ }
+ },
+ data() {
+ return {
+ chart: null,
+ dataList: []
+ }
+ },
+ computed: {
+ option() {
+ let data = [
+ {
+ country: "鑻忎腹",
+ count: 1,
+ },
+ {
+ country: "鍗板害灏艰タ浜�",
+ count: 1,
+ },
+ {
+ country: "闃胯仈閰�",
+ count: 1,
+ },
+ {
+ country: "涔屽吂鍒厠鏂潶",
+ count: 1,
+ },
+ {
+ country: "鍝堣惃鍏嬫柉鍧�",
+ count: 2,
+ },
+ {
+ country: "濮斿唴鐟炴媺",
+ count: 1,
+ },
+ {
+ country: "鏂噷鍏板崱",
+ count: 1,
+ },
+ {
+ country: "涓浗",
+ count: 17,
+ },
+ {
+ country: "鍏朵粬",
+ count: 1,
+ },
+ {
+ country: "鍦熷簱鏇兼柉鍧�",
+ count: 1,
+ },
+ {
+ country: "鏂板姞鍧�",
+ count: 1,
+ },
+ ]
+
+ let xAxisData = []
+ let yAxisData = []
+ if (this.dataList) {
+ data = this.dataList
+ }
+ data.forEach(item => {
+ xAxisData.push(item.country)
+ yAxisData.push(item.count)
+ })
+ let option = {
+ backgroundColor: "transparent",
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
+ },
+ grid: {
+ top: "12%",
+ right: "0%",
+ left: "0%",
+ bottom: "13%",
+ containLabel: true,
+ },
+ xAxis: [
+ {
+ type: "category",
+ data: xAxisData,
+ axisLine: {
+ lineStyle: {
+ color: "rgba(255,255,255,0.12)",
+ },
+ },
+ interval: 0,
+ axisLabel: {
+ margin: 10,
+ color: "#e2e9ff",
+ textStyle: {
+ fontSize: 11,
+ },
+ formatter: function (value) {
+ //
+ var ret = "" //鎷兼帴鍔燶n杩斿洖鐨勭被鐩」
+ var maxLength = 2 //姣忛」鏄剧ず鏂囧瓧涓暟
+ var valLength = value.length //X杞寸被鐩」鐨勬枃瀛椾釜鏁�
+ var rowN = Math.ceil(valLength / maxLength) //绫荤洰椤归渶瑕佹崲琛岀殑琛屾暟
+ if (rowN > 1) {
+ //濡傛灉绫荤洰椤圭殑鏂囧瓧澶т簬3,
+ for (var i = 0; i < rowN; i++) {
+ var temp = "" //姣忔鎴彇鐨勫瓧绗︿覆
+ var start = i * maxLength //寮�濮嬫埅鍙栫殑浣嶇疆
+ var end = start + maxLength //缁撴潫鎴彇鐨勪綅缃�
+ //杩欓噷涔熷彲浠ュ姞涓�涓槸鍚︽槸鏈�鍚庝竴琛岀殑鍒ゆ柇锛屼絾鏄笉鍔犱篃娌℃湁褰卞搷锛岄偅灏变笉鍔犲惂
+ temp = value.substring(start, end) + "\n"
+ ret += temp //鍑�熸渶缁堢殑瀛楃涓�
+ }
+ return ret
+ } else {
+ return value
+ }
+ },
+ },
+ },
+ ],
+ yAxis: [
+ {
+ axisLabel: {
+ formatter: "{value}",
+ color: "#e2e9ff",
+ },
+ axisLine: {
+ show: false,
+ },
+ splitLine: {
+ lineStyle: {
+ color: "rgba(255,255,255,0.12)",
+ },
+ },
+ },
+ ],
+ series: [
+ {
+ type: "bar",
+ data: yAxisData,
+ barWidth: "12px",
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ {
+ offset: 0,
+ color: "rgba(0,244,255,1)", // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: "rgba(0,77,167,1)", // 100% 澶勭殑棰滆壊
+ },
+ ],
+ false
+ ),
+ barBorderRadius: [20, 20, 0, 0],
+ shadowColor: "rgba(0,160,221,1)",
+ shadowBlur: 4,
+ },
+ },
+ label: {
+ normal: {
+ show: true,
+ lineHeight: 14,
+ width: 40,
+ height: 14,
+ backgroundColor: "rgba(0,160,221,0.1)",
+ borderRadius: 200,
+ position: ["-8", "-20"],
+ distance: 1,
+ formatter: value => {
+ // console.log(value);
+ if (value.name == "涓浗") {
+ return [
+ ` {d|鈼弣", " {a|${value.value}} \n", " {b|}`,
+ ].join(",")
+ }
+ },
+ // formatter: [" {d|鈼弣", " {a|{c}} \n", " {b|}"].join(
+ // ","
+ // ),
+ rich: {
+ d: {
+ color: "#3CDDCF",
+ },
+ a: {
+ color: "#fff",
+ align: "center",
+ },
+ b: {
+ width: 1,
+ height: 15,
+ borderWidth: 1,
+ borderColor: "#234e6c",
+ align: "left",
+ },
+ },
+ },
+ },
+ },
+ ],
+ }
+ return option
+ }
+ },
+ watch: {
+ // option: {
+ // deep: true,
+ // handler(newVal) {
+ // this.setOptions(newVal)
+ // }
+ // },
+ currentProject: {
+ deep: true,
+ handler(newVal) {
+ this.initData()
+ this.setOptions(this.option)
+ }
+ }
+ },
+ mounted() {
+ this.initChart()
+ if (this.autoResize) {
+ window.addEventListener('resize', this.resizeHandler)
+ }
+ },
+ beforeDestroy() {
+ if (!this.chart) {
+ return
+ }
+ if (this.autoResize) {
+ window.removeEventListener('resize', this.resizeHandler)
+ }
+ this.chart.dispose()
+ this.chart = null
+ },
+ methods: {
+ resizeHandler() {
+ this.chart.resize()
+ },
+ initChart() {
+ this.chart = echarts.init(this.$refs.chart, '', {
+ renderer: this.type
+ })
+ this.chart.setOption(this.option)
+ this.chart.on('click', this.handleClick)
+ },
+ handleClick(params) {
+ this.$emit('click', params)
+ },
+ setOptions(option) {
+ this.clearChart()
+ this.resizeHandler()
+ if (this.chart) {
+ this.chart.setOption(option)
+ }
+ },
+ refresh() {
+ this.setOptions(this.option)
+ },
+ clearChart() {
+ this.chart && this.chart.clear()
+ }
+ },
+ methods: {
+ async initData() {
+
+
+ },
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.barchar {
+ width: 100%;
+ height: 100%;
+}
+</style>
diff --git a/src/components/chart/FileFormat.vue b/src/components/chart/FileFormat.vue
index 2b5be35..81ed640 100644
--- a/src/components/chart/FileFormat.vue
+++ b/src/components/chart/FileFormat.vue
@@ -5,7 +5,7 @@
<script>
const fileTypeBar = require("@/assets/img/Screen/fileTypeBar.png")
import * as echarts from "echarts"
-import { countFileFormat } from "@/api/screen.js"
+import { GetTypeVisitsCount } from "@/api/screen.js"
export default {
data() {
return {
@@ -16,7 +16,12 @@
this.initChart()
},
methods: {
+
+
+
async initChart() {
+
+
let data = [
{
name: "user1",
@@ -59,182 +64,114 @@
value: 20,
},
]
- const res = await countFileFormat()
+ const res = await GetTypeVisitsCount()
+ let xAxis = []
+ let yAxis = []
if (res.code == 200) {
data = res.result.map(item => {
- return {
- name: item.type,
- value: item.number,
- }
+ xAxis.push(item.name);
+ yAxis.push(item.count);
})
}
- data.sort((a, b) => b.value - a.value)
- data = data.slice(0, 10)
- // console.log(res.result);
- let getArrByKey = (data, k) => {
- let key = k || "value"
- let res = []
- if (data) {
- data.forEach(function (t) {
- res.push(t[key])
- })
- }
- return res
- }
- let getSymbolData = data => {
- let arr = []
- for (var i = 0; i < data.length; i++) {
- arr.push({
- value: data[i].value,
- symbolPosition: "end",
- })
- }
- return arr
- }
- let opt = {
- index: 0,
- }
- let color = ["#A71A2B"]
- data = data.sort((a, b) => {
- return b.value - a.value
- })
let option = {
- backgroundColor: "transparent",
- grid: {
- top: "2%",
- bottom: "2%",
- right: "5%",
- left: "10%",
- containLabel: true,
+ grid: {
+ // 璁╁浘琛ㄥ崰婊″鍣�
+ top: "12%",
+ left: "15%",
+ right: "10%",
+ bottom: "15%",
+ },
+
+ xAxis: {
+ data: xAxis,
+ axisLabel: {
+ show: true,
+ color: "#ffff",
},
- xAxis: {
+ axisTick: {
show: false,
},
- yAxis: [
- {
- triggerEvent: true,
- show: true,
- inverse: true,
- data: getArrByKey(data, "name"),
- axisLine: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: false,
- interval: 0,
- color: "#fff",
- align: "left",
- margin: 0,
- fontSize: 13,
- formatter: function (value, index) {
- return "{title|" + value + "}"
- },
- rich: {
- title: {
- width: 165,
- },
- },
- },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(95, 180, 237, 0.32)",
},
- {
- triggerEvent: true,
- show: true,
- inverse: true,
- data: getArrByKey(data, "name"),
- axisLine: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- interval: 0,
- shadowOffsetX: "-20px",
- color: "#fff",
- align: "right",
- verticalAlign: "bottom",
- lineHeight: 20,
- fontSize: 13,
- formatter: function (value, index) {
- return data[index].value
- },
- },
+ },
+ },
+ yAxis: {
+ axisLine: {
+ show: false,
+
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ color: "#ffff",
+ },
+ // 鍒嗗壊绾�
+ splitLine: {
+ lineStyle: {
+ color: "#5d7289",
+ width: 1,
+ type: "dashed"
+ }
},
- ],
- series: [
- {
- name: "XXX",
- type: "pictorialBar",
+ },
+ series: [
+ {
+ // 椤堕儴鍦嗙墖
+ type: "pictorialBar",
+ animation: false,
+ itemStyle: {
+ color: "rgba(115, 240, 252, 1)",
+ },
+ symbolRepeat: false,
+ symbolSize: [15, 8],
+ symbolMargin: 1,
+ z: 10,
+ data: data,
+ symbolPosition: "end",
+ symbolOffset: [0, -4],
+ },
+ {
+ // 搴曢儴鍦嗙墖
+ type: "pictorialBar",
+ animation: false,
- symbol:
- "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAxCAYAAABznEEcAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlFNDgzRTBDQjNFNzExRURCRDc5RTVGRkQxNDc0MjUxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlFNDgzRTBEQjNFNzExRURCRDc5RTVGRkQxNDc0MjUxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUU0ODNFMEFCM0U3MTFFREJENzlFNUZGRDE0NzQyNTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUU0ODNFMEJCM0U3MTFFREJENzlFNUZGRDE0NzQyNTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5DGVZNAAAOOElEQVR42qxa+Y8c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",
- symbolSize: [25, 25],
- symbolOffset: [20, 0],
- z: 5,
- data: getSymbolData(data),
+ itemStyle: {
+ color: "rgba(50, 96, 225, 0.8)",
},
- {
- name: "鏉�",
- type: "bar",
- showBackground: true,
- barBorderRadius: 10,
- yAxisIndex: 0,
- data: data,
- barWidth: 8,
- // align: left,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 1,
- 0,
- [
- {
- offset: 0,
- color: "#5A9DFF",
- },
- {
- offset: 0.7,
- color: "#1878FF",
- },
- {
- offset: 1,
- color: "#164182",
- },
- ],
- false
- ),
- barBorderRadius: 5,
- },
- // color: '#A71A2B',
- barBorderRadius: 2,
- },
- label: {
- normal: {
- color: "#fff",
- show: true,
- position: ["0px", "-25px"],
- textStyle: {
- fontSize: 14,
- },
- formatter: function (a, b) {
- return a.name
- },
- },
+ symbolRepeat: false,
+ symbolSize: [15, 8],
+ symbolMargin: 1,
+ z: 10,
+ data: data,
+ symbolPosition: "start",
+ symbolOffset: [0, 3],
+ },
+ {
+ barWidth: 15,
+ animation: false,
+
+ type: "bar",
+ label: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#ffff",
},
},
- ],
- }
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 1, color: "rgba(82, 180, 249, 0.35)" },
+ { offset: 0, color: "rgba(82, 180, 249, 1)" },
+ ]),
+ },
+ data: yAxis,
+ },
+ ],
+};
const chart = echarts.init(this.$refs.chart)
@@ -250,6 +187,6 @@
<style lang="less" scoped>
.file-format {
width: 100%;
- height: 100%;
+ height:calc(100% - 30px);
}
</style>
diff --git a/src/components/chart/ProjectCategory.vue b/src/components/chart/ProjectCategory.vue
index ef36fd9..34ff6f9 100644
--- a/src/components/chart/ProjectCategory.vue
+++ b/src/components/chart/ProjectCategory.vue
@@ -1,19 +1,16 @@
<template>
<div class="project-category">
<div class="content">
-
- <div
- :class="i % 2 ? 'rank2' : 'rank1'"
- v-for="(item, i) in datalist.slice(0, 8)"
- :key="item.projtype"
- >
- <div class="num">{{ item.count }}涓�</div>
- <div class="name">{{ item.projtype }}</div>
- <div class="bar">
- <img src="~@/assets/img/Screen/leftBar.png" alt="" />
- </div>
- </div>
-
+ <div
+ :class="'rank' + i"
+ class="rank"
+ v-for="(item, i) in datalist.slice(0, 8)"
+ :key="item.projtype"
+ >
+ <div class="num">{{ item.count }}涓�</div>
+ <div class="name">{{ item.projtype }}</div>
+ <div class="bar"></div>
+ </div>
<!-- <div class="rank rank2">
<div class="num">2涓�</div>
@@ -80,57 +77,98 @@
.project-category {
position: relative;
width: 100%;
- height: 100%;
+ height: calc(100% - 30px);
background: url("~@/assets/img/Screen/projectBg.png") center center;
- background-size: 330px 227px;
- .content {
- position: relative;
- display: flex;
- flex-wrap: wrap;
- margin: 0 auto;
- height: 90%;
- justify-content: space-between;
- .rank1, .rank2 {
- // box-sizing: border-box;
- // display: flex;
- // flex-direction: column;
- // width: 160px;
- // flex: 1;
- height: 25px;
- // align-items: end;
+ background-size: 100% 100%;
+ .content {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ // height: 85%;
+ height: 100%;
+
+ .rank {
+ width: 35%;
+ display: flex;
+ flex-direction: column;
+ div {
+ margin: 2px 0px;
+ }
.num {
color: #839ecb;
}
.name {
- // margin: 6px;
color: #fff;
}
+
.bar {
width: 61px;
height: 3px;
- // background: url("~@/assets/img/Screen/leftBar.png");
- // background-size: 100% 100%;
- img {
- width: 100%;
- height: 100%;
- }
+ background-image: url(../../assets/img/Screen/leftBar.png);
+ background-size: 100% 100%;
}
}
- .rank1 {
+
+ .rank0,
+ .rank6 {
width: 35%;
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
}
- .rank2 {
+
+ .rank1,
+ .rank7 {
width: 35%;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
+
+ .rank2,
+ .rank4 {
+ width: 35%;
+ display: flex;
+ flex-direction: column;
+ justify-items: flex-end;
+
+ div {
+ width: 80%;
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-end;
+ }
+ .bar {
+ margin-left: calc(80% - 61px);
+ }
+ }
+
+ .rank3,
+ .rank5 {
+ width: 35%;
+ display: flex;
+ flex-direction: column;
+ justify-items: flex-end;
+
+ div {
+ margin-left: 20%;
+ width: 80%;
+ align-items: flex-end;
+ text-align: left;
+
+ .bar {
+ display: flex;
+ align-items: center;
+ justify-items: flex-end;
+ }
+ }
+ }
}
}
</style>
diff --git a/src/components/chart/ServiceGet.vue b/src/components/chart/ServiceGet.vue
new file mode 100644
index 0000000..b4d4fc8
--- /dev/null
+++ b/src/components/chart/ServiceGet.vue
@@ -0,0 +1,126 @@
+<template>
+ <div class="CountDataApply" ref="chart"></div>
+</template>
+
+<script>
+import * as echarts from "echarts"
+import { GetServicesVisitsCount } from "@/api/screen.js"
+export default {
+ data() {
+ return {
+ option: {},
+ }
+ },
+ mounted() {
+ // const option = this.initData()
+ this.initChart()
+ },
+ methods: {
+ async initChart() {
+ const res = await GetServicesVisitsCount()
+
+ console.log(res.result);
+
+ if (res.code == 200) {
+ }
+ let xAxis = []
+ let yAxis = []
+
+ res.result.forEach(item => {
+ xAxis.push(item.type)
+ yAxis.push(item.count)
+ })
+
+ // let data = [220, 182, 191, 234, 290, 330, 310]
+ // const sideData = data.map(item => {
+ // return {
+ // name: item.name,
+ // value: item.number,
+ // }
+ // })
+
+ let option = {
+ tooltip: {
+ trigger: "axis"
+ },
+ grid: {
+ right: "10%",
+ top: 30,
+ left: '15%',
+ bottom:'15%'
+ },
+
+ xAxis: {
+ type: "category",
+ boundaryGap: true,
+ axisLine: {
+ lineStyle: {
+ color: "#fff"
+ }
+ },
+ nameRotate: 45,
+ axisTick: {
+ alignWithLabel: true
+ },
+ axisLabel: {
+ fontFamily: "PingFangSC-Regular",
+ },
+ data:xAxis
+ },
+ yAxis: {
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: "#fff"
+ }
+ },
+ axisLabel: {
+ fontFamily: "Roboto-Regular",
+ },
+ axisTick: {
+ show: false
+ },
+ // 鍒嗗壊绾�
+ splitLine: {
+ lineStyle: {
+ color: "#5d7289",
+ width: 1,
+ type: "dashed"
+ }
+ },
+ type: "value"
+ },
+ series: [
+ {
+ name: "鏈嶅姟璁块棶娆℃暟",
+ type: "line",
+ showAllSymbol: false,
+ lineStyle: {
+ color: "#2579D8"
+ },
+ itemStyle: {
+ color: "#2579D8"
+ },
+ smooth: 0.2,
+ data: yAxis
+ }
+
+ ]
+ };
+ const chart = echarts.init(this.$refs.chart)
+
+ chart.setOption(option)
+ window.addEventListener("resize", function () {
+ chart.resize()
+ })
+ },
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.CountDataApply {
+ width: 100%;
+ height:calc(100% - 30px);
+}
+</style>
diff --git a/src/views/Thematic/index.vue b/src/views/Thematic/index.vue
index 16d74df..9c1473c 100644
--- a/src/views/Thematic/index.vue
+++ b/src/views/Thematic/index.vue
@@ -47,16 +47,16 @@
}
}
- if (parm == "leftView" || parm == "leftTree") {
- this.leftWidth = "20%"
- this.rightWidth = "22%"
- }
- if (parm == "leftView") {
- this.leftTree = false
- }
- if (parm == "leftTree") {
- this.leftTree = true
- }
+ // if (parm == "leftView" || parm == "leftTree") {
+ // this.leftWidth = "20%"
+ // this.rightWidth = "22%"
+ // }
+ // if (parm == "leftView") {
+ // this.leftTree = false
+ // }
+ // if (parm == "leftTree") {
+ // this.leftTree = true
+ // }
if (parm == "right") {
if (this.rightWidth == "22%") {
--
Gitblit v1.9.3