修改界面显示

src/views/board/pourInto/index2.vue

@@ -5,6 +5,7 @@
          :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
       {{ i }}
     </div>
+    <div class="centerImg"></div>
 
     <div class="top1">
       <p>
@@ -565,7 +566,7 @@
       </vue-seamless-scroll>
     </div>
     <div class="chart1">
-      <Chart ref="chart41"></Chart>
+      <Chart ref="chart1"></Chart>
     </div>
   </div>
 </template>
@@ -625,7 +626,7 @@ export default {
   mounted() {
     getData().then(e => {
       this.scrollTableData = e.table6
-      this.$refs.chart11.setData(this.option('灌注量', e.chart10.data[0]))
+      this.$refs.chart1.setData(this.option('灌注量', e.chart10.data[0]))
       this.$refs.chart11.setData(this.option('灌注量', e.chart10.data[0]))
       this.$refs.chart12.setData(this.option('标准灌注量', e.chart10.data[1]))
       this.$refs.chart13.setData(this.option('灌注压力', e.chart10.data[2]))
@@ -796,6 +797,18 @@ export default {
   letter-spacing: 2px;
 }
 
+.centerImg{
+  background-image: url("../../../assets/board/finalAssemblyModel.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 46%;
+  left: 50%;
+  width: 46%;
+  height: 22%;
+  transform: translate(-50%, -50%);
+}
+
 
 .scrollTableItem {
   color: rgb(185, 186, 192);

src/views/dashboard/LineChart.vue

@@ -1,9 +1,10 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div :class="className" :style="{height:height,width:width}"/>
 </template>
 
 <script>
 import * as echarts from 'echarts';
+
 require('echarts/theme/macarons') // echarts theme
 import resize from './mixins/resize'
 
@@ -61,11 +62,11 @@ export default {
       this.chart = echarts.init(this.$el, 'macarons')
       this.setOptions(this.chartData)
     },
-    setOptions({ expectedData, actualData } = {}) {
+    setOptions({expectedData, actualData} = {}) {
       this.chart.setOption({
         xAxis: {
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          boundaryGap: false,
+          // boundaryGap: false,
           axisTick: {
             show: false
           }
@@ -84,50 +85,63 @@ export default {
           },
           padding: [5, 10]
         },
-        yAxis: {
+        yAxis: [
-          axisTick: {
+          {
-            show: false
+            axisTick: {
+              show: false
+            }
+          },
+          {
+            axisTick: {
+              show: false
+            }
           }
-        },
+        ],
         legend: {
           data: ['expected', 'actual']
         },
-        series: [{
+        series: [
-          name: 'expected', itemStyle: {
+          {
-            normal: {
+            name: 'actual1',
-              color: '#FF005A',
+            type: 'bar',
-              lineStyle: {
+            yAxisIndex:1,
-                color: '#FF005A',
+            itemStyle: {
-                width: 2
+              normal: {
+                color: '#3888fa',
+                lineStyle: {
+                  color: '#3888fa',
+                  width: 2
+                },
+                areaStyle: {
+                  color: '#f3f8ff'
+                }
               }
-            }
+            },
+            data: expectedData,
+            animationDuration: 1000,
+            animationEasing: 'quadraticOut'
           },
-          smooth: true,
+          {
-          type: 'line',
+            name: 'actual',
-          data: expectedData,
+            smooth: true,
-          animationDuration: 2800,
+            type: 'line',
-          animationEasing: 'cubicInOut'
+            itemStyle: {
-        },
+              normal: {
-        {
-          name: 'actual',
-          smooth: true,
-          type: 'line',
-          itemStyle: {
-            normal: {
-              color: '#3888fa',
-              lineStyle: {
                 color: '#3888fa',
-                width: 2
+                lineStyle: {
-              },
+                  color: '#3888fa',
-              areaStyle: {
+                  width: 2
-                color: '#f3f8ff'
+                },
+                areaStyle: {
+                  color: '#f3f8ff'
+                }
               }
-            }
+            },
-          },
+            data: actualData,
-          data: actualData,
+            animationDuration: 1000,
-          animationDuration: 2800,
+            animationEasing: 'quadraticOut'
-          animationEasing: 'quadraticOut'
+          }
-        }]
+        ]
       })
     }
   }

src/views/dashboard/LineChart1.vue

@@ -0,0 +1,135 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    },
+    setOptions({ expectedData, actualData } = {}) {
+      this.chart.setOption({
+        xAxis: {
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          }
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          data: ['expected', 'actual']
+        },
+        series: [{
+          name: 'expected', itemStyle: {
+            normal: {
+              color: '#FF005A',
+              lineStyle: {
+                color: '#FF005A',
+                width: 2
+              }
+            }
+          },
+          smooth: true,
+          type: 'line',
+          data: expectedData,
+          animationDuration: 2800,
+          animationEasing: 'cubicInOut'
+        },
+        {
+          name: 'actual',
+          smooth: true,
+          type: 'line',
+          itemStyle: {
+            normal: {
+              color: '#3888fa',
+              lineStyle: {
+                color: '#3888fa',
+                width: 2
+              },
+              areaStyle: {
+                color: '#f3f8ff'
+              }
+            }
+          },
+          data: actualData,
+          animationDuration: 2800,
+          animationEasing: 'quadraticOut'
+        }]
+      })
+    }
+  }
+}
+</script>

src/views/index_v1.vue

@@ -8,9 +8,9 @@
     </el-row>
 
     <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="8">
+      <el-col :xs="24" :sm="24" :lg="16">
         <div class="chart-wrapper">
-          <raddar-chart />
+          <LineChart1 :chart-data="lineChartData"/>
         </div>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="8">
@@ -18,11 +18,6 @@
           <pie-chart />
         </div>
       </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <bar-chart />
-        </div>
-      </el-col>
     </el-row>
 
 
@@ -32,6 +27,7 @@
 <script>
 import PanelGroup from './dashboard/PanelGroup'
 import LineChart from './dashboard/LineChart'
+import LineChart1 from './dashboard/LineChart1'
 import RaddarChart from './dashboard/RaddarChart'
 import PieChart from './dashboard/PieChart'
 import BarChart from './dashboard/BarChart'
@@ -62,7 +58,8 @@ export default {
     LineChart,
     RaddarChart,
     PieChart,
-    BarChart
+    BarChart,
+    LineChart1
   },
   data() {
     return {

src/views/model/model.vue

@@ -551,7 +551,6 @@ export default {
       // '1732999987471716352',
       // '1732999849172930560',
 
-      // 1层
       // '1732999837521154048',
       // '1732999828495011840',
       // '1732999786233204736',