修改

src/xt_pages/qcd/components/LineChart1.vue

@@ -0,0 +1,262 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import { debounce } from "@/utils";
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: "chart"
+    },
+    width: {
+      type: String,
+      default: "100%"
+    },
+    height: {
+      type: String,
+      default: "230px"
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object
+    },
+    title: {
+      type: String,
+      default: "chart"
+    },
+    options: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      chartOptions: {
+        xAxis: [],
+        legend: [],
+        series: []
+      }
+    };
+  },
+  mounted() {
+    this.initChart();
+    if (this.autoResize) {
+      this.__resizeHanlder = debounce(() => {
+        if (this.chart) {
+          this.chart.resize();
+        }
+      }, 100);
+      window.addEventListener("resize", this.__resizeHanlder);
+    }
+
+    // 监听侧边栏的变化
+    const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
+    sidebarElm.addEventListener("transitionend", this.__resizeHanlder);
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    if (this.autoResize) {
+      window.removeEventListener("resize", this.__resizeHanlder);
+    }
+
+    const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
+    sidebarElm.removeEventListener("transitionend", this.__resizeHanlder);
+
+    this.chart.dispose();
+    this.chart = null;
+  },
+  watch: {
+    // options: function(a) {
+    //   console.log(a)
+    //   this.chartOptions = this.options;
+    //   this.initChart();
+    //   this.__resizeHanlder = debounce(() => {
+    //     if (this.chart) {
+    //       this.chart.resize();
+    //     }
+    //   }, 100);
+    //   window.addEventListener("resize", this.__resizeHanlder);
+    // },
+    options:{
+      handler(newValue,oldValue){
+        this.getInitChart();
+      },
+      deep:true
+    },
+
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
+      }
+    }
+  },
+  created() {
+    this.chartOptions = this.options;
+    // console.log("this.chartOptions", this.chartOptions, this.options);
+  },
+  methods: {
+    getInitChart() {
+      this.chartOptions = this.options;
+      this.initChart();
+      this.__resizeHanlder = debounce(() => {
+        if (this.chart) {
+          this.chart.resize();
+        }
+      }, 100);
+      window.addEventListener("resize", this.__resizeHanlder);
+    },
+    // setOptions({ expectedData, actualData } = {}) {
+    //   this.chart.setOption({
+    //     title: {
+    //         text: this.title,
+    //     },
+    //     xAxis: {
+    //       data: this.chartOptions.xAxis,
+    //       boundaryGap: false,
+    //       axisTick: {
+    //         show: false
+    //       }
+    //     },
+    //     grid: {
+    //       left: 50,
+    //       right: 50,
+    //       bottom: 20,
+    //       top: 30,
+    //       containLabel: true
+    //     },
+    //     tooltip: {
+    //       trigger: 'axis',
+    //       axisPointer: {
+    //         type: 'cross'
+    //       },
+    //       padding: [5, 10]
+    //     },
+    //     yAxis: {
+    //       axisTick: {
+    //         show: false
+    //       }
+    //     },
+    //     legend: {
+    //       data: this.chartOptions.legend,
+    //     },
+    //     series: this.chartOptions.series,
+    //   })
+    // },
+    setOptions({ expectedData, actualData } = {}) {
+      this.chart.setOption({
+        // title: {
+        //   text: this.title
+        // },
+        xAxis: {
+          data: this.chartOptions.xAxis.data,
+          // boundaryGap: false
+          axisTick: {
+            show: true
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#E5E5E5" //x轴颜色
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            formatter: function(value) {
+              var ret = ""; //拼接加\n返回的类目项
+              var maxLength = 10; //每项显示文字个数
+              var valLength = value.length; //X轴类目项的文字个数
+              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowN > 1) {
+                //如果类目项的文字大于3,
+                for (var i = 0; i < rowN; i++) {
+                  var temp = ""; //每次截取的字符串
+                  var start = i * maxLength; //开始截取的位置
+                  var end = start + maxLength; //结束截取的位置
+                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
+                  temp = value.substring(start, end) + "\n";
+                  ret += temp; //凭借最终的字符串
+                }
+                return ret;
+              } else {
+                return value;
+              }
+            },
+            textStyle: {
+              color:"#2F3133"
+            }
+          }
+        },
+        grid: {
+          left: 0,
+          right: 50,
+          bottom: 10,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross"
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: true
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#E5E5E5" //y轴颜色
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color:"#2F3133"
+            }
+          },
+          max:2
+        },
+        // dataZoom: [
+        //   {
+        //     //Y轴固定,让内容滚动
+        //     type: "slider",
+        //     show: false,
+        //     xAxisIndex: [0],
+        //     start: 1,
+        //     end: 80, //设置X轴刻度之间的间隔(根据数据量来调整)
+        //     zoomLock: true //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
+        //   },
+        //   {
+        //     type: "inside",
+        //     xAxisIndex: [0],
+        //     start: 1,
+        //     end: 80,
+        //     zoomLock: true //锁定区域禁止缩放
+        //   }
+        // ],
+        legend: this.chartOptions.legend,
+        series: this.chartOptions.series,
+        dataZoom: this.chartOptions.dataZoom,
+      });
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el, "macarons");
+      this.chart.clear();
+      this.setOptions(this.chartData);
+    }
+  }
+};
+</script>

src/xt_pages/qcd/indicatorControlAnalysis/patientInspectionDetail.vue

@@ -101,7 +101,7 @@
           <div>
             <!--<line-chart :options="options2"></line-chart>-->
             <line-chart v-if="this.$route.query.range_type == 1" :options="options"></line-chart>
-            <line-chart v-if="this.$route.query.range_type == 2" :options="options2"></line-chart>
+            <line-chart1 v-if="this.$route.query.range_type == 2" :options="options2"></line-chart1>
 
 
 
@@ -118,6 +118,7 @@
   const moment = require('moment')
   import echarts from 'echarts'
   import LineChart from '../../qcd/components/LineChart'
+  import LineChart1 from '../../qcd/components/LineChart1'
   import { uParseTime } from '@/utils/tools'
   import BreadCrumb from '@/xt_pages/components/bread-crumb'
   import { getCurrentOrgPatients } from '@/api/common/common'
@@ -136,6 +137,7 @@
     name: 'dialysisTotal',
     components: {
       LineChart,
+      LineChart1,
       BreadCrumb
     },
     data() {
@@ -200,12 +202,19 @@
               name: '',
               type: 'line',
               data: [],
+              symbol: 'circle',//折线点设置为实心点
+              symbolSize: 15,   //折线点的大小
               barWidth: 30,
               label: {
                 normal: {
                   show: true,
-                  position: 'top',
-                  formatter: '{c}'
+                  position: "top",
+                  formatter: (params) => {
+                      let str = ''
+                      str = this.otherData[params.dataIndex]
+                      return str
+
+                  }
                 }
               },
               //配置样式
@@ -214,24 +223,33 @@
 
                 //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                 normal: {
-                  color: function(params) {
+                  color: (params) => {
                     //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
-                    var colorList = [
-                      ['#A9E0F3', '#9FBDFC'],
-
-                      ['#FFD7C0', '#FF9994']
-                    ]
-
-                    var index = params.dataIndex
-                    if (params.dataIndex >= colorList.length) {
-                      index = params.dataIndex % colorList.length
-                    }
-
-                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                      { offset: 0, color: colorList[index][0] },
-                      // { offset: 0.5, color: colorList[index][1] },
-                      { offset: 1, color: colorList[index][1] }
-                    ])
+                    var colorList = [
+                      ['#409EFF','#409EFF'],
+                      ['#f56c6c','#f56c6c']
+                      ];
+                    if(params.seriesName == this.otherData[params.dataIndex]){
+                      var index = 0 
+                    }else {
+                      var index = 1
+                    }
+                   
+
+                    // var index = params.dataIndex;
+                    // if (params.dataIndex >= colorList.length) {
+                    //   index = params.dataIndex % colorList.length;
+                    // }
+
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      {offset: 0, color: colorList[index][0]},
+                      // { offset: 0.5, color: colorList[index][1] },
+                      {offset: 1, color: colorList[index][1]}
+                    ]);
+                  },
+                  lineStyle: {
+                    width:2,
+                    color: "#cccccc"//折线的颜色
                   },
                   barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
                 },
@@ -449,7 +467,8 @@
           { value: 4, label: '近一年', state: 4 },
           { value: 5, label: '自定义', state: 5 }
         ],
-        search_value: ''
+        search_value: '',
+        otherData:[]
       }
     },
     methods: {
@@ -599,9 +618,15 @@
                   this.options2.xAxis.data.push(resp.data.data[i].date)
                   tempData.push(resp.data.data[i].value)
                   otherData.push(resp.data.data[i].value)
+                  this.options2.series[0].name = resp.data.references.range_value
                 }
               }
-
+              this.otherData = otherData
+              if(this.$route.query.range_type == 1){
+                this.getArrLength(this.options.xAxis.data,1)
+              }else{
+                this.getArrLength(this.options2.xAxis.data,this.$route.query.range_type)
+              }
               console.log(this.options.xAxis.data)
 
               console.log(this.options.series[0].data)
@@ -641,6 +666,26 @@
       }, getTimestamp(time) {
         // 把时间日期转成时间戳
         return new Date(time).getTime() / 1000
+      },
+      getArrLength(result,type){
+        if(type == 1){
+          if(result.length > 10){
+            var dataZoom_end = (10/result.length)*100;
+            this.options.dataZoom[0].end = dataZoom_end
+          }else{
+            var dataZoom_end = 100;
+            this.options.dataZoom[0].end = dataZoom_end
+          }
+        }else{
+          if(result.length > 10){
+            var dataZoom_end = (10/result.length)*100;
+            this.options2.dataZoom[0].end = dataZoom_end
+          }else{
+            var dataZoom_end = 100;
+            this.options2.dataZoom[0].end = dataZoom_end
+          }
+        }
+
       }
 
     },