派生自 wuyushui/SewerAndRainNetwork
src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue
@@ -1,10 +1,49 @@ <template> <div style="width:100%;height:2rem;margin-top: 0.3rem" ref="echarts"></div> <div id="Tab"> <div class="animation"> <div class="infomation"> <span class="grid-content">氮氧化物 :<i style="color: #e8ee0b">29.93</i> 标准 : 100</span> <span class="grid-content">二氧化硫 : <i style="color: #e8ee0b">17.34</i> 标准 : 50</span> <span class="grid-content">烟尘 : <i style="color: #e8ee0b">6.93</i> 标准 : 30</span> <span class="grid-content">废气流量 : <i style="color: #e8ee0b">120343.18</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 style="width:5rem;height:2rem;" ref="echarts"></div> </div> </div> </template> <script> import mapApi from '@/api/mapApi' // import mapApi from '@/api/mapApi' import 'dayjs/locale/es' import dayjs from 'dayjs' @@ -13,156 +52,382 @@ data () { return { days: dayjs(new Date()).format('YYYYMMDDHHmmss'), myChart: [], // x轴数据 xAxis: [], seriesData: [], seriesName: [] watchData: [], dialogVisible: false, myChar: null, value: '', formInline: { region: '', timeStart: '', timeEnd: '' }, RealTimeChart: null, info: this.series, JsonTimeCtarts: { id: 'mychart_ss ', title: '烟尘', legend: [ { name: '氮氧化物', icon: 'image://../assets/imgs/legend/NOX.png', textStyle: { color: '#ccc' }, itemWidth: 20, itemHeight: 5 }, { icon: 'image://../assets/imgs/legend/SO2.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/VOCs.png', itemHeight: 5, itemWidth: 20, name: '废气流量', textStyle: { color: '#ccc' } } ], ydatas: [ { name: '氮氧化物', data: [{ name: '氮氧化物', value: ['Tue Apr 13 2021 09:18:19 GMT+0800 (中国标准时间)', 39.51431] }, { name: '氮氧化物', value: ['Tue Apr 13 2021 09:18:34 GMT+0800 (中国标准时间)', 38.76508] }, { name: '氮氧化物', value: ['Tue Apr 13 2021 09:18:49 GMT+0800 (中国标准时间)', 37.57471] }, { name: '氮氧化物', value: ['Tue Apr 13 2021 09:19:04 GMT+0800 (中国标准时间)', 36.3796] }, { name: '氮氧化物', value: ['Tue Apr 13 2021 09:19:19 GMT+0800 (中国标准时间)', 36.10718] }, { name: '氮氧化物', value: ['Tue Apr 13 2021 09:19:34 GMT+0800 (中国标准时间)', 35.81126] }, { name: '氮氧化物', value: ['Tue Apr 13 2021 09:19:49 GMT+0800 (中国标准时间)', 35.9184] }, { name: '氮氧化物', value: ['Tue Apr 13 2021 09:20:04 GMT+0800 (中国标准时间)', 36.08839] }, { name: '氮氧化物', value: ['Tue Apr 13 2021 09:20:19 GMT+0800 (中国标准时间)', 36.3718] }, { name: '氮氧化物', value: ['Tue Apr 13 2021 09:20:34 GMT+0800 (中国标准时间)', 36.8966] }, { name: '氮氧化物', value: ['Tue Apr 13 2021 09:20:49 GMT+0800 (中国标准时间)', 37.3998] }, { name: '氮氧化物', value: ['Tue Apr 13 2021 09:21:04 GMT+0800 (中国标准时间)', 37.11937] }, { name: '氮氧化物', value: ['Tue Apr 13 2021 09:21:19 GMT+0800 (中国标准时间)', 36.12424] }, { name: '氮氧化物', value: ['Tue Apr 13 2021 09:21:34 GMT+0800 (中国标准时间)', 34.99567] }, { name: '氮氧化物', value: ['Tue Apr 13 2021 09:21:49 GMT+0800 (中国标准时间)', 34.48063] }, { name: '氮氧化物', value: ['Tue Apr 13 2021 09:22:04 GMT+0800 (中国标准时间)', 34.62222] }, { name: '氮氧化物', value: ['Tue Apr 13 2021 09:22:19 GMT+0800 (中国标准时间)', 34.84583] }, { name: '氮氧化物', value: ['Tue Apr 13 2021 09:22:34 GMT+0800 (中国标准时间)', 35.80923] }, { name: '氮氧化物', value: ['Tue Apr 13 2021 09:22:49 GMT+0800 (中国标准时间)', 35.93465] }, { name: '氮氧化物', value: ['Tue Apr 13 2021 09:23:04 GMT+0800 (中国标准时间)', 35.78891] }, { name: '氮氧化物', value: ['Tue Apr 13 2021 09:23:19 GMT+0800 (中国标准时间)', 35.54268] }], zdcbcolor: 'red', zxcolor: '#00B0F0', bzz: 50 }, { name: '二氧化硫', data: [{ name: '二氧化硫', value: ['Tue Apr 13 2021 09:18:19 GMT+0800 (中国标准时间)', 5.112573] }, { name: '二氧化硫', value: ['Tue Apr 13 2021 09:18:34 GMT+0800 (中国标准时间)', 4.578955] }, { name: '二氧化硫', value: ['Tue Apr 13 2021 09:18:49 GMT+0800 (中国标准时间)', 4.869465] }, { name: '二氧化硫', value: ['Tue Apr 13 2021 09:19:04 GMT+0800 (中国标准时间)', 5.270735] }, { name: '二氧化硫', value: ['Tue Apr 13 2021 09:19:19 GMT+0800 (中国标准时间)', 5.355475] }, { name: '二氧化硫', value: ['Tue Apr 13 2021 09:19:34 GMT+0800 (中国标准时间)', 5.242907] }, { name: '二氧化硫', value: ['Tue Apr 13 2021 09:19:49 GMT+0800 (中国标准时间)', 5.230558] }, { name: '二氧化硫', value: ['Tue Apr 13 2021 09:20:04 GMT+0800 (中国标准时间)', 5.262951] }, { name: '二氧化硫', value: ['Tue Apr 13 2021 09:20:19 GMT+0800 (中国标准时间)', 5.268744] }, { name: '二氧化硫', value: ['Tue Apr 13 2021 09:20:34 GMT+0800 (中国标准时间)', 5.159671] }, { name: '二氧化硫', value: ['Tue Apr 13 2021 09:20:49 GMT+0800 (中国标准时间)', 4.955352] }, { name: '二氧化硫', value: ['Tue Apr 13 2021 09:21:04 GMT+0800 (中国标准时间)', 5.110546] }, { name: '二氧化硫', value: ['Tue Apr 13 2021 09:21:19 GMT+0800 (中国标准时间)', 5.235723] }, { name: '二氧化硫', value: ['Tue Apr 13 2021 09:21:34 GMT+0800 (中国标准时间)', 5.443502] }, { name: '二氧化硫', value: ['Tue Apr 13 2021 09:21:49 GMT+0800 (中国标准时间)', 5.708939] }, { name: '二氧化硫', value: ['Tue Apr 13 2021 09:22:04 GMT+0800 (中国标准时间)', 5.882327] }, { name: '二氧化硫', value: ['Tue Apr 13 2021 09:22:19 GMT+0800 (中国标准时间)', 6.017494] }, { name: '二氧化硫', value: ['Tue Apr 13 2021 09:22:34 GMT+0800 (中国标准时间)', 5.410021] }, { name: '二氧化硫', value: ['Tue Apr 13 2021 09:22:49 GMT+0800 (中国标准时间)', 5.379694] }, { name: '二氧化硫', value: ['Tue Apr 13 2021 09:23:04 GMT+0800 (中国标准时间)', 5.551433] }, { name: '二氧化硫', value: ['Tue Apr 13 2021 09:23:19 GMT+0800 (中国标准时间)', 5.819743] }], zdcbcolor: 'red', zxcolor: '#fff21c', bzz: 50 }, { name: '废气流量', data: [{ name: '废气流量', value: ['Tue Apr 13 2021 09:18:19 GMT+0800 (中国标准时间)', 5.012617] }, { name: '废气流量', value: ['Tue Apr 13 2021 09:18:34 GMT+0800 (中国标准时间)', 4.992213] }, { name: '废气流量', value: ['Tue Apr 13 2021 09:18:49 GMT+0800 (中国标准时间)', 5.026886] }, { name: '废气流量', value: ['Tue Apr 13 2021 09:19:04 GMT+0800 (中国标准时间)', 5.052861] }, { name: '废气流量', value: ['Tue Apr 13 2021 09:19:19 GMT+0800 (中国标准时间)', 5.038826] }, { name: '废气流量', value: ['Tue Apr 13 2021 09:19:34 GMT+0800 (中国标准时间)', 5.062339] }, { name: '废气流量', value: ['Tue Apr 13 2021 09:19:49 GMT+0800 (中国标准时间)', 5.071915] }, { name: '废气流量', value: ['Tue Apr 13 2021 09:20:04 GMT+0800 (中国标准时间)', 5.053693] }, { name: '废气流量', value: ['Tue Apr 13 2021 09:20:19 GMT+0800 (中国标准时间)', 5.03562] }, { name: '废气流量', value: ['Tue Apr 13 2021 09:20:34 GMT+0800 (中国标准时间)', 5.043983] }, { name: '废气流量', value: ['Tue Apr 13 2021 09:20:49 GMT+0800 (中国标准时间)', 5.059231] }, { name: '废气流量', value: ['Tue Apr 13 2021 09:21:04 GMT+0800 (中国标准时间)', 5.042176] }, { name: '废气流量', value: ['Tue Apr 13 2021 09:21:19 GMT+0800 (中国标准时间)', 5.028253] }, { name: '废气流量', value: ['Tue Apr 13 2021 09:21:34 GMT+0800 (中国标准时间)', 5.024891] }, { name: '废气流量', value: ['Tue Apr 13 2021 09:21:49 GMT+0800 (中国标准时间)', 5.01542] }, { name: '废气流量', value: ['Tue Apr 13 2021 09:22:04 GMT+0800 (中国标准时间)', 5.025787] }, { name: '废气流量', value: ['Tue Apr 13 2021 09:22:19 GMT+0800 (中国标准时间)', 5.038269] }, { name: '废气流量', value: ['Tue Apr 13 2021 09:22:34 GMT+0800 (中国标准时间)', 5.01441] }, { name: '废气流量', value: ['Tue Apr 13 2021 09:22:49 GMT+0800 (中国标准时间)', 5.010105] }, { name: '废气流量', value: ['Tue Apr 13 2021 09:23:04 GMT+0800 (中国标准时间)', 5.012341] }, { name: '废气流量', value: ['Tue Apr 13 2021 09:23:19 GMT+0800 (中国标准时间)', 4.996146] }], zdcbcolor: 'red', zxcolor: '#9ACD32', bzz: null }, { name: '烟尘', data: [{ name: '烟尘', value: [['Tue Apr 13 2021 09:18:19 GMT+0800 (中国标准时间)', 0.8297127]] }, { name: '烟尘', value: ['Tue Apr 13 2021 09:18:34 GMT+0800 (中国标准时间)', 0.8347292] }, { name: '烟尘', value: ['Tue Apr 13 2021 09:18:49 GMT+0800 (中国标准时间)', 0.9218481] }, { name: '烟尘', value: ['Tue Apr 13 2021 09:19:04 GMT+0800 (中国标准时间)', 0.913429] }, { name: '烟尘', value: ['Tue Apr 13 2021 09:19:19 GMT+0800 (中国标准时间)', 0.9026684] }, { name: '烟尘', value: ['Tue Apr 13 2021 09:19:34 GMT+0800 (中国标准时间)', 0.8060119] }, { name: '烟尘', value: ['Tue Apr 13 2021 09:19:49 GMT+0800 (中国标准时间)', 0.781314] }, { name: '烟尘', value: ['Tue Apr 13 2021 09:20:04 GMT+0800 (中国标准时间)', 0.8958074] }, { name: '烟尘', value: ['Tue Apr 13 2021 09:20:19 GMT+0800 (中国标准时间)', 0.9093901] }, { name: '烟尘', value: ['Tue Apr 13 2021 09:20:34 GMT+0800 (中国标准时间)', 0.8743498] }, { name: '烟尘', value: ['Tue Apr 13 2021 09:20:49 GMT+0800 (中国标准时间)', 0.9024854] }, { name: '烟尘', value: ['Tue Apr 13 2021 09:21:04 GMT+0800 (中国标准时间)', 0.9456897] }, { name: '烟尘', value: ['Tue Apr 13 2021 09:21:19 GMT+0800 (中国标准时间)', 0.9747347] }, { name: '烟尘', value: ['Tue Apr 13 2021 09:21:34 GMT+0800 (中国标准时间)', 0.9200308] }, { name: '烟尘', value: ['Tue Apr 13 2021 09:21:49 GMT+0800 (中国标准时间)', 0.8987293] }, { name: '烟尘', value: ['Tue Apr 13 2021 09:22:04 GMT+0800 (中国标准时间)', 0.8613345] }, { name: '烟尘', value: ['Tue Apr 13 2021 09:22:19 GMT+0800 (中国标准时间)', 0.8747463] }, { name: '烟尘', value: ['Tue Apr 13 2021 09:22:34 GMT+0800 (中国标准时间)', 0.8883187] }, { name: '烟尘', value: ['Tue Apr 13 2021 09:22:49 GMT+0800 (中国标准时间)', 0.881333] }, { name: '烟尘', value: ['Tue Apr 13 2021 09:23:04 GMT+0800 (中国标准时间)', 0.9142911] }, { name: '烟尘', value: ['Tue Apr 13 2021 09:23:19 GMT+0800 (中国标准时间)', 0.9569058] }], zdcbcolor: 'red', zxcolor: '#f48183', bzz: 10 }], yname: ' 浓度(mg/m³)' } } }, mounted () { this.$nextTick(() => { this.upDateEchartsData() }) // const Day = new Date() // console.log(Day) this.DrawEXHRealTimeDateChart(this.JsonTimeCtarts.id, this.JsonTimeCtarts.title, this.JsonTimeCtarts.legend, this.JsonTimeCtarts.ydatas, this.JsonTimeCtarts.yname) }, methods: { 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)).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() // EndTime () { // var myDate = new Date() // var mytime = myDate.toLocaleTimeString() // 获取当前时间 // console.log(mytime) // }, // handleshowcomplaint(row) { // this.temp.complaint_consultationtime = new Date() // }, onSubmit () { this.DrawEXHRealTimeDateChart(this.JsonTimeCtarts.id, this.JsonTimeCtarts.title, this.JsonTimeCtarts.legend, this.JsonTimeCtarts.ydatas, this.JsonTimeCtarts.yname) }, // 初始化echarts 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] // formatter (value, index) { // return parseFloat(value).toFixed(2) // }, DrawEXHRealTimeDateChart (id, title, legend, ydatas, yname) { this.RealTimeChart = this.$echarts.init(this.$refs.echarts) // this.myChart.clear() 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: 10, //大小 smooth: true, // 直线 ，true 为曲线 itemStyle: { normal: { color: function (c) { // 根据value 显示不同的折点颜色 // var biaozhuiz // for (var i = 0; i < exhbzzList.length; i++) { // if (exhbzzList[i].name == c.seriesName) { // biaozhuiz = exhbzzList[i].bzhui // } // } // if (c.value[1] > biaozhuiz) { // return zdcbcolor // } else if (c.value[1] > biaozhuiz * 0.9) { // return '#FFA500' // } else { // 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: 10, //大小 smooth: true, // 直线 ，true 为曲线 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 } } ] const option = { title: { text: '实时数据', target: 'blank', left: '5%', textStyle: { color: '#fff', fontSize: 15, bottom: 20 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 = this.formatter(value) var maker = params[i].marker if (seriesName === '二氧化硫') { maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff21c;"></span>' } else if (seriesName === '氮氧化物') { maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#00B0F0;"></span>' } else if (seriesName === '烟尘') { maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f48183;"></span>' } else if (seriesName === '温度') { maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#F206FF;"></span>' } else { maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ec99c;"></span>' } s += maker + seriesName + ':' + valueFliter + '<br />' } return s } }, tooltip: { trigger: 'axis' }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { toolbox: { // 打印等工具 show: false, feature: { saveAsImage: {} } }, dataZoom: [ { type: 'inside' // start: 50, // end: 100, // filterMode: 'empty' } ], legend: { data: legendData, textStyle: { color: '#ffffff', fontSize: 12 } grid: { // 网格 top: '20%' }, xAxis: { type: 'category', 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: { rotate: 20, axisLabel: { // x轴全部显示 // rotate: 20, margin: 6, interval: 0, textStyle: { color: '#fff' } }, splitLine: { splitLine: { // 网格垂直线为 虚线 show: true, lineStyle: { type: 'dashed' } }, axisTick: { axisTick: { // x 轴刻度显示 show: false }, axisLine: { lineStyle: { color: '#FFFFFF', width: 1 width: 1// 这里是为了突出显示加上的 } }, data: xAxisData } // data: xdata }, 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); // }, name: yname, max: function (value) { var ma = value.max > 100 ? value.max : 100 return parseInt(ma) }, axisLabel: { formatter: '{value}', textStyle: { color: '#fff' } }, axisPointer: { snap: true }, splitLine: { show: false @@ -170,36 +435,160 @@ axisLine: { lineStyle: { color: '#FFFFFF', width: 1 width: 1// 这里是为了突出显示加上的 } } }, { }, { // 流量轴 type: 'value', name: 'dataUnit', name: '废气流量(m3/h)', axisLabel: { formatter: '{value}', textStyle: { color: '#fff' } }, axisPointer: { snap: true }, splitLine: { show: false }, }, // y轴 网格线不显示, axisLine: { lineStyle: { color: '#FFFFFF', width: 1 width: 1// 这里是为了突出显示加上的 } } }], series: seriesData series: serLists } this.myChart.setOption(option) this.RealTimeChart.setOption(option) // this.RealTimeChart.on('legendselectchanged', function (params) { // var StdVal = null // var op = { yAxis: {} } // var max_val_list = [] // 所有显示折线的标准值 // if (exhbzzList && exhbzzList.length > 0) { // $.each(exhbzzList, function (index, item) { // params.selected[item.name] ? max_val_list.push(item.bzhui) : '' // if (item.name === params.name) { // item.name === 'VOCs' ? StdVal = 20 : StdVal = item.bzhui // } // }) // } // max_val_list = max_val_list.sort(function (a, b) { return a - b }) // 排序 // op.yAxis.max = function (value) { // var ma = value.max < StdVal ? StdVal : Math.ceil(value.max) // max_val_list ? ma = max_val_list[max_val_list.length - 1] : ''// 选择最大值 // return ma // } // RealTimeChart.setOption(op) // }) // RealTimeChart.on('click', function (params) { // var nowDate = new Date().Format() // }) } } } </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 >i{ color: #ffffff; } } .animation { //width: 600px; //height: 0.06rem; .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: #fff; 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; } input::-webkit-calendar-picker-indicator { opacity: 100; } .detailbtn{ background-color:#2e4967; text-align: center; padding: 0 7px; line-height: 20px; border-radius: 4px; margin-right: 6px; } } .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>
