瀏覽代碼

图表的x轴还是得单独在option里格式化一次 不然不准确

Karsa 1 年之前
父節點
當前提交
b465561b08

+ 31 - 10
src/views/dataEntry_manage/mixins/chartPublic.js

@@ -580,14 +580,28 @@ export const chartSetMixin = {
         data.push(obj);
         ydata.push(yItem);
       });
-
-      this.xLabelDealHandle();
+      
+      /* x轴处理 */
+      let isLessThanOneYear = this.xLabelDealHandle();
+      let xAxis = {
+        ...defaultOpts.xAxis,
+        labels: {
+          formatter: function (ctx) {
+            return isLessThanOneYear
+              ? Highcharts.dateFormat('%m/%d', ctx.value)
+              : Highcharts.dateFormat('%y/%m', ctx.value);
+          },
+        }
+      }
 
       this.options = {
         series: data,
         yAxis: ydata,
+        xAxis
       };
 
+      console.log(this.options)
+
       //滚动相关性独立tooltip
       if(this.chartInfo.Source === 4) {
         const { LeadValue,LeadUnit } = this.relevanceChartData.CorrelationChartInfo;
@@ -738,12 +752,23 @@ export const chartSetMixin = {
         data.push(obj);
         ydata.push(yItem);
       });
-
-      this.xLabelDealHandle();
+      
+      let isLessThanOneYear = this.xLabelDealHandle();
+      let xAxis = {
+        ...defaultOpts.xAxis,
+        labels: {
+          formatter: function (ctx) {
+            return isLessThanOneYear
+              ? Highcharts.dateFormat('%m/%d', ctx.value)
+              : Highcharts.dateFormat('%y/%m', ctx.value);
+          },
+        }
+      }
       
       this.options = {
         series: data,
         yAxis: ydata,
+        xAxis,
       };
       if(this.currentLang=='en') this.changeOptions()
     },
@@ -1766,13 +1791,9 @@ export const chartSetMixin = {
 			);
 			// console.log(year_differ)
 			if ([5, 6].includes(this.year_select) && year_differ <= 1) {
-				defaultOpts.xAxis.labels = {
-					formatter: function () {
-						return Highcharts.dateFormat('%m/%d', this.value);
-					},
-				};
+        return true
 			} else {
-				defaultOpts.xAxis.labels = {};
+        return false;
 			}
 		},
 

+ 30 - 21
src/views/ppt_manage/mixins/mixins.js

@@ -178,12 +178,23 @@ export default {
         ydata.push(yItem);
       });
 
-      // 范围为1年内 x轴显示为月/日 否则默认年/月
-      this.xTimeDiffer();
+      /* x轴处理 */
+      let isLessThanOneYear = this.xTimeDiffer();
+      let xAxis = {
+        ...defaultOpts.xAxis,
+        labels: {
+          formatter: function (ctx) {
+            return isLessThanOneYear
+              ? Highcharts.dateFormat('%m/%d', ctx.value)
+              : Highcharts.dateFormat('%y/%m', ctx.value);
+          },
+        }
+      }
 
       this.options = {
         series: data,
-        yAxis: ydata
+        yAxis: ydata,
+        xAxis
       };
 
        //滚动相关性独立tooltip
@@ -321,12 +332,23 @@ export default {
         ydata.push(yItem);
       });
 
-      // 范围为1年内 x轴显示为月/日 否则默认年/月
-      this.xTimeDiffer()
+       /* x轴处理 */
+       let isLessThanOneYear = this.xTimeDiffer();
+       let xAxis = {
+         ...defaultOpts.xAxis,
+         labels: {
+           formatter: function (ctx) {
+             return isLessThanOneYear
+               ? Highcharts.dateFormat('%m/%d', ctx.value)
+               : Highcharts.dateFormat('%y/%m', ctx.value);
+           },
+         }
+       }
 
       this.options = {
         series: data,
-        yAxis: ydata
+        yAxis: ydata,
+        xAxis
       };
     },
 
@@ -1325,22 +1347,9 @@ export default {
       );
       // console.log(year_differ)
       if ([5, 6].includes(this.chartInfo.DateType) && year_differ <= 1) {
-        // return true;
-        defaultOpts.xAxis.labels = {
-					formatter: function () {
-						return Highcharts.dateFormat('%m/%d', this.value);
-					},
-          style: {
-            fontSize: '10px',
-          },
-				};
+        return true;
       } else {
-        // return false;
-        defaultOpts.xAxis.labels = {
-          style: {
-            fontSize: '10px',
-          },
-        };
+        return false;
       }
     },
 

+ 0 - 295
src/views/predictEdb_manage/components/childChart.vue

@@ -1,295 +0,0 @@
-<template>
-  <div>
-    <div class="header">
-				<el-button
-					type="primary"
-					v-for="item in yearSelector"
-					:key="item.value"
-					size="medium"
-					:plain="item.value !== year_select"
-					class="year-btn"
-					@click.native="changeYear(item)"
-					>{{ item.name }}</el-button
-				>
-				<el-button type="text" class="btn-sty" @click="openDateDia">{{
-					dateTip
-				}}</el-button>
-    </div>
-    <div class="min-wrapper">
-      <div class="chartWrapper">
-        <Chart :options="options" ref="chartRef" height="500px" @clickYAxisTitle="changeEnOptions"/>
-        <div class="author">添加人:{{edbInfo.SysUserRealName}}</div>
-      </div>
-    </div>
-
-    <!-- 自定义时间段选择弹窗 -->
-		<DateChooseDia
-			:isDateDia="isDateDia"
-			:dateForm="dateForm"
-			@cancel="isDateDia = false"
-			@dateBack="dataChangeBack"
-		/>
-  </div>
-</template>
-
-<script>
-import { yearSelector,defaultOpts,seasonOptions } from '@/utils/defaultOptions';
-import Chart from '@/views/dataEntry_manage/components/chart.vue';
-import DateChooseDia from '@/views/dataEntry_manage/components/DateChooseDia';
-import Highcharts from 'highcharts'
-import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
-import { dataBaseInterface } from '@/api/api.js';
-export default {
-  props: {
-    id: Number,
-    lang: String
-  },
-  watch: {
-    id(newval) {
-      this.initStatus();
-      this.getChartDetailHandle()
-    },
-    lang(newval) {
-      this.$emit('updateTit',{edb_name: newval === 'ch' ? this.edbInfo.EdbName : this.edbInfo.EdbNameEn,userid: this.edbInfo.SysUserId})
-      this.setOptions();
-    }
-  },
-  components: { Chart,DateChooseDia },
-  data() {
-    return {
-      year_select: 10, //年份选择项 默认全部
-      yearSelector: [
-				{
-					name: '全部',
-					value: 10,
-				},
-				...yearSelector,
-			],
-			select_date: [], // 自定义时间段项
-
-      options: {},
-			showChart: false,
-			edbInfo: {},
-			dataList: [],
-			leftIndex: 0,
-
-			/* 日期弹窗 */
-      isDateDia: false, // 时间段弹窗
-      dateForm: {},
-      dateTip: '请选择时间段',
-    }
-  },
-  methods: {
-    /* 获取图表数据 */
-		getChartDetailHandle(type='') {
-			preDictEdbInterface.edbChartInfo({
-				EdbInfoId: this.id,
-        DateType: this.year_select,
-				StartDate: this.select_date[0] || '',
-				EndDate: this.select_date[1] || ''
-			}).then(res => {
-				if(res.Ret !== 200) return
-
-        const { DataList,EdbInfo } = res.Data;
-				this.edbInfo = EdbInfo;
-        this.dataList = DataList;
-        
-        this.setOptions();
-        this.$emit('updateTit',{edb_name: this.lang === 'ch' ? EdbInfo.EdbName : EdbInfo.EdbNameEn,userid: EdbInfo.SysUserId})
-        
-        //更新图片
-        if(type==='updateImg' || !EdbInfo.ChartImage) {
-          this.$nextTick(() => {
-            this.setChartImage()
-          })
-        }
-			})
-		},
-
-    /* 关联图片 */
-    setChartImage() {
-      let svg = this.$refs.chartRef.chart.getSVG({
-        chart:{
-        width: 340,
-        height: 230,
-        }
-      });
-      let form = new FormData();
-      form.append('Img', svg);
-      this.setImageHandle(form);
-    },
-
-    async setImageHandle(form) {
-      let { Data } = await dataBaseInterface.uploadImgSvg(form);
-      await preDictEdbInterface.setImg({
-        EdbInfoId: this.id,
-        ImageUrl: Data.ResourceUrl,
-      });
-    },
-
-     /* 年份改变 重新刷新图表接口  保存当前的图表配置和上下限 只改变图表 */
-    changeYear(item) {
-      this.year_select = item.value;
-      this.select_date = [];
-      this.dateTip = '请选择时间段';
-
-      this.getChartDetailHandle();
-    },
-
-    /* 保存完自定义日期 刷新数据 保存当前的图表配置和上下限 只改变图表*/
-    dataChangeBack(data) {
-      this.year_select = data.dateType;
-      this.isDateDia = false;
-      this.select_date = [data.start_date, data.end_date];
-
-      this.dateTip =
-        data.dateType === 5
-          ? `${data.start_date}~${data.end_date}`
-          : `${data.start_date}~至今`;
-
-      this.getChartDetailHandle();
-    },
-
-    /* 打开时间段弹窗 */
-    openDateDia() {
-      // 自定义时间段回显
-      this.dateForm = {
-        date_type: this.year_select,
-        start_date:
-          this.year_select === 5 || this.year_select === 6
-            ? this.select_date[0]
-            : '',
-        end_date: this.year_select === 5 ? this.select_date[1] : '',
-      };
-      this.isDateDia = true;
-    },
-
-    /* 重置状态 */
-    initStatus() {
-			this.year_select = 10;
-			this.select_date = [];
-			this.options = {};
-			this.dateTip = '请选择时间段';
-		},
-
-    	/* 查询范围为1年内 x轴显示为月/日 否则默认年/月 */
-		xLabelDealHandle() {
-			const end =
-				this.year_select === 5
-					? this.select_date[1]
-					: this.year_select === 6
-					? new Date()
-					: '';
-			const year_differ = this.$moment(end).diff(
-				this.$moment(this.select_date[0]),
-				'years',
-				true
-			);
-			// console.log(year_differ)
-			if ([5, 6].includes(this.year_select) && year_differ <= 1) {
-				defaultOpts.xAxis.labels = {
-					formatter: function () {
-						return Highcharts.dateFormat('%m/%d', this.value);
-					},
-				};
-			} else {
-				defaultOpts.xAxis.labels = {};
-			}
-		},
-
-    /* 一个指标曲线图配置  写死配置*/
-    setOptions() {
-      const chartData = _.cloneDeep(this.dataList);
-
-      //拼接标题 数据列
-      let data = [],
-        ydata = [];
-
-      const { Unit,MinValue,MaxValue,EdbName,LatestDate,UnitEn,EdbNameEn } = this.edbInfo;
-
-      //y轴
-      let yItem = {
-        ...seasonOptions.yAxis,
-        title: {
-          text: this.lang === 'ch' ? Unit : (UnitEn || '无英文单位'),
-          align: 'high',
-          rotation: 0,
-          y: -15,
-          textAlign:'left',
-          reserveSpace: false
-        },
-        labels: {
-          formatter: function (ctx) {
-            return ctx.value;
-          },
-          align: 'center',
-          x: -5
-        },
-        min: Number(MinValue),
-        max: Number(MaxValue),
-        tickWidth: 1,
-      };
-        
-      //数据列
-      let obj = {
-        data: [],
-        type: 'spline',
-        yAxis: 0,
-        name: this.lang === 'ch' ? EdbName : (EdbNameEn || '无英文名称'),
-        lineWidth: 3,
-        zoneAxis: 'x',
-        zones: [{
-          value: new Date(LatestDate).getTime()+1
-        }, {
-          dashStyle: 'ShortDot',
-          color: '#f00'
-        }]
-      };
-      chartData.forEach(item => {
-        obj.data.push([item.DataTimestamp, item.Value]);
-      });
-		
-      data.push(obj);
-      ydata.push(yItem);
-
-      this.xLabelDealHandle();
-      this.options = {
-        series: data,
-        yAxis: ydata,
-      };
-    },
-
-    changeEnOptions() {
-      this.$emit('openEnNameDia',this.edbInfo)
-    }
-  },
-  mounted() {
-    this.initStatus();
-    this.id && this.getChartDetailHandle()
-  },
-}
-</script>
-<style scoped lang='scss'>
-.header {
-  position: relative;
-  padding-right: 70px;
-  .year-btn {
-    min-width: 90px;
-    font-size: 14px;
-    margin-right: 5px;
-    margin-bottom: 5px;
-  }
-  .btn-sty {
-    font-size: 16px;
-    padding: 9px;
-    border: 1px solid #409eff;
-  }
-}
-.min-wrapper {
-  margin-top: 30px;
-  .author {
-    margin-top: 10px;
-    text-align: right;
-  }
-}
-</style>

+ 0 - 2
src/views/predictEdb_manage/predictEdb.vue

@@ -481,7 +481,6 @@ import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
 import { dataBaseInterface } from '@/api/api.js';
 import leftMixin from './mixins/mixin';
 import edbDialog from './components/edbDia.vue'
-import childChart from './components/childChart.vue'
 import childData from './components/childData.vue'
 import edbDetail from './components/edbDetail.vue'
 import edbClassifyDia from './components/classifyDia.vue'
@@ -503,7 +502,6 @@ export default {
 	name:'',
 	components: { 
 		edbDialog,
-		childChart,
 		childData,
 		edbClassifyDia,
 		changeLang,