派生自 wuyushui/SewerAndRainNetwork
src/components/BaseNav/PublicBounced/common/echarts/EChartsHourWasteWater.vue
@@ -3,10 +3,10 @@ <div id="Tab"> <div class="infomation"> <div> <span class="grid-content">氮氧化物 :<i>29.93</i> 标准 : 100</span> <span class="grid-content">二氧化硫 : <i>17.34</i> 标准 : 50</span> <span class="grid-content">烟尘 : <i>6.93</i> 标准 : 30</span> <span class="grid-content">废气流量 : <i>120343.18</i></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> <div class="form-echrts"> @@ -15,35 +15,23 @@ <div class="pickerData"> <span> 开始时间:</span> <span class="pickerTable"> <el-date-picker type="datetime" v-model="formInline.timeStart"> <el-date-picker type="datetime" v-model="formInline.timeStart"> </el-date-picker> </span> </div> <div class="pickerData"> <span >结束时间:</span> <span class="pickerTable"> <el-date-picker type="datetime" v-model="formInline.timeEnd" > <el-date-picker type="datetime" v-model="formInline.timeEnd"> </el-date-picker> </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 style="width:5rem;height:2rem;" id="echarts" ref="main"> <div class="boxChart"> <div style="width: 5rem;height:1.5rem;" id="echarts" ref="main"></div> </div> </div> <!-- 明细弹框 --> @@ -63,6 +51,7 @@ <script> import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList' // import dayjs from 'dayjs' export default { name: 'ECharts', @@ -71,22 +60,19 @@ }, data () { return { value1: '', value2: '', watchData: [], dialogVisible: false, myChar: null, value: '', formInline: { region: '', timeStart: '', timeEnd: '' timeStart: '2021-04-12 10:00:00', timeEnd: '2021-04-13 09:00:00' }, myChart: null, JsonWater: { JsonHourWater: { id: 'mycharteff', title: '', datatype: 2, jcdID: '1020', legend: [ { @@ -108,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, @@ -117,39 +112,48 @@ } } ], 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: { onSubmit () { console.log(1) // const date = [this.value1, this.value2, this.formInline.region] this.effChartShow(this.JsonWater.id, this.JsonWater.title, this.JsonWater.legend, this.JsonWater.xdata, this.JsonWater.ydatas, this.JsonWater.yname, this.JsonWater.id, this.JsonWater.datatype) // console.log(date) // if (date) { // var date1 = new Date(date) // date1 = new Date(date1.getTime() - (8 * 3600000)) // console.log(date1) // var dateUtil = new DateUtil() // var datePkg = dateUtil.getTowDate(date1, "a", 24 * 3600000 - 1); // var datatype = 2; this.effChartShow() }, effChartShow: function (id, title, legend, xdata, ydatas, yname, jcdID, datatype) { effChartShow: function () { // var id = this.JsonHourWater.id // var title = this.JsonHourWater.title var legend = this.JsonHourWater.legend var xdata = this.JsonHourWater.xdata var ydatas = this.JsonHourWater.ydatas var yname = this.JsonHourWater.yname // var jcdId = this.JsonHourWater.jcdID var datatype = this.JsonHourWater.datatype this.myChart = this.$echarts.init(this.$refs.main) this.myChart.clear() var dataUnit = '' if (datatype === 1) { dataUnit = '流量(m³/d)' dataUnit = '废水流量(m³/d)' } else { dataUnit = '流量(m³/h)' dataUnit = '废水流量(m³/h)' } var serLists = [] @@ -161,6 +165,7 @@ ydatas[j].data[k] = it2 } } for (var i = 0; i < ydatas.length; i++) { // var zdcbcolor = ydatas[i].zdcbcolor var bz = ydatas[i].bzz @@ -197,11 +202,10 @@ show: false } } }, type: 'line', data: ydatas[i].data, markLine: { // 平均值 ， 和 指标上限 markLine: { // 平均值 和 指标上限 symbol: 'none', data: [{ label: { @@ -245,7 +249,7 @@ }, lineStyle: { // 折线的颜色 color: ydatas[i].zxcolor, width: 5 width: 4 }, borderColor: 'black', // 折点边框的颜色 label: { // 显示值 @@ -280,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>' @@ -298,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,10 +315,15 @@ }, grid: { // 网格 top: '20%', left: '5%' left: '7%', bottom: '10%', right: '5%' }, legend: { data: legend data: legend, textStyle: { color: '#fff' } }, dataZoom: [{ type: 'inside', @@ -341,7 +350,8 @@ rotate: 20, interval: 0, textStyle: { color: '#fff' color: '#fff', fontSize: 10 } }, splitLine: { // 网格垂直线为 虚线 @@ -559,20 +569,20 @@ } // createDivByMouse("s",params.event); }) */ }, drawChart: function () { window.onresize = function () { var h1 = document.documentElement.clientHeight// 获取屏幕的高度 if (h1 > 700) { this.myChart.getDom().style.height = 3 + 'rem' this.myChart.getDom().style.width = 6 + 'rem' } else { this.myChart.getDom().style.height = 3 + 'rem' this.myChart.getDom().style.width = 6 + 'rem' } this.myChart.resize() } } // drawChart: function () { // window.onresize = function () { // var h1 = document.documentElement.clientHeight// 获取屏幕的高度 // if (h1 > 700) { // this.myChart.getDom().style.height = 3 + 'rem' // this.myChart.getDom().style.width = 6 + 'rem' // } else { // this.myChart.getDom().style.height = 3 + 'rem' // this.myChart.getDom().style.width = 6 + 'rem' // } // this.myChart.resize() // } // } } @@ -668,9 +678,7 @@ } } .el-dialog-div { //height: 50vh!important; overflow: auto; //overflow: hidden; } #echarts {
