派生自 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> @@ -26,22 +27,11 @@ </span> </div> </div> <!-- <div>--> <!-- 采样点数:--> <!-- <el-select v-model="formInline.region">--> <!-- <el-option label="0" value="0"></el-option>--> <!-- <el-option label="25" value="25"></el-option>--> <!-- <el-option label="50" value="50"></el-option>--> <!-- <el-option label="75" value="75"></el-option>--> <!-- <el-option label="100" value="100"></el-option>--> <!-- </el-select>--> <!-- </div>--> <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 +42,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 +51,7 @@ <script> import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList' // import dayjs from 'dayjs' export default { name: 'ECharts', @@ -69,22 +60,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 +94,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 +112,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: { @@ -146,9 +151,9 @@ this.myChart.clear() var dataUnit = '' if (datatype === 1) { dataUnit = '流量(m³/d)' dataUnit = '废水流量(m³/d)' } else { dataUnit = '流量(m³/h)' dataUnit = '废水流量(m³/h)' } var serLists = [] @@ -279,12 +284,12 @@ var seriesName = params[i].seriesName // 值 var value = params[i].value var valueFliter if (value === 'NaN') { valueFliter = '' } else { // valueFliter = formatter(value) } // var valueFliter // if (value === 'NaN') { // valueFliter = '' // } else { // // valueFliter = formatter(value) // } var maker = params[i].marker if (seriesName === 'COD') { maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff21c;"></span>' @@ -297,7 +302,7 @@ } else { maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#9ACD32;"></span>' } s += maker + seriesName + ':' + valueFliter + '<br />' s += maker + seriesName + ':' + value + '<br />' } return s } @@ -311,7 +316,8 @@ grid: { // 网格 top: '20%', left: '7%', bottom: '10%' bottom: '10%', right: '5%' }, legend: { data: legend, @@ -634,6 +640,7 @@ padding: 0; border-color:#00fff6; text-align: center; z-index: 9999; //padding-left:20px ; //padding: 0!important; } @@ -672,9 +679,7 @@ } } .el-dialog-div { //height: 50vh!important; overflow: auto; //overflow: hidden; } #echarts {
