派生自 wuyushui/SewerAndRainNetwork
src/components/BaseNav/PublicBounced/common/echarts/EChartsHourWasteWater.vue
@@ -3,8 +3,9 @@ <div id="Tab"> <div class="infomation"> <div> <span class="grid-content">COD : <i style="color: #e8ee0b">6.039</i> 标准 : 10</span> <span class="grid-content">氨氮 : <i style="color: #e8ee0b">0.38</i> 标准 : 5</span> <span class="grid-content">COD : <i style="color: #e8ee0b">6.039</i> 标准 : <i style="color: #fff">12</i></span> <span class="grid-content">氨氮 : <i style="color: #e8ee0b">0.38</i> 标准 : <i style="color: #fff">5</i></span> <span class="grid-content">pH : <i style="color: #e8ee0b">7.674</i> 标准 : <i style="color: #fff">9</i></span> <span class="grid-content">废水流量 : <i style="color: #e8ee0b">254.643997</i></span> </div> </div> @@ -39,9 +40,8 @@ <div class="detailbtn" @click="onSubmit">查询</div> <div class="detailbtn" @click="dialogVisible = true" >明细表</div> </div> <div class="boxChart" style="height: 260px"> <div style="width: 100%;height: 100%;" id="popChart" ref="main"> </div> <div class="boxChart"> <div style="width: 5rem;height:1.5rem;" id="echarts" ref="main"></div> </div> </div> <!-- 明细弹框 --> @@ -52,7 +52,7 @@ center v-dialogDrag > <div class="el-dialog-div" style="height: 260px"> <div class="el-dialog-div" style="height: 500px"> <public-detailed-list v-bind="$attrs"></public-detailed-list> </div> </el-dialog> @@ -61,6 +61,7 @@ <script> import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList' // import dayjs from 'dayjs' export default { name: 'ECharts', @@ -69,22 +70,19 @@ }, data () { return { value1: '', value2: '', watchData: [], dialogVisible: false, myChar: null, value: '', formInline: { region: '', timeStart: '2021-04-12 17:00:00', timeEnd: '2021-04-13 16:00:00' timeStart: '2021-04-12 10:00:00', timeEnd: '2021-04-13 09:00:00' }, myChart: null, JsonHourWater: { id: 'mycharteff', title: '', datatype: 2, jcdID: '1020', legend: [ { @@ -106,6 +104,15 @@ } }, { icon: 'image://../assets/imgs/legend/WenDu.png', itemHeight: 5, itemWidth: 20, name: 'pH', testStyle: { color: '#ccc' } }, { icon: 'image://../assets/imgs/legend/VOCs.png', itemHeight: 5, itemWidth: 20, @@ -115,17 +122,25 @@ } } ], xdata: ['17时', '18时', '19时', '20时', '21时', '22时', '23时', '0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时'], xdata: ['10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时', '0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时'], ydatas: [ { name: 'COD', data: [5.602, 5.617, 5.612, 5.647, 5.652, 5.673, 5.665, 5.702, 5.69, 5.722, 5.729, 5.755, 5.754, 5.784, 8.593, 12.826, 11.125, 8.582, 8.047, 7.325, 6.452, 5.175, 5.522, 6.039], zdcbcolor: 'red', zxcolor: '#fff21c', bzz: 80 }, { name: '氨氮', data: [0.196, 0.184, 0.189, 0.193, 0.199, 0.201, 0.21, 0.211, 0.214, 0.213, 0.214, 0.214, 0.214, 0.214, 0.214, 0.214, 0.213, 0.195, 0.183, 0.183, 0.183, 0.204, 0.223, 0.38], zdcbcolor: 'red', zxcolor: '#00B0F0', bzz: 25 }, { name: '废水流量', data: [226.766998, 223.709, 104.838997, 259.417999, 292.963989, 282.291992, 293.272003, 182.985992, 174.287003, 175.011993, 174.307007, 187.044998, 252.026001, 250.365005, 155.317993, 164.723007, 243.785995, 135.520996, 98.18, 185.481995, 226.473999, 215.171005, 250.393005, 254.643997], zdcbcolor: 'red', zxcolor: '#9ACD32', bzz: null } { name: 'COD', data: [11.197, 11.5, 11.33, 11.2, 11.54, 11.8, 11.195, 10.7, 10.645, 10.6, 10.875, 11.1, 10.715, 10.4, 10.95, 11.4, 11.193, 11, 11.267, 11.5, 10.725, 10, 10.8, 11.5], zdcbcolor: 'red', zxcolor: '#fff21c', bzz: 12 }, { name: '氨氮', data: [0.186, 0.179, 0.165, 0.159, 0.149, 0.146, 0.141, 0.136, 0.128, 0.13, 0.133, 0.133, 0.134, 0.13, 0.122, 0.124, 0.128, 0.139, 0.16, 0.147, 0.123, 0.127, 0.134, 0.128], zdcbcolor: 'red', zxcolor: '#00B0F0', bzz: 5 }, { name: '废水流量', data: [35.15667, 35.445004, 32.91, 31.478336, 33.038334, 33.46167, 33.348335, 33.515003, 33.735001, 31.503336, 31.411667, 32.880001, 33.100002, 31.870001, 30.841667, 31.873335, 32.658333, 32.178337, 30.656668, 30.65667, 32.241669, 32.521667, 31.225002, 30.476669], zdcbcolor: 'red', zxcolor: '#9ACD32', bzz: null }, { name: 'pH', data: [7.666, 7.669, 7.67, 7.672, 7.677, 7.682, 7.685, 7.688, 7.689, 7.689, 7.688, 7.689, 7.69, 7.69, 7.69, 7.69, 7.691, 7.69, 7.685, 7.681, 7.681, 7.678, 7.674, 7.674], zdcbcolor: 'red', zxcolor: '#F206FF', bzz: 9 } ], yname: '浓度(mg/l)' yname: '浓度(mg/l)', datatype: 2 } } }, mounted () { this.onSubmit() // this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss') // this.formInline.timeStart = dayjs().subtract(12, 'hour').format('YYYY-MM-DD HH:mm:ss') // this.onSubmit() }, updated () { this.onSubmit() }, methods: { @@ -311,7 +326,8 @@ grid: { // 网格 top: '20%', left: '7%', bottom: '10%' bottom: '10%', right: '5%' }, legend: { data: legend, @@ -672,9 +688,7 @@ } } .el-dialog-div { //height: 50vh!important; overflow: auto; //overflow: hidden; } #echarts {
