New file |
| | |
| | | <!-- 废水实时数据 --> |
| | | <template> |
| | | <div id="Tab"> |
| | | <div class="animation"> |
| | | <div class="infomation"> |
| | | <span class="grid-content">COD : <i style="color: #e8ee0b">11.24385</i> 标准 : <i style="color: #fff">50</i>></span> |
| | | <span class="grid-content">氮氧 :<i style="color: #e8ee0b">0.1889014</i> 标准 : <i style="color: #fff">30</i></span> |
| | | <span class="grid-content">总磷 : <i style="color: #e8ee0b">0.03812287</i> 标准 : <i style="color: #fff">5</i></span> |
| | | <span class="grid-content">废水流量 : <i style="color: #e8ee0b">32.16287</i></span> |
| | | </div> |
| | | </div> |
| | | <div class="form-echrts"> |
| | | <div class="from-search"> |
| | | <div class="pickerMon"> |
| | | <div class="pickerData"> |
| | | <span> 开始时间:</span> |
| | | <span class="pickerTable"> |
| | | <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> |
| | | </span> |
| | | </div> |
| | | </div> |
| | | <div> |
| | | 采样点数: |
| | | <el-select v-model="formInline.region" placeholder="50"> |
| | | <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> |
| | | <div class="boxChart"> |
| | | <div style="width: 5rem;height: 1.5rem;" id="popChart" ref="main"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import 'dayjs/locale/es' |
| | | import dayjs from 'dayjs' |
| | | |
| | | export default { |
| | | name: 'ECharts', |
| | | data () { |
| | | return { |
| | | value1: '', |
| | | value2: '', |
| | | watchData: [], |
| | | dialogVisible: false, |
| | | myChar: null, |
| | | RealTimeChart: null, |
| | | value: '', |
| | | days: dayjs(new Date()).format('YYYYMMDDHHmmss'), |
| | | formInline: { |
| | | region: '', |
| | | timeStart: '2021-04-13 12:47:18', |
| | | timeEnd: '2021-04-13 12:52:18' |
| | | }, |
| | | JsonRealWasteWater: { |
| | | id: 'mycharteff_second ', |
| | | title: 'COD', |
| | | legend: [ |
| | | { |
| | | icon: 'image://../assets/imgs/legend/NOX.png', |
| | | itemHeight: 5, |
| | | itemWidth: 20, |
| | | name: '氨氮', |
| | | textStyle: { color: '#ccc' } |
| | | }, |
| | | { |
| | | icon: 'image://../assets/imgs/legend/YanChen.png', |
| | | itemHeight: 5, |
| | | itemWidth: 20, |
| | | name: '总磷', |
| | | textStyle: { color: '#ccc' } |
| | | }, |
| | | { |
| | | icon: 'image://../assets/imgs/legend/SO2.png', |
| | | itemHeight: 5, |
| | | itemWidth: 20, |
| | | name: '总氮', |
| | | textStyle: { color: '#ccc' } |
| | | }, |
| | | { |
| | | icon: 'image://../assets/imgs/legend/NOX.png', |
| | | itemHeight: 5, |
| | | itemWidth: 20, |
| | | name: 'COD', |
| | | textStyle: { color: '#ccc' } |
| | | }, |
| | | { |
| | | icon: 'image://../assets/imgs/legend/VOCs.png', |
| | | itemHeight: 5, |
| | | itemWidth: 20, |
| | | name: '废水流量', |
| | | textStyle: { color: '#ccc' } |
| | | } |
| | | ], |
| | | ydatas: [ |
| | | { |
| | | name: '氮氧', |
| | | data: [{ name: '氮氧', value: ['Tue Apr 13 2021 12:47:18 GMT+0800 (中国标准时间)', 0.1900156] }, |
| | | { name: '氮氧', value: ['Tue Apr 13 2021 12:47:33 GMT+0800 (中国标准时间)', 0.1902795] }, |
| | | { name: '氮氧', value: ['Tue Apr 13 2021 12:47:48 GMT+0800 (中国标准时间)', 0.1892689] }, |
| | | { name: '氮氧', value: ['Tue Apr 13 2021 12:48:03 GMT+0800 (中国标准时间)', 0.1882582] }, |
| | | { name: '氮氧', value: ['Tue Apr 13 2021 12:48:18 GMT+0800 (中国标准时间)', 0.1882284] }, |
| | | { name: '氮氧', value: ['Tue Apr 13 2021 12:48:33 GMT+0800 (中国标准时间)', 0.1886617] }, |
| | | { name: '氮氧', value: ['Tue Apr 13 2021 12:48:48 GMT+0800 (中国标准时间)', 0.1873395] }, |
| | | { name: '氮氧', value: ['Tue Apr 13 2021 12:49:03 GMT+0800 (中国标准时间)', 0.1866319] }, |
| | | { name: '氮氧', value: ['Tue Apr 13 2021 12:49:18 GMT+0800 (中国标准时间)', 0.1895212] }, |
| | | { name: '氮氧', value: ['Tue Apr 13 2021 12:49:33 GMT+0800 (中国标准时间)', 0.1898232] }, |
| | | { name: '氮氧', value: ['Tue Apr 13 2021 12:49:48 GMT+0800 (中国标准时间)', 0.1880916] }, |
| | | { name: '氮氧', value: ['Tue Apr 13 2021 12:50:03 GMT+0800 (中国标准时间)', 0.1883546] }, |
| | | { name: '氮氧', value: ['Tue Apr 13 2021 12:50:18 GMT+0800 (中国标准时间)', 0.1907846] }, |
| | | { name: '氮氧', value: ['Tue Apr 13 2021 12:50:33 GMT+0800 (中国标准时间)', 0.1887416] }, |
| | | { name: '氮氧', value: ['Tue Apr 13 2021 12:50:48 GMT+0800 (中国标准时间)', 0.1873472] }, |
| | | { name: '氮氧', value: ['Tue Apr 13 2021 12:51:03 GMT+0800 (中国标准时间)', 0.1886214] }, |
| | | { name: '氮氧', value: ['Tue Apr 13 2021 12:51:18 GMT+0800 (中国标准时间)', 0.1891896] }, |
| | | { name: '氮氧', value: ['Tue Apr 13 2021 12:51:33 GMT+0800 (中国标准时间)', 0.1891176] }, |
| | | { name: '氮氧', value: ['Tue Apr 13 2021 12:51:48 GMT+0800 (中国标准时间)', 0.1890455] }, |
| | | { name: '氮氧', value: ['Tue Apr 13 2021 12:52:03 GMT+0800 (中国标准时间)', 0.1889734] }, |
| | | { name: '氮氧', value: ['Tue Apr 13 2021 12:52:18 GMT+0800 (中国标准时间)', 0.1889014] }], |
| | | zdcbcolor: 'red', |
| | | zxcolor: '#00B0F0', |
| | | bzz: 3 |
| | | }, |
| | | { |
| | | name: '总磷', |
| | | data: [{ name: '总磷', value: ['Tue Apr 13 2021 12:47:18 GMT+0800 (中国标准时间)', 0.03813388] }, |
| | | { name: '总磷', value: ['Tue Apr 13 2021 12:47:33 GMT+0800 (中国标准时间)', 0.03813333] }, |
| | | { name: '总磷', value: ['Tue Apr 13 2021 12:47:48 GMT+0800 (中国标准时间)', 0.03813278] }, |
| | | { name: '总磷', value: ['Tue Apr 13 2021 12:48:03 GMT+0800 (中国标准时间)', 0.03813223] }, |
| | | { name: '总磷', value: ['Tue Apr 13 2021 12:48:18 GMT+0800 (中国标准时间)', 0.03813168] }, |
| | | { name: '总磷', value: ['Tue Apr 13 2021 12:48:33 GMT+0800 (中国标准时间)', 0.03813113] }, |
| | | { name: '总磷', value: ['Tue Apr 13 2021 12:48:48 GMT+0800 (中国标准时间)', 0.03813057] }, |
| | | { name: '总磷', value: ['Tue Apr 13 2021 12:49:03 GMT+0800 (中国标准时间)', 0.03813003] }, |
| | | { name: '总磷', value: ['Tue Apr 13 2021 12:49:18 GMT+0800 (中国标准时间)', 0.03812947] }, |
| | | { name: '总磷', value: ['Tue Apr 13 2021 12:49:33 GMT+0800 (中国标准时间)', 0.03812892] }, |
| | | { name: '总磷', value: ['Tue Apr 13 2021 12:49:48 GMT+0800 (中国标准时间)', 0.03812837] }, |
| | | { name: '总磷', value: ['Tue Apr 13 2021 12:50:03 GMT+0800 (中国标准时间)', 0.03812782] }, |
| | | { name: '总磷', value: ['Tue Apr 13 2021 12:50:18 GMT+0800 (中国标准时间)', 0.03812727] }, |
| | | { name: '总磷', value: ['Tue Apr 13 2021 12:50:33 GMT+0800 (中国标准时间)', 0.03812672] }, |
| | | { name: '总磷', value: ['Tue Apr 13 2021 12:50:48 GMT+0800 (中国标准时间)', 0.03812617] }, |
| | | { name: '总磷', value: ['Tue Apr 13 2021 12:51:03 GMT+0800 (中国标准时间)', 0.03812562] }, |
| | | { name: '总磷', value: ['Tue Apr 13 2021 12:51:18 GMT+0800 (中国标准时间)', 0.03812507] }, |
| | | { name: '总磷', value: ['Tue Apr 13 2021 12:51:33 GMT+0800 (中国标准时间)', 0.03812452] }, |
| | | { name: '总磷', value: ['Tue Apr 13 2021 12:51:48 GMT+0800 (中国标准时间)', 0.03812397] }, |
| | | { name: '总磷', value: ['Tue Apr 13 2021 12:52:03 GMT+0800 (中国标准时间)', 0.03812342] }, |
| | | { name: '总磷', value: ['Tue Apr 13 2021 12:52:18 GMT+0800 (中国标准时间)', 0.03812287] }], |
| | | zdcbcolor: 'red', |
| | | zxcolor: '#f48183', |
| | | bzz: 0.3 |
| | | }, |
| | | { |
| | | name: '总氮', |
| | | data: [{ name: '总氮', value: ['Tue Apr 13 2021 12:47:18 GMT+0800 (中国标准时间)', 2.779342] }, |
| | | { name: '总氮', value: ['Tue Apr 13 2021 12:47:33 GMT+0800 (中国标准时间)', 2.779337] }, |
| | | { name: '总氮', value: ['Tue Apr 13 2021 12:47:48 GMT+0800 (中国标准时间)', 2.779331] }, |
| | | { name: '总氮', value: ['Tue Apr 13 2021 12:48:03 GMT+0800 (中国标准时间)', 2.779823] }, |
| | | { name: '总氮', value: ['Tue Apr 13 2021 12:48:18 GMT+0800 (中国标准时间)', 2.779321] }, |
| | | { name: '总氮', value: ['Tue Apr 13 2021 12:48:33 GMT+0800 (中国标准时间)', 2.779344] }, |
| | | { name: '总氮', value: ['Tue Apr 13 2021 12:48:48 GMT+0800 (中国标准时间)', 2.779452] }, |
| | | { name: '总氮', value: ['Tue Apr 13 2021 12:49:03 GMT+0800 (中国标准时间)', 2.779224] }, |
| | | { name: '总氮', value: ['Tue Apr 13 2021 12:49:18 GMT+0800 (中国标准时间)', 2.779133] }, |
| | | { name: '总氮', value: ['Tue Apr 13 2021 12:49:33 GMT+0800 (中国标准时间)', 2.779445] }, |
| | | { name: '总氮', value: ['Tue Apr 13 2021 12:49:48 GMT+0800 (中国标准时间)', 2.779743] }, |
| | | { name: '总氮', value: ['Tue Apr 13 2021 12:50:03 GMT+0800 (中国标准时间)', 2.779332] }, |
| | | { name: '总氮', value: ['Tue Apr 13 2021 12:50:18 GMT+0800 (中国标准时间)', 2.779562] }, |
| | | { name: '总氮', value: ['Tue Apr 13 2021 12:50:33 GMT+0800 (中国标准时间)', 2.779560] }, |
| | | { name: '总氮', value: ['Tue Apr 13 2021 12:50:48 GMT+0800 (中国标准时间)', 2.779534] }, |
| | | { name: '总氮', value: ['Tue Apr 13 2021 12:51:03 GMT+0800 (中国标准时间)', 2.779412] }, |
| | | { name: '总氮', value: ['Tue Apr 13 2021 12:51:18 GMT+0800 (中国标准时间)', 2.779673] }, |
| | | { name: '总氮', value: ['Tue Apr 13 2021 12:51:33 GMT+0800 (中国标准时间)', 2.779452] }, |
| | | { name: '总氮', value: ['Tue Apr 13 2021 12:51:48 GMT+0800 (中国标准时间)', 2.779397] }, |
| | | { name: '总氮', value: ['Tue Apr 13 2021 12:52:03 GMT+0800 (中国标准时间)', 2.779342] }, |
| | | { name: '总氮', value: ['Tue Apr 13 2021 12:52:18 GMT+0800 (中国标准时间)', 2.779287] }], |
| | | zdcbcolor: 'red', |
| | | zxcolor: '#e0ffff', |
| | | bzz: 15 |
| | | }, |
| | | { |
| | | name: '废水流量', |
| | | data: [{ name: '废水流量', value: ['Tue Apr 13 2021 12:47:18 GMT+0800 (中国标准时间)', 31.63029] }, |
| | | { name: '废水流量', value: ['Tue Apr 13 2021 12:47:33 GMT+0800 (中国标准时间)', 31.9791] }, |
| | | { name: '废水流量', value: ['Tue Apr 13 2021 12:47:48 GMT+0800 (中国标准时间)', 31.92095] }, |
| | | { name: '废水流量', value: ['Tue Apr 13 2021 12:48:03 GMT+0800 (中国标准时间)', 32.05784] }, |
| | | { name: '废水流量', value: ['Tue Apr 13 2021 12:48:18 GMT+0800 (中国标准时间)', 32.01669] }, |
| | | { name: '废水流量', value: ['Tue Apr 13 2021 12:48:33 GMT+0800 (中国标准时间)', 32.39344] }, |
| | | { name: '废水流量', value: ['Tue Apr 13 2021 12:48:48 GMT+0800 (中国标准时间)', 32.66452] }, |
| | | { name: '废水流量', value: ['Tue Apr 13 2021 12:49:03 GMT+0800 (中国标准时间)', 32.45224] }, |
| | | { name: '废水流量', value: ['Tue Apr 13 2021 12:49:18 GMT+0800 (中国标准时间)', 32.42133] }, |
| | | { name: '废水流量', value: ['Tue Apr 13 2021 12:49:33 GMT+0800 (中国标准时间)', 32.88445] }, |
| | | { name: '废水流量', value: ['Tue Apr 13 2021 12:49:48 GMT+0800 (中国标准时间)', 32.36743] }, |
| | | { name: '废水流量', value: ['Tue Apr 13 2021 12:50:03 GMT+0800 (中国标准时间)', 32.83332] }, |
| | | { name: '废水流量', value: ['Tue Apr 13 2021 12:50:18 GMT+0800 (中国标准时间)', 32.15562] }, |
| | | { name: '废水流量', value: ['Tue Apr 13 2021 12:50:33 GMT+0800 (中国标准时间)', 32.61560] }, |
| | | { name: '废水流量', value: ['Tue Apr 13 2021 12:50:48 GMT+0800 (中国标准时间)', 32.89534] }, |
| | | { name: '废水流量', value: ['Tue Apr 13 2021 12:51:03 GMT+0800 (中国标准时间)', 32.72412] }, |
| | | { name: '废水流量', value: ['Tue Apr 13 2021 12:51:18 GMT+0800 (中国标准时间)', 32.48673] }, |
| | | { name: '废水流量', value: ['Tue Apr 13 2021 12:51:33 GMT+0800 (中国标准时间)', 32.03452] }, |
| | | { name: '废水流量', value: ['Tue Apr 13 2021 12:51:48 GMT+0800 (中国标准时间)', 32.93397] }, |
| | | { name: '废水流量', value: ['Tue Apr 13 2021 12:52:03 GMT+0800 (中国标准时间)', 32.84342] }, |
| | | { name: '废水流量', value: ['Tue Apr 13 2021 12:52:18 GMT+0800 (中国标准时间)', 32.16287] }], |
| | | zdcbcolor: 'red', |
| | | zxcolor: '#9ACD32', |
| | | bzz: null |
| | | }, |
| | | { |
| | | name: 'COD', |
| | | data: [{ name: 'COD', value: ['Tue Apr 13 2021 12:47:18 GMT+0800 (中国标准时间)', 11.24385] }, |
| | | { name: 'COD', value: ['Tue Apr 13 2021 12:47:33 GMT+0800 (中国标准时间)', 11.24385] }, |
| | | { name: 'COD', value: ['Tue Apr 13 2021 12:47:48 GMT+0800 (中国标准时间)', 11.24385] }, |
| | | { name: 'COD', value: ['Tue Apr 13 2021 12:48:03 GMT+0800 (中国标准时间)', 11.24385] }, |
| | | { name: 'COD', value: ['Tue Apr 13 2021 12:48:18 GMT+0800 (中国标准时间)', 11.24385] }, |
| | | { name: 'COD', value: ['Tue Apr 13 2021 12:48:33 GMT+0800 (中国标准时间)', 11.24385] }, |
| | | { name: 'COD', value: ['Tue Apr 13 2021 12:48:48 GMT+0800 (中国标准时间)', 11.24385] }, |
| | | { name: 'COD', value: ['Tue Apr 13 2021 12:49:03 GMT+0800 (中国标准时间)', 11.24385] }, |
| | | { name: 'COD', value: ['Tue Apr 13 2021 12:49:18 GMT+0800 (中国标准时间)', 11.24385] }, |
| | | { name: 'COD', value: ['Tue Apr 13 2021 12:49:33 GMT+0800 (中国标准时间)', 11.24385] }, |
| | | { name: 'COD', value: ['Tue Apr 13 2021 12:49:48 GMT+0800 (中国标准时间)', 11.24385] }, |
| | | { name: 'COD', value: ['Tue Apr 13 2021 12:50:03 GMT+0800 (中国标准时间)', 11.24385] }, |
| | | { name: 'COD', value: ['Tue Apr 13 2021 12:50:18 GMT+0800 (中国标准时间)', 11.24385] }, |
| | | { name: 'COD', value: ['Tue Apr 13 2021 12:50:33 GMT+0800 (中国标准时间)', 11.24385] }, |
| | | { name: 'COD', value: ['Tue Apr 13 2021 12:50:48 GMT+0800 (中国标准时间)', 11.24385] }, |
| | | { name: 'COD', value: ['Tue Apr 13 2021 12:51:03 GMT+0800 (中国标准时间)', 11.24385] }, |
| | | { name: 'COD', value: ['Tue Apr 13 2021 12:51:18 GMT+0800 (中国标准时间)', 11.24385] }, |
| | | { name: 'COD', value: ['Tue Apr 13 2021 12:51:33 GMT+0800 (中国标准时间)', 11.24385] }, |
| | | { name: 'COD', value: ['Tue Apr 13 2021 12:51:48 GMT+0800 (中国标准时间)', 11.24385] }, |
| | | { name: 'COD', value: ['Tue Apr 13 2021 12:52:03 GMT+0800 (中国标准时间)', 11.24385] }, |
| | | { name: 'COD', value: ['Tue Apr 13 2021 12:52:18 GMT+0800 (中国标准时间)', 11.24385] }], |
| | | zdcbcolor: 'red', |
| | | zxcolor: '#fff21c', |
| | | bzz: 35 |
| | | } |
| | | ], |
| | | yname: ' 浓度(mg/l)' |
| | | } |
| | | } |
| | | }, |
| | | mounted () { |
| | | // this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss') |
| | | // this.formInline.timeStart = dayjs().subtract(1, 'minute').format('YYYY-MM-DD HH:mm:ss') |
| | | // this.DrawEXHRealTimeDateChart(this.JsonRealWasteWater.id, this.JsonRealWasteWater.title, this.JsonRealWasteWater.legend, this.JsonRealWasteWater.ydatas, this.JsonRealWasteWater.yname) |
| | | }, |
| | | methods: { |
| | | onSubmit () { |
| | | this.DrawRealTimeDateChart(this.JsonRealWasteWater.id, this.JsonRealWasteWater.title, this.JsonRealWasteWater.legend, this.JsonRealWasteWater.ydatas, this.JsonRealWasteWater.yname) |
| | | }, |
| | | DrawRealTimeDateChart (id, title, legend, ydatas, yname) { |
| | | this.RealTimeChart = this.$echarts.init(this.$refs.echarts) |
| | | var serLists = [] |
| | | for (var i = 0; i < ydatas.length; i++) { |
| | | // var zdcbcolor = ydatas[i].zdcbcolor |
| | | var bz = ydatas[i].bzz |
| | | var obj |
| | | if (bz) { |
| | | obj = { |
| | | name: ydatas[i].name, |
| | | // symbol:'circle', // 折点形状 |
| | | // symbolSize: 3, //大小 |
| | | smooth: true, // 直线 ,true 为曲线 |
| | | itemStyle: { |
| | | normal: { |
| | | color: function (c) { // 根据value 显示不同的折点颜色 |
| | | // var biaozhuiz |
| | | // for (var i = 0; i < bzzList.length; i++) { |
| | | // if (bzzList[i].name == c.seriesName) { |
| | | // biaozhuiz = bzzList[i].bzhui |
| | | // } |
| | | // } |
| | | // if (c.value[1] > biaozhuiz) { |
| | | // return zdcbcolor |
| | | // } else if (c.value[1] > biaozhuiz * 0.9) { |
| | | // return '#FFA500' |
| | | // } |
| | | // { |
| | | // return '#33c95f' |
| | | // } |
| | | }, |
| | | lineStyle: { // 折线的颜色 |
| | | color: ydatas[i].zxcolor, |
| | | width: 2 |
| | | }, |
| | | // borderColor:'black', //折点边框的颜色 |
| | | label: { // 显示值 |
| | | show: false |
| | | } |
| | | } |
| | | |
| | | }, |
| | | type: 'line', |
| | | data: ydatas[i].data, |
| | | markLine: { // 平均值 , 和 指标上限 |
| | | symbol: 'none', |
| | | data: [{ |
| | | label: { |
| | | normal: { |
| | | position: 'end', |
| | | formatter: ''// ydatas[i].name+'标准值' //+'{c}' |
| | | } |
| | | }, |
| | | name: '标准值', |
| | | yAxis: bz, |
| | | lineStyle: { |
| | | color: ydatas[i].zxcolor, |
| | | type: 'dashed', |
| | | width: 2 |
| | | } |
| | | } |
| | | ] |
| | | } |
| | | } |
| | | } else { |
| | | obj = { |
| | | name: ydatas[i].name, |
| | | // symbol:'circle', // 折点形状 |
| | | // symbolSize: 3, //大小 |
| | | smooth: true, // 直线 ,true 为曲线 |
| | | yAxisIndex: 1, |
| | | itemStyle: { |
| | | normal: { |
| | | color: function (c) { // 根据value 显示不同的折点颜色 |
| | | return '#33c95f' |
| | | }, |
| | | lineStyle: { // 折线的颜色 |
| | | color: ydatas[i].zxcolor, |
| | | width: 2 |
| | | }, |
| | | // borderColor:'black', //折点边框的颜色 |
| | | label: { // 显示值 |
| | | show: false |
| | | } |
| | | } |
| | | |
| | | }, |
| | | type: 'line', |
| | | data: ydatas[i].data |
| | | } |
| | | } |
| | | |
| | | if (ydatas[i].name === '废气流量' || ydatas[i].name === '废气') { |
| | | obj.yAxisIndex = 1 |
| | | } |
| | | serLists.push(obj) |
| | | } |
| | | |
| | | var option = { |
| | | /* title: { |
| | | text: title, |
| | | }, */ |
| | | tooltip: { // 提示框 |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'cross', |
| | | label: { |
| | | color: '#1a4245' |
| | | } |
| | | } |
| | | /* formatter: function (params) { |
| | | var s = params[0].name + '<br />' |
| | | for (var i = 0; i < params.length; i++) { |
| | | // var name = params[i].name |
| | | // 图表title名称 |
| | | var seriesName = params[i].seriesName |
| | | // 值 |
| | | var value = params[i].value[1] |
| | | |
| | | var valueFliter = formatter(value) |
| | | |
| | | var maker = params[i].marker |
| | | var colo = '' |
| | | switch (seriesName) { |
| | | case 'COD': |
| | | colo = '#fff21c' |
| | | break |
| | | case '氨氮': |
| | | colo = '#00B0F0' |
| | | break |
| | | case '总磷': |
| | | colo = '#f48183' |
| | | break |
| | | case '总氮': |
| | | colo = '#e0ffff' |
| | | break |
| | | default: |
| | | colo = '#9ACD32' |
| | | break |
| | | } |
| | | maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + colo + ';"></span>' |
| | | s += maker + seriesName + ':' + valueFliter + '<br />' |
| | | } |
| | | return s |
| | | } */ |
| | | }, |
| | | toolbox: { // 打印等工具 |
| | | show: false, |
| | | feature: { |
| | | saveAsImage: {} |
| | | } |
| | | }, |
| | | grid: { // 网格 |
| | | top: '20%', |
| | | left: '7%', |
| | | bottom: '10%' |
| | | }, |
| | | legend: { |
| | | data: legend |
| | | }, |
| | | dataZoom: [{ |
| | | type: 'inside', |
| | | start: 0, |
| | | end: 100 |
| | | }, { |
| | | start: 0, |
| | | end: 100, |
| | | show: false, |
| | | handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', |
| | | handleSize: '80%', |
| | | handleStyle: { |
| | | color: '#fff', |
| | | shadowBlur: 3, |
| | | shadowColor: 'rgba(0, 0, 0, 0.6)', |
| | | shadowOffsetX: 2, |
| | | shadowOffsetY: 2 |
| | | } |
| | | }], |
| | | xAxis: { // x 轴设置 |
| | | type: 'time', |
| | | boundaryGap: false, |
| | | axisLabel: { // x轴全部显示 |
| | | // rotate: 30, |
| | | margin: 6, |
| | | interval: 0, |
| | | textStyle: { |
| | | color: '#fff' |
| | | } |
| | | }, |
| | | splitLine: { // 网格垂直线为 虚线 |
| | | show: true, |
| | | lineStyle: { |
| | | type: 'dashed' |
| | | } |
| | | }, |
| | | axisTick: { // x 轴刻度显示 |
| | | show: false |
| | | }, |
| | | axisLine: { |
| | | lineStyle: { |
| | | color: '#FFFFFF', |
| | | width: 1// 这里是为了突出显示加上的 |
| | | } |
| | | } |
| | | // data: xdata |
| | | }, |
| | | yAxis: [{ |
| | | type: 'value', |
| | | name: yname, |
| | | max: function (value) { |
| | | return parseInt(value.max + 30) |
| | | }, |
| | | axisLabel: { |
| | | formatter: '{value}', |
| | | textStyle: { |
| | | color: '#fff' |
| | | } |
| | | }, |
| | | axisPointer: { |
| | | snap: true |
| | | }, |
| | | splitLine: { |
| | | show: false |
| | | }, // y轴 网格线不显示, |
| | | axisLine: { |
| | | lineStyle: { |
| | | color: '#FFFFFF', |
| | | width: 1// 这里是为了突出显示加上的 |
| | | } |
| | | } |
| | | }, { |
| | | type: 'value', |
| | | name: '流量(m³/h)', |
| | | axisLabel: { |
| | | formatter: '{value}', |
| | | textStyle: { |
| | | color: '#fff' |
| | | } |
| | | }, |
| | | axisPointer: { |
| | | snap: true |
| | | }, |
| | | splitLine: { |
| | | show: false |
| | | }, // y轴 网格线不显示, |
| | | // inverse: true, |
| | | // nameLocation: 'start', |
| | | // max:500, |
| | | axisLine: { |
| | | lineStyle: { |
| | | color: '#FFFFFF', |
| | | width: 1// 这里是为了突出显示加上的 |
| | | } |
| | | } |
| | | }], |
| | | series: serLists |
| | | } |
| | | this.RealTimeChart.setOption(option) |
| | | /* RealTimeChart.on('legendselectchanged', function (params) { |
| | | // console.log(params); |
| | | var StdVal = null |
| | | var op = { yAxis: {} } |
| | | if (params.selected.COD) { |
| | | if (bzzList && bzzList.length > 0) { |
| | | for (let i = 0; i < bzzList.length; i++) { |
| | | if (bzzList[i].name == 'COD') { |
| | | StdVal = bzzList[i].bzhui |
| | | } |
| | | } |
| | | } |
| | | |
| | | op.yAxis.max = function (value) { |
| | | var ma |
| | | if (value.max < StdVal) { |
| | | ma = StdVal |
| | | } else { |
| | | ma = Math.ceil(value.max) |
| | | } |
| | | return ma |
| | | } |
| | | } else if (params.selected['总氮']) { |
| | | if (bzzList && bzzList.length > 0) { |
| | | for (let i = 0; i < bzzList.length; i++) { |
| | | if (bzzList[i].name == '总氮') { |
| | | StdVal = bzzList[i].bzhui |
| | | } |
| | | } |
| | | } |
| | | op.yAxis.max = function (value) { |
| | | var ma |
| | | if (value.max < StdVal) { |
| | | ma = StdVal |
| | | } else { |
| | | ma = Math.ceil(value.max) |
| | | } |
| | | return ma |
| | | } |
| | | } else if (params.selected['氨氮']) { |
| | | if (bzzList && bzzList.length > 0) { |
| | | for (let i = 0; i < bzzList.length; i++) { |
| | | if (bzzList[i].name == '氨氮') { |
| | | StdVal = bzzList[i].bzhui |
| | | } |
| | | } |
| | | } |
| | | op.yAxis.max = function (value) { |
| | | var ma |
| | | if (value.max < StdVal) { |
| | | ma = StdVal |
| | | } else { |
| | | ma = Math.ceil(value.max) |
| | | } |
| | | return ma |
| | | } |
| | | } else if (params.selected['总磷']) { |
| | | if (bzzList && bzzList.length > 0) { |
| | | for (let i = 0; i < bzzList.length; i++) { |
| | | if (bzzList[i].name == '总磷') { |
| | | StdVal = bzzList[i].bzhui |
| | | } |
| | | } |
| | | } |
| | | op.yAxis.max = function (value) { |
| | | var ma |
| | | if (value.max < StdVal) { |
| | | ma = StdVal |
| | | } else { |
| | | ma = Math.ceil(value.max) |
| | | } |
| | | return ma |
| | | } |
| | | } |
| | | RealTimeChart.setOption(op) |
| | | }) */ |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped lang="less"> |
| | | .grid-content{ |
| | | font-size: 8px; |
| | | background-color: #2e4967; |
| | | text-align: center; |
| | | border-radius: 2px; |
| | | margin-right: 10px; |
| | | padding:0 10px |
| | | } |
| | | .infomation { |
| | | padding: 5px 10px; |
| | | } |
| | | |
| | | .form-echrts { |
| | | width: 100%; |
| | | border-top: 1px solid #396d83; |
| | | //margin: 10px 10px 10px 10px; |
| | | .from-search{ |
| | | display: flex; |
| | | padding:5px; |
| | | >div{margin-left: 10px} |
| | | .pickerMon{ |
| | | display: flex; |
| | | >div:first-child { |
| | | margin-right: 10px; |
| | | } |
| | | .pickerData{ |
| | | flex: 1; |
| | | display: flex; |
| | | >span{line-height: 22px} |
| | | .pickerTable { |
| | | margin-left: 3px; |
| | | } |
| | | } |
| | | } |
| | | /deep/.el-date-editor--datetime{ |
| | | width: 100%; |
| | | } |
| | | /deep/.el-input__inner{ |
| | | position: relative; |
| | | width:140px; |
| | | background-color: #2e4967; |
| | | color: #ffffff; |
| | | font-size: 12px; |
| | | height: 24px; |
| | | padding: 0; |
| | | border-color:#00fff6; |
| | | text-align: center; |
| | | //padding-left:20px ; |
| | | //padding: 0!important; |
| | | } |
| | | /deep/.el-input__icon{ |
| | | display: block; |
| | | width: 140px; |
| | | height: 22px; |
| | | line-height: 22px; |
| | | cursor: pointer; |
| | | font-size: 0; |
| | | } |
| | | .echatsInput{ |
| | | color: #00ffff; |
| | | background-color: #2e4967; |
| | | border: none; |
| | | border-radius: 6px; |
| | | width: 80px; |
| | | height: 22px; |
| | | text-align: center; |
| | | } |
| | | input::-webkit-calendar-picker-indicator { |
| | | opacity: 100; |
| | | } |
| | | .detailbtn{ |
| | | background-color:#2e4967; |
| | | text-align: center; |
| | | padding: 0 7px; |
| | | line-height: 24px; |
| | | border-radius: 4px; |
| | | margin-right: 6px; |
| | | } |
| | | .detailbtn:hover{ |
| | | box-shadow: 0 0 0.03rem #fff700 !important; |
| | | color:#fff700 !important; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | .el-dialog-div { |
| | | //height: 50vh!important; |
| | | overflow: auto; |
| | | //overflow: hidden; |
| | | } |
| | | |
| | | #echarts { |
| | | margin: 0; |
| | | padding: 0; |
| | | } |
| | | } |
| | | </style> |