From 653c004b4f44396cdb4dce04c17152c7563e37f8 Mon Sep 17 00:00:00 2001
From: yangdelong <828900aaa>
Date: 星期五, 09 四月 2021 11:02:38 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/develop' into develop
---
src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue | 213 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 213 insertions(+), 0 deletions(-)
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue b/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue
new file mode 100644
index 0000000..ad97760
--- /dev/null
+++ b/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue
@@ -0,0 +1,213 @@
+<template>
+ <div style="width:100%;height:2rem;margin-top: 0.3rem" ref="echarts"></div>
+</template>
+
+<script>
+
+import mapApi from '@/api/mapApi'
+import 'dayjs/locale/es'
+import dayjs from 'dayjs'
+
+export default {
+ name: 'ECharts',
+ data () {
+ return {
+ myChart: [],
+ result: [],
+ days: dayjs(new Date()).format('YYYYMMDDHHmmss'),
+ value: '',
+ seriesData: [],
+ aseries: ''
+ }
+ },
+ methods: {
+ drawChart () {
+ this.myChart = this.$echarts.init(this.$refs.echarts)
+
+ const option = {
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['閭欢钀ラ攢', '鑱旂洘骞垮憡', '瑙嗛骞垮憡', '鐩存帴璁块棶', '鎼滅储寮曟搸']
+ },
+ grid: {
+ containLabel: false
+ },
+ toolbox: {
+ feature: {
+ saveAsImage: {
+ show: false
+ }
+ }
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ 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
+ }
+ }
+ },
+ 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
+ }]
+ })
+ },
+ // 鏁版嵁鐨勮姹�
+ 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
+ }
+ this.myChart.setOption({
+ series: [{
+ data: this.seriesData
+ }]
+ })
+ }, 3000)
+ }
+ },
+ 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>
--
Gitblit v1.8.0