From f84e5a87d3aeb665f4a84113e7e67533d2979faf Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期五, 09 四月 2021 15:46:40 +0800
Subject: [PATCH] echarts
---
src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue | 228 ++++++++++++---------------------------------
src/components/BaseNav/PublicBounced/PublicBounced.vue | 68 +++++++------
2 files changed, 96 insertions(+), 200 deletions(-)
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue b/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue
index ad97760..2207d31 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue
@@ -4,7 +4,7 @@
<script>
-import mapApi from '@/api/mapApi'
+// import mapApi from '@/api/mapApi'
import 'dayjs/locale/es'
import dayjs from 'dayjs'
@@ -13,201 +13,95 @@
data () {
return {
myChart: [],
- result: [],
days: dayjs(new Date()).format('YYYYMMDDHHmmss'),
- value: '',
- seriesData: [],
- aseries: ''
+ data: []
}
},
+ mounted () {
+ this.$nextTick(() => {
+ this.upDateEcharts()
+ })
+ },
methods: {
- drawChart () {
+ // 鍒濆鍖杄charts
+ upDateEcharts () {
this.myChart = this.$echarts.init(this.$refs.echarts)
+ // this.myChart.setOption(this.options)
+ // setInterval(this.echartsData, 1000)
+ function randomData () {
+ now = new Date(+now + oneDay)
+ value = value + Math.random() * 21 - 10
+ return {
+ name: now.toString(),
+ value: [
+ [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
+ Math.round(value)
+ ]
+ }
+ }
+ // this.data = []
+ var now = +new Date(1997, 9, 3)
+ var oneDay = 24 * 3600 * 1000
+ var value = Math.random() * 1000
+ for (var i = 0; i < 1000; i++) {
+ this.data.push(randomData())
+ }
const option = {
+ title: {
+ text: '鍔ㄦ�佹暟鎹� + 鏃堕棿鍧愭爣杞�'
+ },
tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['閭欢钀ラ攢', '鑱旂洘骞垮憡', '瑙嗛骞垮憡', '鐩存帴璁块棶', '鎼滅储寮曟搸']
- },
- grid: {
- containLabel: false
- },
- toolbox: {
- feature: {
- saveAsImage: {
- show: false
- }
+ trigger: 'axis',
+ formatter: function (params) {
+ params = params[0]
+ var date = new Date(params.name)
+ return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1]
+ },
+ axisPointer: {
+ animation: false
}
},
xAxis: {
- type: 'category',
- boundaryGap: false,
+ type: 'time',
splitLine: {
show: false
- },
- // data: this.seriesData,
- data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩'],
- axisLine: {
- lineStyle: {
- color: '#FFFFFF',
- // width: 1
- show: false
- }
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
- axisLine: {
- lineStyle: {
- color: '#FFFFFF',
- width: 1
- }
+ splitLine: {
+ show: false
}
},
- series: [
- {
- name: '妯℃嫙鏁版嵁',
- type: 'line',
- // showSymbol: false,
- // hoverAnimation: false,
- data: this.seriesData
- },
- {
- name: '鑱旂洘骞垮憡',
- type: 'line',
- stack: '鎬婚噺',
- data: [220, 182, 191, 234, 290, 330, 310]
- },
- {
- name: '瑙嗛骞垮憡',
- type: 'line',
- stack: '鎬婚噺',
- data: [150, 232, 201, 154, 190, 330, 410]
- },
- {
- name: '鐩存帴璁块棶',
- type: 'line',
- stack: '鎬婚噺',
- data: [320, 332, 301, 334, 390, 330, 320]
- },
- {
- name: '鎼滅储寮曟搸',
- type: 'line',
- stack: '鎬婚噺',
- data: [820, 932, 901, 934, 1290, 1330, 1320]
- }
- ]
- }
- this.myChart.setOption(option)
- },
- async echartsData () {
- const addDays = dayjs().add(300, 'day')
- const data = {
- $tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
- $startTime: this.dayjs,
- $endTime: addDays,
- $step: 15
- }
- const result = await mapApi.DataItems(data)
- this.result = result.data
- for (let i = 0; i < result.length; i++) {
- // // console.log(result[i])
-
- // const seriesData = []
- const aseries = []
- // let nameData = ''
-
- this.seriesData.push(result[i].ReadTime)
- aseries.push(result[i].TagValue)
- // nameData = result[i].UnionTagCode
- this.aseries = result[i].UnionTagCode
- }
- this.myChart.setOption({
series: [{
- data: this.seriesData
+ name: '妯℃嫙鏁版嵁',
+ type: 'line',
+ showSymbol: false,
+ hoverAnimation: false,
+ data: this.data
}]
- })
- },
- // 鏁版嵁鐨勮姹�
- requestEcharts () {
- setInterval(async () => {
- const addDays = dayjs().add(300, 'day')
- const data = {
- $tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
- $startTime: this.dayjs,
- $endTime: addDays,
- $step: 15
- }
- const result = await mapApi.DataItems(data)
- this.result = result.data
- for (let i = 0; i < result.length; i++) {
- // // console.log(result[i])
+ }
- // const seriesData = []
- const aseries = []
- // let nameData = ''
-
- this.seriesData.push(result[i].ReadTime)
- aseries.push(result[i].TagValue)
- // nameData = result[i].UnionTagCode
- this.aseries = result[i].UnionTagCode
+ setInterval(function () {
+ for (var i = 0; i < 5; i++) {
+ this.data.shift()
+ this.data.push(randomData())
}
- this.myChart.setOption({
- series: [{
- data: this.seriesData
- }]
- })
- }, 3000)
+
+ // this.myChart.setOption({
+ // series: [{
+ // data: this.data
+ // }]
+ // })
+ }, 1000)
+ this.myChart.setOption(option)
}
- },
- mounted () {
- this.$nextTick(() => {
- this.requestEcharts()
- this.drawChart()
- this.echartsData()
- })
}
}
</script>
<style scoped lang="less">
-.Infomation {
- margin-left: 10px;
- height: 0.2rem;
-}
-.el-tag {
- height: 25px;
- width: 140px;
- line-height: 25px;
- margin-right: 10px;
- font-size: 10px;
- background-color: rgba(0, 255, 246, 0.14);
- color: #00d0f9;
- border: none;
- padding: 0 15px;
-}
-
-.form-echrts {
- width: 100%;
- height: 1rem;
- border-top: 1px solid #396d83;
- //margin: 10px 10px 10px 10px;
- .el-dialog-div {
- //height: 50vh!important;
- overflow: auto;
- //overflow: hidden;
- }
-
- #echarts {
- margin: 0;
- padding: 0;
- //height: 3rem;
- //border: 1px solid #396d83;
- //margin: 10px 10px 10px 10px;
- }
-}
</style>
diff --git a/src/components/BaseNav/PublicBounced/PublicBounced.vue b/src/components/BaseNav/PublicBounced/PublicBounced.vue
index 5a43649..b6307ea 100644
--- a/src/components/BaseNav/PublicBounced/PublicBounced.vue
+++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue
@@ -1,49 +1,49 @@
<template>
<div class="public-bounced" v-drag v-if="flag">
- <!-- <Echarts></Echarts>-->
- <div class="public-bounced-title">
- <span>{{ displayContentTitle }}</span>
- <i class="el-icon-circle-close" @click="closePopup"></i>
- </div>
- <div class="public-bounced-content">
- <div class="public-bounced-content-left">
- <public-tabs :displayContentTab="displayContentTab" :value="value"
- :setWasteGasdata="setWasteGasdata" :setWasteWaterdata="setWasteWaterdata"></public-tabs>
- <div class="public-bounced-content-left-bottom">
- <public-table v-if="value === 'gufei'"
- :displayContentTable="displayContentTable"></public-table>
- <public-chart v-else :getWasteGasDetails="getWasteGasDetails"
- :value="value"
- :getQueryOnlineMonData="getQueryOnlineMonData"
- :getWasteWaterMonitoringDetails="getWasteWaterMonitoringDetails">
- </public-chart>
- </div>
- </div>
- <div class="public-bounced-content-right">
- <public-video></public-video>
- </div>
- </div>
+ <Echarts></Echarts>
+ <!-- <div class="public-bounced-title">-->
+ <!-- <span>{{ displayContentTitle }}</span>-->
+ <!-- <i class="el-icon-circle-close" @click="closePopup"></i>-->
+ <!-- </div>-->
+ <!-- <div class="public-bounced-content">-->
+ <!-- <div class="public-bounced-content-left">-->
+ <!-- <public-tabs :displayContentTab="displayContentTab" :value="value"-->
+ <!-- :setWasteGasdata="setWasteGasdata" :setWasteWaterdata="setWasteWaterdata"></public-tabs>-->
+ <!-- <div class="public-bounced-content-left-bottom">-->
+ <!-- <public-table v-if="value === 'gufei'"-->
+ <!-- :displayContentTable="displayContentTable"></public-table>-->
+ <!-- <public-chart v-else :getWasteGasDetails="getWasteGasDetails"-->
+ <!-- :value="value"-->
+ <!-- :getQueryOnlineMonData="getQueryOnlineMonData"-->
+ <!-- :getWasteWaterMonitoringDetails="getWasteWaterMonitoringDetails">-->
+ <!-- </public-chart>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- <div class="public-bounced-content-right">-->
+ <!-- <public-video></public-video>-->
+ <!-- </div>-->
+ <!-- </div>-->
</div>
</template>
<script>
-// import Echarts from '@components/BaseNav/PublicBounced/GasComponents/Echarts'
+import Echarts from '@components/BaseNav/PublicBounced/GasComponents/Echarts'
import '@/components/BaseNav/SolidWaste/directive/dir'
-import PublicTabs from '@components/BaseNav/PublicBounced/GasComponents/PublicTabs'
-import PublicTable from '@components/BaseNav/PublicBounced/GasComponents/PublicTable'
-import PublicVideo from '@components/BaseNav/PublicBounced/GasComponents/PublicVideo'
-import PublicChart from './GasComponents/PublicChart'
+// import PublicTabs from '@components/BaseNav/PublicBounced/GasComponents/PublicTabs'
+// import PublicTable from '@components/BaseNav/PublicBounced/GasComponents/PublicTable'
+// import PublicVideo from '@components/BaseNav/PublicBounced/GasComponents/PublicVideo'
+// import PublicChart from './GasComponents/PublicChart'
export default {
name: 'PublicBounced',
components: {
- // Echarts,
- PublicTabs,
- PublicTable,
- PublicChart,
- PublicVideo
+ Echarts
+ // PublicTabs,
+ // PublicTable,
+ // PublicChart,
+ // PublicVideo
},
data () {
return {
@@ -104,6 +104,8 @@
left: 20%;
background-color: #002432;
border: 1px #9fc5c8 solid;
+ width: 6rem;
+ height: 3rem;
.public-bounced-title {
height: 0.1rem;
--
Gitblit v1.8.0