fea（化验室槽液检测参数趋势图）：功能联调

src/router/modules/laboratory.js

@@ -25,9 +25,9 @@ export default {
         },
         {
             path: 'trendchartOfTankParameters',
-            component: () => import('@/views/Laboratory/Pretreatment/trendchartOfTankParameters'),
+            component: () => import('@/views/Laboratory/trendchartOfTankParameters/list'),
             name: 'TrendchartOfTankParameters',
-            meta: { title: 'TrendchartOfTankParameters', icon: 'template', noCache: false, mark: '/laboratory/pretreatment/trendchartOfTankParameters' }
+            meta: { title: 'TrendchartOfTankParameters', icon: 'template', noCache: false, mark: '/laboratory/trendchartOfTankParameters/list' }
         }
     ]
 }

src/views/Laboratory/Pretreatment/components/ChartsLine.vue → src/views/Laboratory/TrendchartOfTankParameters/components/ChartsLine.vue

 <template>
     <div class="chart-pack">
-        <div :id="sendData.id" class="chart">
+        <div :id="propsId" class="chart">
         </div>
     </div>
 </template>
@@ -10,27 +10,38 @@ import Echarts from 'echarts'
 export default {
     props: {
         sendData: {
-            type: Object,
+            type: Array,
             default: () =>  {
-                return {}
-            }
+                return []
             }
         },
-    data () {
-        return {
-            sampleCharts: ''
+        timesArrList: {
+            type: Array,
+            default: () => {
+                return []
             }
         },
-    watch: {
-        sendData: {
-            handler (newVal, oldVal) {
-                this.renderEcharts();
+        propsId: {
+            type: Number,
+            default: () => {
+                return null
+            }
+        }
     },
-            deep: true
+    data () {
+        return {
+            // 图表Y轴数据
+            chartsYdata:[],
+            // 下限值
+            rangeLower: null,
+            // 上限值
+            rangeUpper: null,
+            // Y轴名字
+            nameY: null
         }
     },
     mounted () {
-        if (this.sendData.hasOwnProperty('id')) {
+        if (this.sendData.length > 0 && this.propsId !== null) {
             this.$nextTick(() => {
                 this.renderEcharts();
             })
@@ -38,17 +49,20 @@ export default {
     },
     methods: {
         renderEcharts () {
-            let domItem = document.getElementById(`${this.sendData.id}`);
-            this.sampleCharts = Echarts.init(domItem);
-            let data = this.sendData.value;
-            let top = this.sendData.top;
-            let down = this.sendData.down;
-            // this.sampleCharts.clear();
-            // echarts.dispose(domItem)
-            // let echart = echarts.init(domItem)
+            // 数据解析
+            for (let item of this.sendData) {
+                this.chartsYdata.push(item.checkResult)
+                this.rangeLower = item.rangeLower
+                this.rangeUpper = item.rangeUpper
+                this.nameY = item.name
+            };
+            let domItem = document.getElementById(`${this.propsId}`);
+            // 清空div中的内容和结构
+            domItem.innerHTML = '';
+            let sampleCharts = Echarts.init(domItem);
             var charts = {
                 // unit: '户数',
-                names: ['进给轴倍率', '主轴负载']
+                // names: ['进给轴倍率', '主轴负载']
                 // lineX:new Date(this.createTime).getTime(),
             };
             let opt = {
@@ -65,7 +79,7 @@ export default {
                     // name: '日期',
                     type: 'category',
                     boundaryGap: false,
-                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+                    data: this.timesArrList,
                     nameTextStyle: {
                         // fontWeight: 'bold',
                         fontSize: 18,
@@ -73,8 +87,8 @@ export default {
                     }
                 },
                 yAxis: {
+                    name: this.nameY,
                     type: 'value',
-                    name: this.sendData.argumentName,
                     nameTextStyle: {
                         // fontWeight: 'bold',
                         fontSize: 16,
@@ -83,13 +97,13 @@ export default {
                 },
                 series: [
                     {
-                        name: '邮件营销',
+                        name: this.nameY,
                         type: 'line',
                         lineStyle: {
                             color: '#8cd2ff'
                         },
                         stack: '总量',
-                        data: data,
+                        data: this.chartsYdata,
                         markLine: {
                             label: {
                                 show: true,
@@ -107,17 +121,17 @@ export default {
                             silent: true,
                             data: [
                                 {
-                                    yAxis: top
+                                    yAxis: this.rangeUpper
                                 },
                                 {
-                                    yAxis: down
+                                    yAxis: this.rangeLower
                                 }
                             ]
                         }
                     }
                 ]
             };
-            this.sampleCharts.setOption(opt);
+            sampleCharts.setOption(opt, true);
         }
     }
 }