From bbe33e5fd87e5961fdab804bfb0b4cf354e0c5b2 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期三, 24 十一月 2021 10:00:17 +0800
Subject: [PATCH] 地图接口
---
src/pages/internetEquipment/components/helemetEchart.vue | 155 +++++++++++++++++++++++++++------------------------
1 files changed, 82 insertions(+), 73 deletions(-)
diff --git a/src/pages/internetEquipment/components/helemetEchart.vue b/src/pages/internetEquipment/components/helemetEchart.vue
index 3dc6b97..4af998f 100644
--- a/src/pages/internetEquipment/components/helemetEchart.vue
+++ b/src/pages/internetEquipment/components/helemetEchart.vue
@@ -1,72 +1,85 @@
<template>
<div class="helemet-echart">
- <div id="echart-cotainer" ></div>
+ <div id="echart-cotainer"></div>
</div>
</template>
<script>
import echarts from "echarts";
+import { getChart } from "@/api/helemt";
export default {
- data (){
- return {
- option : {
- grid: {
- show :false,
- bottom: 20,
- top: 20,
- left: 40,
- right: 20
+ async created() {
+ const res = await getChart();
+ res.data.forEach((item, index) => {
+ this.option.series[0].data.push(item.amount);
+ if (index % 2 == 1) {
+ this.option.xAxis.data.push(item.time);
+ } else {
+ this.option.xAxis.data.push("");
+ }
+ });
+ let myChart = echarts.init(document.getElementById("echart-cotainer"));
+ myChart.setOption(this.option);
+ },
+ data() {
+ return {
+ option: {
+ grid: {
+ show: false,
+ bottom: 20,
+ top: 20,
+ left: 40,
+ right: 20,
+ },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ data: [],
+ axisLine: {
+ show: false, //涓嶆樉绀哄潗鏍囪酱杞寸嚎
+ },
+ axisTick: {
+ show: false, //涓嶆樉绀哄潗鏍囪酱鍒诲害
+ },
+ spiltLine: {
+ show: false, //鎯宠涓嶆樉绀虹綉鏍肩嚎锛屾敼涓篺alse
+ },
+ axisLabel: {
+ interval: 0,
+ },
+ },
+ yAxis: {
+ type: "value",
+ splitLine: {
+ show: false,
+ },
+ axisLine: {
+ show: false, //涓嶆樉绀哄潗鏍囪酱杞寸嚎
+ },
+ axisTick: {
+ show: false, //涓嶆樉绀哄潗鏍囪酱鍒诲害
+ },
+ },
+ series: [
+ {
+ data: [],
+ type: "line",
+ areaStyle: {},
+ areaStyle: {
+ normal: {
+ color: "#FFF8EB", //鏀瑰彉鍖哄煙棰滆壊
},
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['', '2021-09-02 00:00', '', '2021-09-02 00:00', '', '2021-09-02 00:00', ''],
- axisLine: {
- show: false //涓嶆樉绀哄潗鏍囪酱杞寸嚎
- },
- axisTick: {
- show: false //涓嶆樉绀哄潗鏍囪酱鍒诲害
- },
- spiltLine:{
- show: false //鎯宠涓嶆樉绀虹綉鏍肩嚎锛屾敼涓篺alse
- },
- axisLabel:{
- interval: 0
- }
- },
- yAxis: {
- type: 'value',
- splitLine : {
- show: false
- },
- axisLine: {
- show: false //涓嶆樉绀哄潗鏍囪酱杞寸嚎
- },
- axisTick: {
- show: false //涓嶆樉绀哄潗鏍囪酱鍒诲害
+ },
+ itemStyle: {
+ normal: {
+ lineStyle: {
+ color: "#FFAA44",
},
},
- series: [
- {
- data: [820, 932, 901, 934, 1290, 1330, 1320],
- type: 'line',
- areaStyle: {},
- areaStyle: {
- normal: {
- color: '#FFF8EB' //鏀瑰彉鍖哄煙棰滆壊
- }
- },
- itemStyle: {
- normal: {
- lineStyle: {
- color: '#FFAA44'
- }
- }
- }
+ },
-
-/* itemStyle: {
+ /* itemStyle: {
normal: {
color: '#f7ba0e',
label: {
@@ -87,18 +100,14 @@
}
}
} */
- }
- ],
-
- }
- }
- },
- mounted (){
- let myChart = echarts.init(document.getElementById('echart-cotainer'))
- myChart.setOption(this.option);
- },
- methods :{
- /* format (params) {
+ },
+ ],
+ },
+ };
+ },
+ mounted() {},
+ methods: {
+ /* format (params) {
console.log(params);
for (var i = 0,
l = this.option.xAxis.data.length; i < l; i++) {
@@ -112,14 +121,14 @@
}
}
} */
- }
-}
+ },
+};
</script>
<style scoped lang="scss">
.helemet-echart {
- #echart-cotainer {
- height: 100%;
- }
+ #echart-cotainer {
+ height: 100%;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0