优化

src/components/ChartTimeLineBar/index.vue

@@ -5,6 +5,8 @@
 </template>
 
 <script>
+import echarts from "echarts";
+
 require("echarts/theme/macarons")
 export default {
   props: {
@@ -21,6 +23,15 @@ export default {
     return {
       // 表单参数
       form: {},
+      color1: ['#FA8072',   '#0fec7d', '#ab36fc','#ffbd89',
+        '#CD9B1D','#ff7f50',  '#EE1289', '#ee9c9c',
+        '#06e8d6', '#de79c2','#bebe0f', '#00F5FF',
+        '#f50000', '#00CD66', '#c400fa',  '#eca86c'],
+
+      color2: [ '#B22222',  '#04793e', '#7705a4','#8a5c08',
+        '#8B6914', '#a93f07', '#8B0A50', '#755252',
+        '#078075', '#cd5c5c', '#8B8B00', '#6b8e23',
+        '#590404', '#3cb371', '#48005d', '#5e4310']
     };
   },
   created() {
@@ -59,13 +70,19 @@ export default {
             xAxisType = 'category';
             yAxisBoundaryGap = [0,'5%'];
           }
+          let color = this.color1
+          var color2 = this.color2;
           var option = {
               title : {
                   text : title,
                   subtext : '',
-                  x:'center'
+                  x:'center',
+                  textStyle:{
+                    //文字颜色
+                    color:'#464b50',
+                  }
               },
-              colors:[],
+              color:color,
               tooltip : {
                   trigger: 'axis',
                   formatter: function (params) {
@@ -87,36 +104,61 @@ export default {
                   }
               },
               toolbox: {
-                  show : true,
+                show : true,
-                  feature : {
+                feature : {
-                      mark : {show: true},
+                  mark : {show: true},
-                      // dataView : {show: true, readOnly: false},
+                  // dataView : {show: true, readOnly: false},
-                      restore : {show: true},
+                  restore: {
-                      saveAsImage : {show: true}
+                    iconStyle: {
+                      borderColor: '#000'
+                    }
                   },
-                  y:'center',
+                  saveAsImage: {
-                  orient:'vertical'
+                    iconStyle: {
-              },
+                      borderColor: '#000',
-              dataZoom: {
+                    }
-                  show: true,
+                  },
-                  start : 0,
+                },
-                  end: 100
+                y:'center',
+                orient:'vertical'
               },
+              // dataZoom: {
+              //     show: true,
+              //     start : 0,
+              //     end: 100
+              // },
               legend : {
                   data : legend,
-                  x: 'right'
+                  right: 10,
+                  top:20,
+                  textStyle: {
+                    color: "#333"
+                  },
+                  itemWidth: 15,
+                  itemHeight: 8,
               },
               grid: {
-                  top: '10%',
+                left: '5%',
-                  y2: 70,
+                right: '5%',
-                  y: 60
+                bottom: '5%',
+                top: '15%',
+                containLabel: true
               },
               xAxis : [
                   {
                       // splitNumber:10, //x轴显示段数
                       type : xAxisType,
                       // boundaryGap: ['20%', '20%'],
+                      axisLine: {
+                        lineStyle: {
+                          // color: '#cbcaca'
+                          color: '#b3b6b9'
+                        }
+                      },
                       axisLabel: {
+                          textStyle: {
+                            color: "#606e7a",
+                          },
                           // rotate: 60,
                           formatter: function (value) {
                               var date = new Date(value);
@@ -136,29 +178,97 @@ export default {
               yAxis : [
                   {
                       max: function (value) {
-                        return value.max + 0.05
+                        return (value.max + (value.max - value.min)  * 0.3).toFixed(2)
                       },
                       min: function (value) {
                         if(type == 'line'){
-                          return value.min - 0.05
+                          return (value.min - (value.max - value.min)  * 0.3).toFixed(2)
                         }
                         return 0
                       },
                       type : 'value',
                       axisLabel : {
+                          textStyle: {
+                            color: "#606e7a",
+                          },
                           formatter: function (value,index) {
                               return value.toFixed(fixed);
                           }
                       },
+                      axisLine: {
+                        show: true,
+                        lineStyle: {
+                          color: '#b3b6b9'
+                        }
+                      },
                       name: unit,
+                      nameTextStyle:{//y轴上方单位的颜色
+                        color:'#464b50'
+                      },
                       nameLocation:'middle',
                       nameGap:50,
                       // scale:true,//不从0开始
                       boundaryGap: yAxisBoundaryGap
                   }
               ],
-              series : series
+              series : []
           };
+
+          if (type == 'bar'){
+        for (let i = 0; i < series.length; i++) {
+          option.series.push(
+            {
+              name: series[i]["name"],
+              type: type,
+              barMaxWidth: '20',
+              // symbolSize: 0,
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: color[i]
+                  }, {
+                    offset: 1,
+                    color: color2[i]
+                  }]),
+                  barBorderRadius: 11,
+                }
+              },
+              data: series[i]["data"]
+            }
+          )
+        }
+      }else{
+        for (let i = 0; i < series.length; i++) {
+          if (series[i]["type"] == 'line'){
+            option.series.push({
+              name: series[i]["name"],
+              type: 'line',
+              showSymbol: false,
+              smooth: true,
+              lineStyle: {
+                width: 2,
+                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: color[i]
+                  },
+                  {
+                    offset: 1,
+                    color: color2[i]
+                  }
+                ]),
+                shadowColor: 'rgba(241,240,246,0.84)',
+                shadowBlur: 5,
+                shadowOffsetY: 3
+              },
+              data: series[i]["data"]
+            })
+          }else{
+            option.series.push(series[i])
+          }
+        }
+      }
           return option;
     },
 

src/views/rtudata/rtudata/index.vue

@@ -12,12 +12,11 @@
           <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         </el-form-item>
       </el-form>
-<!--      <div style="height: calc(50vh - 140px);width: 95%">-->
+      <div style="height: calc(50vh - 140px);width: 95%">
-<!--        <barChart ref="chart" height="300" chartName="myEcharts"/>-->
+        <barChart ref="chart" height="300" chartName="myEcharts"/>
-<!--      </div>-->
+      </div>
       <el-tab-pane v-for="data in tabsList" :key="data.itemCode" :label="data.item" :name="data.itemCode">
-<!--            <el-table v-loading="loading" :data="rtudataList" border height="calc(50vh - 100px)">-->
+            <el-table v-loading="loading" :data="rtudataList" border height="calc(50vh - 100px)">
-            <el-table v-loading="loading" :data="rtudataList" border>
               <el-table-column label="序号"  align="center">
                  <template slot-scope="scope">
                    {{ scope.$index + (queryParams.page - 1) * queryParams.limit + 1 }}
@@ -46,6 +45,11 @@
                   <span>{{ parseTime(scope.row.dt, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                 </template>
               </el-table-column>
+              <el-table-column label="上报时间" align="center" prop="updDt" width="180">
+                <template slot-scope="scope">
+                  <span>{{ parseTime(scope.row.updDt, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+                </template>
+              </el-table-column>
             </el-table>
 
             <pagination
@@ -153,6 +157,9 @@ export default {
       if (this.queryParams.item.includes('降水量')){
         this.chartType = 'bar';
         this.chartYname ="雨量(mm)"
+      }else{
+        this.chartType = 'line';
+        this.chartYname ="水位(m)"
       }
       this.$refs.chart.showChart(res.data.legend,res.data.series,this.chartYname,this.chartType,0,null,this.fixed);
     },
@@ -166,7 +173,7 @@ export default {
       }
       this.queryParams.page = 1;
       this.getList();
-      // this.getCharts();
+      this.getCharts();
     },
     /** 查询标签列表 */
     async getTabsList() {
@@ -176,7 +183,7 @@ export default {
         this.queryParams.itemCode = this.tabsList[0].itemCode
         this.queryParams.item = this.tabsList[0].item
         this.getList();
-        // this.getCharts();
+        this.getCharts();
       }
     },