Browse Source

Merge branch 'vue_statistics_branch' of http://git.shengws.com/csx/Vue_New into vue_statistics_branch

csx 4 years ago
parent
commit
a3c45910c3
1 changed files with 178 additions and 7 deletions
  1. 178 7
      src/xt_pages/qcd/indicatorControlAnalysis/patientInspectionDetail.vue

+ 178 - 7
src/xt_pages/qcd/indicatorControlAnalysis/patientInspectionDetail.vue View File

104
           <div class="tableTitle">统计图</div>
104
           <div class="tableTitle">统计图</div>
105
           <div>
105
           <div>
106
             <!--<line-chart :options="options2"></line-chart>-->
106
             <!--<line-chart :options="options2"></line-chart>-->
107
-            <line-chart :options="options2"></line-chart>
107
+            <line-chart v-if="this.$route.query.range_type == 1" :options="options"></line-chart>
108
+            <line-chart v-if="this.$route.query.range_type == 2" :options="options2"></line-chart>
109
+
110
+
108
 
111
 
109
           </div>
112
           </div>
110
         </div>
113
         </div>
247
             }
250
             }
248
           ]
251
           ]
249
         },
252
         },
253
+        options: {
254
+          title: {
255
+            text: "ECharts 入门示例"
256
+          },
257
+          tooltip: {},
258
+          legend: {
259
+            data: [""],
260
+            left: 0
261
+          },
262
+          xAxis: {
263
+            data: [],
264
+            axisLabel: {
265
+              interval: 0,
266
+              formatter: function(value) {
267
+                var ret = ""; //拼接加\n返回的类目项
268
+                var maxLength = 4; //每项显示文字个数
269
+                var valLength = value.length; //X轴类目项的文字个数
270
+                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
271
+                if (rowN > 1) {
272
+                  //如果类目项的文字大于3,
273
+                  for (var i = 0; i < rowN; i++) {
274
+                    var temp = ""; //每次截取的字符串
275
+                    var start = i * maxLength; //开始截取的位置
276
+                    var end = start + maxLength; //结束截取的位置
277
+                    //这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧
278
+                    temp = value.substring(start, end) + "\n";
279
+                    ret += temp; //凭借最终的字符串
280
+                  }
281
+                  return ret;
282
+                } else {
283
+                  return value;
284
+                }
285
+              },
286
+            }
287
+          },
288
+          yAxis: {
289
+            axisLabel: {
290
+              formatter: "{value} %"
291
+            },
292
+            show: false
293
+          },
294
+          series: [
295
+            {
296
+              name: "",
297
+              type: "line",
298
+              data: [],
299
+              barWidth: 30,
300
+              label: {
301
+                normal: {
302
+                  show: true,
303
+                  position: "top",
304
+                  formatter: "{c}"
305
+                }
306
+              },
307
+              //配置样式
308
+              itemStyle: {
309
+                //通常情况下:
310
+
311
+                //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
312
+                normal: {
313
+                  color: function (params) {
314
+                    //我这边就两个柱子,大体就两个柱子颜色渐变,所以数组只有两个值,多个颜色就多个值
315
+                    var colorList = [
316
+                      ["#A9E0F3", "#9FBDFC"],
317
+
318
+                      ["#FFD7C0", "#FF9994"]
319
+                    ];
320
+
321
+                    var index = params.dataIndex;
322
+                    if (params.dataIndex >= colorList.length) {
323
+                      index = params.dataIndex % colorList.length;
324
+                    }
325
+
326
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
327
+                      {offset: 0, color: colorList[index][0]},
328
+                      // { offset: 0.5, color: colorList[index][1] },
329
+                      {offset: 1, color: colorList[index][1]}
330
+                    ]);
331
+                  },
332
+                  lineStyle: {
333
+                    color: '#5B98FF' //改变折线颜色
334
+                  },
335
+                  barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
336
+                },
337
+
338
+                //鼠标悬停时:
339
+                emphasis: {
340
+                  shadowBlur: 10,
341
+                  shadowOffsetX: 0,
342
+                  shadowColor: "rgba(0, 0, 0, 0.5)"
343
+                }
344
+              }
345
+            },
346
+            {
347
+              name: "",
348
+              type: "line",
349
+              data: [],
350
+              barWidth: 30,
351
+              label: {
352
+                normal: {
353
+                  show: true,
354
+                  position: "top",
355
+                  formatter: "{c}"
356
+                }
357
+              },
358
+              //配置样式
359
+              itemStyle: {
360
+                //通常情况下:
361
+
362
+                //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
363
+                normal: {
364
+                  color: function (params) {
365
+                    //我这边就两个柱子,大体就两个柱子颜色渐变,所以数组只有两个值,多个颜色就多个值
366
+                    var colorList = [
367
+                      ["#A9E0F3", "#9FBDFC"],
368
+
369
+                      ["#FFD7C0", "#FF9994"]
370
+                    ];
371
+
372
+                    var index = params.dataIndex;
373
+                    if (params.dataIndex >= colorList.length) {
374
+                      index = params.dataIndex % colorList.length;
375
+                    }
376
+
377
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
378
+                      {offset: 0, color: colorList[index][0]},
379
+                      // { offset: 0.5, color: colorList[index][1] },
380
+                      {offset: 1, color: colorList[index][1]}
381
+                    ]);
382
+                  },
383
+                  lineStyle: {
384
+                    color: '#f56c6c' //改变折线颜色
385
+                  },
386
+                  barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
387
+                },
388
+
389
+                //鼠标悬停时:
390
+                emphasis: {
391
+                  shadowBlur: 10,
392
+                  shadowOffsetX: 0,
393
+                  shadowColor: "rgba(0, 0, 0, 0.5)"
394
+                }
395
+              }
396
+            }
397
+
398
+          ],
399
+          dataZoom: [
400
+            {
401
+              //Y轴固定,让内容滚动
402
+              type: "slider",
403
+              show: false,
404
+              xAxisIndex: [0],
405
+              start: 1,
406
+              end: 20, //设置X轴刻度之间的间隔(根据数据量来调整)
407
+              zoomLock: true //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
408
+            },
409
+            {
410
+              type: "inside",
411
+              xAxisIndex: [0],
412
+              start: 1,
413
+              end: 20,
414
+              zoomLock: true //锁定区域禁止缩放
415
+            }
416
+          ],
417
+        },
250
         query: {
418
         query: {
251
           patient_id: this.$route.query.patient_id,
419
           patient_id: this.$route.query.patient_id,
252
           start_time: '',
420
           start_time: '',
415
         }
583
         }
416
       },
584
       },
417
       GetPatientInspectionIndexChart(params) {
585
       GetPatientInspectionIndexChart(params) {
586
+        this.options.xAxis.data = []
587
+        this.options.series[0].data = []
588
+
418
         this.options2.xAxis.data = []
589
         this.options2.xAxis.data = []
419
         this.options2.series[0].data = []
590
         this.options2.series[0].data = []
420
         GetPatientInspectionIndexChart(params)
591
         GetPatientInspectionIndexChart(params)
426
               let otherData = []
597
               let otherData = []
427
 
598
 
428
               for (let i = 0; i < resp.data.data.length; i++) {
599
               for (let i = 0; i < resp.data.data.length; i++) {
429
-                this.options2.xAxis.data.push(resp.data.data[i].date)
430
-
431
-                if (this.query.range_type == 1) {
432
-                  this.options2.series[0].data.push(resp.data.data[i].value)
433
-                } else {
434
-                  this.options2.series[0].data.push('1')
600
+                if (this.$route.query.range_type == 1) {
601
+                  this.options.xAxis.data.push(resp.data.data[i].date)
602
+                  this.options.series[0].data.push(resp.data.data[i].value)
603
+                }else{
604
+                  this.options2.series[0].data.push("1")
605
+                  this.options2.xAxis.data.push(resp.data.data[i].date)
435
                   tempData.push(resp.data.data[i].value)
606
                   tempData.push(resp.data.data[i].value)
436
                   otherData.push(resp.data.data[i].value)
607
                   otherData.push(resp.data.data[i].value)
437
                 }
608
                 }