commit

src/views/hzyb/chart/Detail.vue

@@ -15,6 +15,7 @@ document.title='图表详情'
 
 localStorage.setItem('hzyb-token',route.query.token)
 
+// 散点x轴
 const scatterXAxis = {
     tickPosition: 'inside',
     lineColor: '#bfbfbf',
@@ -24,6 +25,40 @@ const scatterXAxis = {
     type: 'linear',
 }
 
+// 基础y轴配置
+const basicYAxis = {
+    tickWidth: 1,
+    tickLength: 5,
+    lineWidth: 1,
+    lineColor: '#bfbfbf',
+    tickColor: '#bfbfbf',
+    offset: 0,
+    visible: true,
+    gridLineWidth: 0,
+    tickPosition: 'inside',
+    endOnTick: false,
+    startOnTick: false,
+    showLastLabel: true,
+    tickPixelInterval: 50,
+}
+
+//基础x轴配置
+const basicXAxis={
+    tickPosition: 'inside',
+    lineColor: '#bfbfbf',
+    tickColor: '#bfbfbf',
+    tickLength:5,
+    type: 'datetime',
+    ordinal: false,
+    dateTimeLabelFormats: {
+        day: '%y/%m',
+        week: '%y/%m',
+        month: '%y/%m',
+        year: '%y/%m',
+    },
+    xDateFormat:'%Y-%m-%d'
+}
+
 
 // 获取用户信息
 import {apiUserInfo} from '@/api/hzyb/user'
@@ -272,25 +307,11 @@ const handleCloseLimit=()=>{//点击遮罩层关闭弹窗或者点击取消关
 }
 
 
-// 设置常规图配置 曲线 散点 面积 柱状等
+// 设置常规图配置 曲线
 const setSplineOpt=(data)=>{
     let series=[]
-    let xAxis={
-        tickPosition: 'inside',
-		lineColor: '#bfbfbf',
-    	tickColor: '#bfbfbf',
-		tickLength:5,
-		type: 'datetime',
-		ordinal: false,
-		dateTimeLabelFormats: {
-			day: '%y/%m',
-			week: '%y/%m',
-			month: '%y/%m',
-			year: '%y/%m',
-		},
-        xDateFormat:'%Y-%m-%d'
-    }
     let yAxis=[]
+    let xAxis = {}
 
     let temYLeftArr=[]
     let temYRightArr=[]
@@ -299,62 +320,24 @@ const setSplineOpt=(data)=>{
 
     let minAndMaxTimeTemArr=[]//存放所有指标的最大最小时间
 
-    /* 支持图的类型 */
-    const chartTypeMap = {
-        1: 'spline',
-        3: 'areaspline',
-        4: 'column',
-    };
-    let chartStyle = chartTypeMap[resData.value.ChartInfo.ChartType];
-
     data.forEach((item,index)=>{
         let dynamic_title = item.EdbName;
         let dynamic_arr = data.filter(
           (item) => dynamic_title === item.EdbName
         );
-        // 拼接配置  IsAxis左轴1 右轴0 IsOrder正序false 逆序true EdbInfoType是否是领先指标
-        let dynamic_tag =item.IsAxis && item.IsOrder && item.EdbInfoType
-            ? '(逆序)'
-            : !item.IsAxis && item.IsOrder && item.EdbInfoType
-            ? '(右轴，逆序)'
-            : !item.IsAxis && !item.IsOrder && item.EdbInfoType
-            ? '(右轴)'
-            : !item.IsAxis && !item.IsOrder && !item.EdbInfoType
-            ? `(右轴，领先${item.LeadValue}${item.LeadUnit})`
-            : !item.IsAxis && item.IsOrder && !item.EdbInfoType
-            ? `(右轴，逆序，领先${item.LeadValue}${item.LeadUnit})`
-            : item.IsAxis && item.IsOrder && !item.EdbInfoType
-            ? `(逆序，领先${item.LeadValue}${item.LeadUnit})`
-            : item.IsAxis && !item.IsOrder && !item.EdbInfoType
-            ? `(领先${item.LeadValue}${item.LeadUnit})`
-            : '';
-        let temName=dynamic_arr.length > 1
-                    ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
-                    : `${item.EdbName}${dynamic_tag}`
-                    console.log(temName.length/20);
-        if(temName.length>20){
-            let temArr=[]
-            for(let i=0;i<temName.length/20;i++){
-                temArr.push(temName.slice(i*20,i*20+20))
-            }
-            // console.log(temArr);
-            temName=temArr.join('<br>')
-        }
+        //处理数据列name
+        let temName= setDyncmicSerieName(item,dynamic_arr)  
+
         let seriesItemObj={
             data:[],
             dataGrouping:{
                 enabled:false
             },
-            type: resData.value.ChartInfo.ChartType ===6 ? item.ChartStyle : chartStyle,
+            type: 'spline',
             yAxis:index,
-            // name:dynamic_arr.length > 1
-            //   ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
-            //   : `${item.EdbName}${dynamic_tag}`,//拼接标题 判断相同指标名称拼接来源
             name:temName,
             color: item.ChartColor,
-            // lineWidth: Number(item.ChartWidth),
-            lineWidth: (resData.value.ChartInfo.ChartType === 1 || (resData.value.ChartInfo.ChartType === 6 && item.ChartStyle === 'spline')) ? Number(item.ChartWidth) : 0,
-            fillColor: (resData.value.ChartInfo.ChartType === 3 || (resData.value.ChartInfo.ChartType === 6 && item.ChartStyle === 'areaspline')) ? item.ChartColor : undefined,
+            lineWidth: Number(item.ChartWidth),
             visible:true,
             LatestDate:item.LatestDate,
             LatestValue:item.LatestValue
@@ -374,6 +357,7 @@ const setSplineOpt=(data)=>{
         }
 
         let yItem={
+            ...basicYAxis,
             IsAxis:item.IsAxis,
             labels: {
                 formatter: function (ctx) {
@@ -393,19 +377,6 @@ const setSplineOpt=(data)=>{
             reversed: item.IsOrder,
             min: item.MinData,
             max: item.MaxData,
-            tickWidth: 1,
-            tickLength: 5,
-            lineWidth: 1,
-            lineColor: '#bfbfbf',
-            tickColor: '#bfbfbf',
-            offset: 0,
-            visible: true,
-            gridLineWidth: 0,
-            tickPosition: 'inside',
-            endOnTick: false,
-            startOnTick: false,
-            showLastLabel: true,
-            tickPixelInterval: 50,
             chartEdbInfo:item//指标数据用于在保存时读取指标数据
         }
         yAxis.push(yItem)
@@ -430,7 +401,7 @@ const setSplineOpt=(data)=>{
     const bool_time = xTimeDiffer(minTime,maxTime)
     if(bool_time){
         xAxis={
-            ...xAxis,
+            ...basicXAxis,
             labels: {
               formatter: (ctx)=> {
                 return Highcharts.dateFormat('%m/%d', ctx.value)
@@ -443,7 +414,7 @@ const setSplineOpt=(data)=>{
     // let minYear=new Date(minTime).getFullYear()
 
     xAxis={
-        ...xAxis,
+        ...basicXAxis,
         tickInterval:((maxTime-minTime)/6)/(24*3600*1000)>30?(maxTime-minTime)/6:24*3600*1000*30,
     }
     
@@ -480,6 +451,203 @@ const setSplineOpt=(data)=>{
 
 }
 
+/* 堆叠图/组合图设置  
+    本来和曲线图逻辑基本一致兼容下即可 为了以后便于维护和阅读还是拆开写吧
+*/
+const setStackOrCombinChart = data => {
+    //图表类型
+    const chartTypeMap = {
+        3: 'areaspline',
+        4: 'column',
+        6: ''
+    };
+    let chartStyle = chartTypeMap[this.chartInfo.ChartType];
+
+    let series=[]
+    let yAxis=[]
+    let xAxis = {}
+
+    let temYLeftArr=[]
+    let temYRightArr=[]
+    let temYLeftIndex,temYRightIndex;
+
+    let minAndMaxTimeTemArr=[]//存放所有指标的最大最小时间
+
+    data.forEach((item,index)=>{
+        //堆叠图的yAxis必须一致 数据列所对应的y轴
+        let serie_yIndex = index;
+        if([3,4].includes(resData.value.ChartInfo.ChartType)) {
+            // 类型为堆叠图时公用第一个指标y轴 
+            serie_yIndex =  0;
+        } else if(resData.value.ChartInfo.ChartType ===6 && ['areaspline','column'].includes(item.ChartStyle)) {
+            // 组合图找第一个堆叠柱状或面积的作为公用
+            serie_yIndex = data.findIndex(i => i.ChartStyle === item.ChartStyle);
+        }
+        //数据对应的y轴是公用轴则配置也共享
+        item.IsAxis = serie_yIndex === index ? item.IsAxis : data[serie_yIndex].IsAxis;
+        item.IsOrder = serie_yIndex === index ? item.IsOrder : data[serie_yIndex].IsOrder;
+
+        temYLeftIndex = [3,4].includes(resData.value.ChartInfo.ChartType) 
+            ? (data[serie_yIndex].IsAxis ? serie_yIndex : -1)
+            : data.findIndex((item) => item.IsAxis);
+        temYRightIndex = [3,4].includes(resData.value.ChartInfo.ChartType) 
+            ? (data[serie_yIndex].IsAxis ? -1 : serie_yIndex)
+            : data.findIndex((item) => !item.IsAxis);
+
+        let dynamic_title = item.EdbName;
+        let dynamic_arr = data.filter(
+          (item) => dynamic_title === item.EdbName
+        );
+        //处理数据列name
+        let temName= setDyncmicSerieName(item,dynamic_arr)  
+
+        let seriesItemObj={
+            data:[],
+            dataGrouping:{
+                enabled:false
+            },
+            type: chartStyle || item.ChartStyle,
+            yAxis:serie_yIndex,
+            name:temName,
+            color: item.ChartColor,
+            lineWidth: (resData.value.ChartInfo.ChartType === 6 && item.ChartStyle === 'spline') ? Number(item.ChartWidth) : 0,
+            fillColor: (resData.value.ChartInfo.ChartType === 3 || (resData.value.ChartInfo.ChartType === 6 && item.ChartStyle === 'areaspline')) ? item.ChartColor : undefined,
+            visible:true,
+            LatestDate:item.LatestDate,
+            LatestValue:item.LatestValue
+        }
+        item.DataList = item.DataList || [];
+        for (let i of item.DataList) {
+          seriesItemObj.data.push([i.DataTimestamp, i.Value]);
+        }
+        series.push(seriesItemObj)
+        
+
+        // 设置y轴
+        if(item.IsAxis){
+            temYLeftArr.push(item)
+        }else{
+            temYRightArr.push(item)
+        }
+
+        let yItem={
+            ...basicYAxis,
+            IsAxis:item.IsAxis,
+            labels: {
+                formatter: function (ctx) {
+                    return ctx.value;
+                },
+                align: 'center',
+                y:5,
+            },
+            // title: {
+            //     text:  `单位:${item.Unit}`,
+            //     align: 'high',
+            //     rotation: 0,
+            //     y: 0,
+            //     offset: -60,
+            // },
+            opposite: item.IsAxis === 0,
+            reversed: item.IsOrder,
+            min: item.MinData,
+            max: item.MaxData,
+            visible: serie_yIndex === index ? true : false,
+            chartEdbInfo:item//指标数据用于在保存时读取指标数据
+        }
+        yAxis.push(yItem)
+        
+        if(item.DataList.length>0){
+            minAndMaxTimeTemArr.push(item.DataList[0].DataTimestamp)
+            minAndMaxTimeTemArr.push(item.DataList[item.DataList.length-1].DataTimestamp)
+        }
+        
+    })
+
+    // 设置值
+    chartData.value.series=series
+    
+    
+    // 设置x轴
+    // 找出所有指标的最大和最小时间 分成6段
+    let minTime=Math.min.apply(null,minAndMaxTimeTemArr)
+    let maxTime=Math.max.apply(null,minAndMaxTimeTemArr)
+
+
+    const bool_time = xTimeDiffer(minTime,maxTime)
+    if(bool_time){
+        xAxis={
+            ...basicXAxis,
+            labels: {
+              formatter: (ctx)=> {
+                return Highcharts.dateFormat('%m/%d', ctx.value)
+              }
+            }
+        }
+    }
+    // console.log(((maxTime-minTime)/6)/(24*3600*1000),':天');
+    // let maxYear=new Date(maxTime).getFullYear()
+    // let minYear=new Date(minTime).getFullYear()
+
+    xAxis={
+        ...basicXAxis,
+        tickInterval:((maxTime-minTime)/6)/(24*3600*1000)>30?(maxTime-minTime)/6:24*3600*1000*30,
+    }
+    
+    chartData.value.xAxis=[xAxis]
+    
+
+    yAxis.forEach(item=>{
+        if(item.IsAxis){//左轴
+            hasLeftAxis.value=true
+            item.min=data[temYLeftIndex].MinData
+            item.max=data[temYLeftIndex].MaxData
+            axisLimitData.leftMin=data[temYLeftIndex].MinData
+            axisLimitData.leftMax=data[temYLeftIndex].MaxData
+        }else{
+            hasRightAxis.value=true
+            item.min=data[temYRightIndex].MinData
+            item.max=data[temYRightIndex].MaxData
+            axisLimitData.rightMin=data[temYRightIndex].MinData
+            axisLimitData.rightMax=data[temYRightIndex].MaxData
+        }
+    })
+    chartData.value.yAxis=yAxis
+    chartData.value.rangeSelector={ enabled: false}
+}
+
+/* 拼接数据列动态name */
+const setDyncmicSerieName = (item,dynamic_arr) => {
+    // 拼接配置  IsAxis左轴1 右轴0 IsOrder正序false 逆序true EdbInfoType是否是领先指标
+    let dynamic_tag =item.IsAxis && item.IsOrder && item.EdbInfoType
+        ? '(逆序)'
+        : !item.IsAxis && item.IsOrder && item.EdbInfoType
+        ? '(右轴，逆序)'
+        : !item.IsAxis && !item.IsOrder && item.EdbInfoType
+        ? '(右轴)'
+        : !item.IsAxis && !item.IsOrder && !item.EdbInfoType
+        ? `(右轴，领先${item.LeadValue}${item.LeadUnit})`
+        : !item.IsAxis && item.IsOrder && !item.EdbInfoType
+        ? `(右轴，逆序，领先${item.LeadValue}${item.LeadUnit})`
+        : item.IsAxis && item.IsOrder && !item.EdbInfoType
+        ? `(逆序，领先${item.LeadValue}${item.LeadUnit})`
+        : item.IsAxis && !item.IsOrder && !item.EdbInfoType
+        ? `(领先${item.LeadValue}${item.LeadUnit})`
+        : '';
+    let temName = dynamic_arr.length > 1
+                ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
+                : `${item.EdbName}${dynamic_tag}`
+    if(temName.length>20){
+        let temArr=[]
+        for(let i=0;i<temName.length/20;i++){
+            temArr.push(temName.slice(i*20,i*20+20))
+        }
+        // console.log(temArr);
+        temName=temArr.join('<br>')
+    }
+
+    return temName
+}
+
 //设置季节图配置
 const setSeasonOpt=(data)=>{
     hasLeftAxis.value=true