From 2ccfcb5a17c31ade0b532d7cc77c9a65aed1343c Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期一, 12 四月 2021 09:55:05 +0800
Subject: [PATCH] echarts实时数据
---
src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue | 333 ++++++++++++++++++++++++++++---------------------------
1 files changed, 171 insertions(+), 162 deletions(-)
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue b/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue
index 3ac2e52..7051034 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue
@@ -1,5 +1,5 @@
<template>
- <div style="width:100%;height:2rem;" ref="echarts"></div>
+ <div style="width:100%;height:2rem;margin-top: 0.3rem" ref="echarts"></div>
</template>
<script>
@@ -12,185 +12,194 @@
name: 'ECharts',
data () {
return {
+ days: dayjs(new Date()).format('YYYYMMDDHHmmss'),
myChart: [],
- dataDate: [],
- value: '',
+ // x杞存暟鎹�
+ xAxis: [],
seriesData: [],
- aseries: '',
- result: [],
- days: dayjs(new Date()).format('YYYYMMDDHHmmss')
+ seriesName: []
}
},
+ mounted () {
+ this.$nextTick(() => {
+ this.upDateEchartsData()
+ })
+ },
methods: {
- drawChart (result) {
- // const result = this.result
- this.myChart = this.$echarts.init(this.$refs.echarts)
-
- // setInterval(function () {
- // }, 3000)
- const option = {
- title: {
- text: '鎶樼嚎鍥惧爢鍙�'
- },
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['閭欢钀ラ攢', '鑱旂洘骞垮憡', '瑙嗛骞垮憡', '鐩存帴璁块棶', '鎼滅储寮曟搸']
- },
- grid: {
- containLabel: true
- },
- toolbox: {
- feature: {
- saveAsImage: {
- show: false
- }
- }
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- // data: seriesData,
- data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩'],
- axisLine: {
- lineStyle: {
- color: '#FFFFFF',
- width: 1
- }
- }
- },
- yAxis: {
- type: 'value',
- axisLine: {
- lineStyle: {
- color: '#FFFFFF',
- width: 1
- }
- }
- },
- series: [
- {
- name: '閭欢钀ラ攢',
- type: 'line',
- stack: '鎬婚噺',
- data: [120, 132, 101, 134, 90, 230, 210]
- },
- {
- 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')
+ async upDateEchartsData () {
+ const addDays = dayjs().add(1, 's')
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
+ const result = (await mapApi.DataItems(data)).data
+ for (var i = 0; i < result.length; i++) {
+ // console.log(result[i])
+ this.xAxis.push(result[i].ReadTime)
+ this.seriesData.push(result[i].TagValue)
+ this.seriesName = result[i].UnionTagCode
+ // let num = 0
+ // if (result[i].UnionTagCode === 'TJIP45.lscl2tb552AI10710') {
+ // num++
+ // console.log(num)
+ // }
+ }
+ this.upDateEchartsinit()
},
- // 鏁版嵁鐨勮姹�
- 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
+ // 鍒濆鍖杄charts
+ upDateEchartsinit () {
+ this.myChart = this.$echarts.init(this.$refs.echarts)
+ // 鍥捐〃鐨勯厤缃」鏁版嵁
+ const xAxisData = this.xAxis
+ const legendData = [this.seriesName, 'TJIP45.lscl2tb552AISA11201B', 'TJIP45.lscl2tb552AISA11202A', 'TJIP45.lscl2tbAIA-10505-1', 'TJIP45.lscl2tbAIA-10505-2']
+ const seriesData = [
+ {
+ name: this.seriesName,
+ type: 'line',
+ data: this.seriesData,
+ symbolSize: 8,
+ smooth: true,
+ silent: false,
+ barWidth: '50%',
+ animation: true
+ },
+ {
+ name: 'TJIP45.lscl2tb552AISA11201B',
+ type: 'line',
+ stack: '鎬婚噺',
+ smooth: true,
+ symbolSize: 8,
+ data: [2.20, 1.82, 1.91, 2.34, 2.90, 3.30, 3.10]
}
- 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 = ''
-
- seriesData.push(result[i].ReadTime)
- aseries.push(result[i].TagValue)
- // nameData = result[i].UnionTagCode
- this.aseries = result[i].UnionTagCode
- }
- this.myChart.setOption({
- series: [{
- data: data
- }]
- })
- }, 3000)
+ ]
+ const option = {
+ title: {
+ text: '瀹炴椂鏁版嵁',
+ target: 'blank',
+ left: '5%',
+ textStyle: {
+ color: '#fff',
+ fontSize: 15,
+ bottom: 20
+ }
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ toolbox: {
+ show: false,
+ feature: {
+ saveAsImage: {}
+ }
+ },
+ dataZoom: [
+ {
+ type: 'inside'
+ // start: 50,
+ // end: 100,
+ // filterMode: 'empty'
+ }
+ ],
+ legend: {
+ data: legendData,
+ textStyle: {
+ color: '#ffffff',
+ fontSize: 12
+ }
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ axisLabel: {
+ rotate: 20,
+ interval: 0,
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#FFFFFF',
+ width: 1
+ }
+ },
+ data: xAxisData
+ },
+ yAxis: [{
+ type: 'value',
+ name: 'yname',
+ // max: function (value) {
+ // var max_val_list = []; //鎵�鏈夋樉绀烘姌绾跨殑鏍囧噯鍊�
+ // if (bzzList && bzzList.length > 0) {
+ // $.each(bzzList, function (index, item) {
+ // max_val_list.push(item.bzhui);
+ // });
+ // }
+ // max_val_list = max_val_list.sort(function (a, b) {
+ // return a - b
+ // }); //鎺掑簭
+ // var ma = value.max > max_val_list[max_val_list.length - 1] ? value.max + 5 : max_val_list[max_val_list.length - 1];
+ // return parseInt(ma);
+ // },
+ axisLabel: {
+ formatter: '{value}',
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ splitLine: {
+ show: false
+ }, // y杞� 缃戞牸绾夸笉鏄剧ず,
+ axisLine: {
+ lineStyle: {
+ color: '#FFFFFF',
+ width: 1
+ }
+ }
+ }, {
+ type: 'value',
+ name: 'dataUnit',
+ axisLabel: {
+ formatter: '{value}',
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ splitLine: {
+ show: false
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#FFFFFF',
+ width: 1
+ }
+ }
+ }],
+ series: seriesData
+ }
+ this.myChart.setOption(option)
}
- },
- mounted () {
- this.$nextTick(() => {
- this.requestEcharts()
- this.drawChart()
- })
}
}
</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