派生自 wuyushui/SewerAndRainNetwork
src/components/BaseNav/PublicBounced/common/echarts/EChartsHour.vue
@@ -57,7 +57,7 @@ <script> import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList' import dayjs from 'dayjs' export default { name: 'ECharts', components: { @@ -123,11 +123,11 @@ ], xdata: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时'], ydatas: [ { name: '氮氧化物', data: ['34.44', '36.91', '37.65', '37.16', '38.03', '38.23', '37.21', '37.67', '37.97', '37.58', '36.61', '37.76', '37.27', '37.24', '35.86', 'NaN', 'NaN'], zdcbcolor: 'red', zxcolor: '#00B0F0', bzz: 50 }, { name: '二氧化硫', data: ['4.98', '4.57', '4.19', '3.14', '3.80', '3.62', '3.33', '2.80', '3.13', '2.54', '3.08', '2.48', '1.97', '1.76', '0.82', 'NaN', 'NaN'], zdcbcolor: 'red', zxcolor: '#fff21c', bzz: 35 }, { name: '废气流量', data: ['381907.22', '376474.19', '378572.31', '379369.44', '385225.72', '388657.56', '330667.31', '26560.98', '0.00', '0.00', '49567.43', '357837.31', '376972.66', '379693.50', '379982.22', 'NaN', 'NaN'], zdcbcolor: 'red', zxcolor: '#9ACD32', bzz: null }, { name: '烟尘', data: ['4.02', '4.17', '4.31', '4.00', '4.45', '4.40', '4.40', '4.25', '4.26', '4.18', '4.58', '4.21', '3.96', '3.83', '3.78', 'NaN', 'NaN'], zdcbcolor: 'red', zxcolor: '#f48183', bzz: 10 }, { name: '温度', data: ['46.55', '46.70', '46.47', '46.56', '46.57', '46.58', '46.56', '46.58', '46.69', '46.47', '46.58', '46.60', '46.54', '46.55', '46.60', 'NaN', 'NaN'], zdcbcolor: 'red', zxcolor: '#F206FF', bzz: null } { name: '氮氧化物', data: ['34.44', '36.91', '37.65', '37.16', '38.03', '38.23', '37.21', '37.67', '37.97', '37.58', '36.61', '37.76', '37.27', '37.24', '35.86', '36.61', '37.21'], zdcbcolor: 'red', zxcolor: '#00B0F0', bzz: 50 }, { name: '二氧化硫', data: ['4.98', '4.57', '4.19', '3.14', '3.80', '3.62', '3.33', '2.80', '3.13', '2.54', '3.08', '2.48', '1.97', '1.76', '0.82', '1.01', '1.5'], zdcbcolor: 'red', zxcolor: '#fff21c', bzz: 35 }, { name: '废气流量', data: ['381907.22', '376474.19', '378572.31', '379369.44', '385225.72', '388657.56', '330667.31', '26560.98', '0.00', '0.00', '49567.43', '357837.31', '376972.66', '379693.50', '379982.22', '379693.50', '379982.22'], zdcbcolor: 'red', zxcolor: '#9ACD32', bzz: null }, { name: '烟尘', data: ['4.02', '4.17', '4.31', '4.00', '4.45', '4.40', '4.40', '4.25', '4.26', '4.18', '4.58', '4.21', '3.96', '3.83', '3.78', '3.83', '3.78'], zdcbcolor: 'red', zxcolor: '#f48183', bzz: 10 }, { name: '温度', data: ['46.55', '46.70', '46.47', '46.56', '46.57', '46.58', '46.56', '46.58', '46.69', '46.47', '46.58', '46.60', '46.54', '46.55', '46.60', '46.55', '46.60'], zdcbcolor: 'red', zxcolor: '#F206FF', bzz: null } ], yname: ' 浓度(mg/m³)', // id:'mychart', @@ -141,6 +141,8 @@ // } }, mounted () { 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() // this.CreateChart(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype) }, @@ -552,99 +554,87 @@ </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; .animation { .infomation { padding: 0.02rem 0.04rem; .grid-content { font-size: 0.08rem; background-color: #2e4967; text-align: center; border-radius: 0.01rem; height: 0.15rem; line-height: 0.15rem; margin-right: 0.04rem; padding:0 0.04rem } .pickerData{ flex: 1; } } .form-echrts { width: 100%; border-top: 1px solid #396d83; //margin: 10px 10px 10px 10px; .from-search{ display: flex; padding:0.02rem; >div{margin-left: 10px} .pickerMon{ display: flex; >span{line-height: 22px} .pickerTable { margin-left: 3px; >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; } /deep/.el-date-editor--datetime{ width: 100%; } /deep/.el-input__inner{ position: relative; width:1rem; background-color: #2e4967; color: #fff; font-size: 0.08rem; height: 0.15rem; padding: 0; border:none; text-align: center; //padding-left:20px ; //padding: 0!important; } /deep/.el-input__icon{ display: block; width:1rem; height: 0.15rem; line-height: 0.15rem; cursor: pointer; font-size: 0; } #echarts { margin: 0; padding: 0; input::-webkit-calendar-picker-indicator { opacity: 100; } .detailbtn{ background-color:#2e4967; text-align: center; padding: 0 7px; height: 0.15rem; line-height: 0.15rem; border-radius: 4px; margin-right: 6px; } } .el-dialog-div { overflow: auto; } #echarts { margin: 0; padding: 0; } } } </style>
