雷达图绘图

src/api/modules/chartApi.js

@@ -933,6 +933,16 @@ const dataBaseInterface = {
 	 */
 	getReportrefreshStatus: params => {
 		return http.post('/datamanage/chart_info/batch_refresh/result',params)
+	},
+
+	/**
+	 * 获取雷达图预览数据
+	 * @param {
+	 * 	ExtraConfig: { EdbInfoIdList  DateList }
+	 * } params 
+	 */
+	getRadarPreviewData: params => {
+		return http.post('/datamanage/chart_info/preview/radar',params)
 	}
 	
 }

src/views/dataEntry_manage/addChart.vue

@@ -322,12 +322,12 @@
 
 					<!-- 奇怪柱状图配置 雷达图也要用 -->
 					<bar-option
-						v-if="chartInfo.ChartType===7"
+						v-if="[7,11].includes(chartInfo.ChartType)"
 						ref="BarOptRef"
 						:chartInfo="chartInfo"
 						:edblist="tableData"
-						:datedata="barDateList"
+						:datedata="chartInfo.ChartType===7?barDateList:radarChartData.YDataList"
-						@getData="getBarPreviewData"
+						@getData="barOptionPreviewMap"
 					/>
 
 					<!-- 截面散点图 -->
@@ -461,7 +461,7 @@
 							</div>
 
 							<!-- 后续新图专用上下限 和其他数据依赖不公用 柱形图 截面散点-->
-							<template v-if="[7,10].includes(chartInfo.ChartType)">	
+							<template v-if="[7,10,11].includes(chartInfo.ChartType)">	
 								<div class="range-cont left">
 									<el-input
 										style="width: 60px; display: block"
@@ -679,9 +679,12 @@ export default {
 		tableData: {
       handler(newval, oldval) {
 				if(newval.length) {
-					if([7,10].includes(this.chartInfo.ChartType)) {
+					if([7,10,11].includes(this.chartInfo.ChartType)) {
 						// 奇怪柱形图
 						this.chartInfo.ChartType === 7 && this.barDateList.length && this.$refs.BarOptRef.getBarData();
+
+						//雷达图
+						this.chartInfo.ChartType === 11 && this.$refs.BarOptRef.getBarData();
 				
 					}else {
 						//拼接标题
@@ -733,9 +736,9 @@ export default {
 					// 季节图只允许添加一个指标
 					if(this.chartInfo.ChartType === 2 && this.tableData.length > 1) return this.$message.warning('您选择的图表样式为季节性图表，只支持单指标画图');
 
-					if(this.chartInfo.ChartType === 7 && !this.$refs.BarOptRef.dateList.length)  return this.$message.warning('请添加日期');
+					else if([7,10].includes(this.chartInfo.ChartType)  && !this.$refs.BarOptRef.dateList.length)  return this.$message.warning('请添加日期');
 
-					if(this.chartInfo.ChartType === 10 && !this.$refs.SectionScatterOptRef.seriesArr[0].edbs)  return this.$message.warning('请添加系列指标');
+					else if(this.chartInfo.ChartType === 10 && !this.$refs.SectionScatterOptRef.seriesArr[0].edbs)  return this.$message.warning('请添加系列指标');
 
 					if(this.chartInfo.ChartType === 2){
 						if(!(this.SeasonExtraConfig.XStartDate && this.SeasonExtraConfig.XEndDate)){

src/views/dataEntry_manage/chartSetting.vue

@@ -443,7 +443,7 @@
                     </div>
 
                     <!-- 后续新图专用上下限 和其他数据依赖不公用 柱形图 截面散点-->
-                    <template v-if="[7,10].includes(chartInfo.ChartType)">	
+                    <template v-if="[7,10,11].includes(chartInfo.ChartType)">	
                       <div class="range-cont left">
                         <el-input
                           style="width: 60px; display: block"
@@ -1602,7 +1602,8 @@ export default {
 
       const chartTypeMap = {
         7: this.initBarData, //柱形图
-        10: this.initSectionScatterData //截面散点
+        10: this.initSectionScatterData, //截面散点
+        11: this.initRadarData //雷达图
       }
       chartTypeMap[this.chartInfo.ChartType] && chartTypeMap[this.chartInfo.ChartType](res.Data);
 
@@ -1807,12 +1808,14 @@ export default {
             }
             break
           case 7:
+          case 11:
             typeChartParam = {
                ...public_param,
               DateType: 6,
               LeftMin: String(this.chartLimit.min),
               LeftMax: String(this.chartLimit.max),
             }
+            break
           case 10: 
             typeChartParam = {
               ...public_param,
@@ -1825,7 +1828,8 @@ export default {
                 YMinValue: String(this.chartLimit.min),
                 YMaxValue: String(this.chartLimit.max),
               })
-            } 
+            }
+            break
         }
 
         let params = this.sameOptionType.includes(this.selected_chartType)
@@ -2200,7 +2204,7 @@ export default {
         .then((res) => {
           this.refreshLoading.close();
           if (res.Ret === 200) {
-            this.getPreviewChartInfo();
+            [7,10,11].includes(this.chartInfo.ChartType) ? this.getChartDetail() : this.getPreviewChartInfo();
             this.$message.success(res.Msg);
           }
         });

src/views/dataEntry_manage/components/barOptionSection.vue

@@ -2,7 +2,7 @@
   <div class="bar-option-wrapper">
     <template v-if="dateList.length">
       <!-- 排序规则 -->
-      <div v-if="isBaseBarShow">
+      <div v-if="isBaseBarShow&&chartInfo.ChartType===7">
         <div>
           <label style="margin-right: 5px;">排序规则</label> 
           <el-radio-group v-model="sortObj.sort" @change="() => { sortObj.sortIndex= '';changeSort()}">
@@ -141,7 +141,8 @@ export default {
     edblist: Array,
     datedata: Array,
     chartInfo: {
-      type: Object
+      type: Object,
+      default: () => {}
     },
     initData: {
       default: null

src/views/dataEntry_manage/components/markersSection.vue

@@ -1,57 +1,60 @@
 <template>
   <div class="chart-markers-section">
-    <!-- 标示线 -->
+    <!-- 雷达不要 -->
-    <div class="section-item">
+    <template v-if="chartInfo.ChartType!==11">
-      <ul class="marker-list"  v-if="markerLinesArr.length">
+      <!-- 标示线 -->
-        <li class="marker-item" v-for="(item,index) in markerLinesArr" :key="index">
+      <div class="section-item">
-          <span>{{item.axisName}}: {{item.value}}</span>
+        <ul class="marker-list"  v-if="markerLinesArr.length">
-          <div style="flex-shrink:0">
+          <li class="marker-item" v-for="(item,index) in markerLinesArr" :key="index">
-            <i class="el-icon-view icon" :style="item.isShow?'color:#0052D9':'color:#999'" @click="item.isShow=!item.isShow;updateChartHandle()"/>
+            <span>{{item.axisName}}: {{item.value}}</span>
-            <i class="el-icon-edit icon" style="margin:0 6px" @click="openMarkerDiaHandle('line',index+1)"/>
+            <div style="flex-shrink:0">
-            <i class="el-icon-delete icon" @click="markerLinesArr.splice(index,1);updateChartHandle()"/>
+              <i class="el-icon-view icon" :style="item.isShow?'color:#0052D9':'color:#999'" @click="item.isShow=!item.isShow;updateChartHandle()"/>
-          </div>
+              <i class="el-icon-edit icon" style="margin:0 6px" @click="openMarkerDiaHandle('line',index+1)"/>
-        </li>
+              <i class="el-icon-delete icon" @click="markerLinesArr.splice(index,1);updateChartHandle()"/>
-      </ul>
+            </div>
+          </li>
+        </ul>
+
+        <div
+          class="add-cont"
+          @click="openMarkerDiaHandle('line')"
+        >
+          <img
+            src="~@/assets/img/set_m/add_ico.png"
+            alt=""
+            style="width: 16px; height: 16px; margin-right: 10px"
+          />
+          <span>添加标识线</span>
+        </div>
 
-      <div
-        class="add-cont"
-        @click="openMarkerDiaHandle('line')"
-      >
-        <img
-          src="~@/assets/img/set_m/add_ico.png"
-          alt=""
-          style="width: 16px; height: 16px; margin-right: 10px"
-        />
-        <span>添加标识线</span>
       </div>
 
-    </div>
+      <!-- 标识区 -->
+      <div class="section-item">
+        <ul class="marker-list" v-if="markerAreasArr.length">
+          <li class="marker-item" v-for="(item,index) in markerAreasArr" :key="index">
+            <span>{{item.axisName}}: {{`${item.fromValue}至${item.toValue}`}}</span>
+            <div style="flex-shrink:0">
+              <i class="el-icon-view icon" :style="item.isShow?'color:#0052D9':'color:#999'" @click="item.isShow=!item.isShow;updateChartHandle()"/>
+              <i class="el-icon-edit icon" style="margin:0 6px" @click="openMarkerDiaHandle('area',index+1)"/>
+              <i class="el-icon-delete icon" @click="markerAreasArr.splice(index,1);updateChartHandle()"/>
+            </div>
+          </li>
+        </ul>
+        <div
+          class="add-cont"
+          @click="openMarkerDiaHandle('area')"
+        >
+          <img
+            src="~@/assets/img/set_m/add_ico.png"
+            alt=""
+            style="width: 16px; height: 16px; margin-right: 10px"
+          />
+          <span>添加标识区</span>
+        </div>
 
-    <!-- 标识区 -->
-    <div class="section-item">
-      <ul class="marker-list" v-if="markerAreasArr.length">
-        <li class="marker-item" v-for="(item,index) in markerAreasArr" :key="index">
-          <span>{{item.axisName}}: {{`${item.fromValue}至${item.toValue}`}}</span>
-          <div style="flex-shrink:0">
-            <i class="el-icon-view icon" :style="item.isShow?'color:#0052D9':'color:#999'" @click="item.isShow=!item.isShow;updateChartHandle()"/>
-            <i class="el-icon-edit icon" style="margin:0 6px" @click="openMarkerDiaHandle('area',index+1)"/>
-            <i class="el-icon-delete icon" @click="markerAreasArr.splice(index,1);updateChartHandle()"/>
-          </div>
-        </li>
-      </ul>
-      <div
-        class="add-cont"
-        @click="openMarkerDiaHandle('area')"
-      >
-        <img
-          src="~@/assets/img/set_m/add_ico.png"
-          alt=""
-          style="width: 16px; height: 16px; margin-right: 10px"
-        />
-        <span>添加标识区</span>
       </div>
-
+    </template>
-    </div>
 
     <!-- 图表说明 -->
     <div class="section-item">

src/views/dataEntry_manage/editChart.vue

@@ -317,13 +317,13 @@
 
 					<!-- 奇怪柱状图配置 -->
 					<bar-option
-						v-if="chartInfo.ChartType===7"
+						v-if="[7,11].includes(chartInfo.ChartType)"
 						ref="BarOptRef"
 						:chartInfo="chartInfo"
 						:edblist="tableData"
-						:datedata="barDateList"
+						:datedata="chartInfo.ChartType===7?barDateList:radarChartData.YDataList"
 						:initData="initBarOptions"
-						@getData="getBarPreviewData"
+						@getData="barOptionPreviewMap"
 					/>
 
 					<!-- 截面散点图 -->
@@ -458,7 +458,7 @@
 							</div>
 
 							<!-- 后续新图专用上下限 和其他数据依赖不公用 柱形图 截面散点-->
-							<template v-if="[7,10].includes(chartInfo.ChartType)">	
+							<template v-if="[7,10,11].includes(chartInfo.ChartType)">	
 								<div class="range-cont left">
 									<el-input
 										style="width: 60px; display: block"
@@ -756,6 +756,9 @@ export default {
 
 					//截面散点图
 					this.chartInfo.ChartType === 10 && this.initSectionScatterData(res.Data);
+
+					//雷达图
+					this.chartInfo.ChartType === 11 && this.initRadarData(res.Data);
 					
 					this.getThemeList();
 

src/views/dataEntry_manage/mixins/addOreditMixin.js

@@ -164,26 +164,9 @@ export default {
 		selectTarget(item,type='') {
 			if(!item) return
 
-			/* 正常图获取指标数据 柱形图不获取 */
+			/* 正常图获取指标数据 柱形图 雷达图不获取 */
-			if(this.chartInfo.ChartType === 7) return this.setBarEdbList(item);
+			if([7,11].includes(this.chartInfo.ChartType)) return this.setBarEdbList(item);
-				// let params = this.sameOptionType.includes(this.chartInfo.ChartType) 
+
-				// 	? {
-				// 		EdbInfoId: item.EdbInfoId,
-				// 		ChartType: this.chartInfo.ChartType,
-				// 		DateType: this.year_select,
-				// 		StartDate:
-				// 			this.year_select === 5 || this.year_select === 6
-				// 				? this.select_date[0]
-				// 				: '',
-				// 		EndDate: this.year_select === 5 ? this.select_date[1] : '',
-				// 	} 
-				// 	: {
-				// 		EdbInfoId: item.EdbInfoId,
-				// 		ChartType: this.chartInfo.ChartType,
-				// 		Calendar: this.calendar_type,
-				// 		SeasonStartDate: '',
-				// 		SeasonEndDate: '',
-				// 	};
 				let dateArray=this.chartInfo.ChartType==2?this.season_year:this.select_date
 
 				let params = {
@@ -237,7 +220,7 @@ export default {
 
 		},
 
-		/* 添加柱形图表格 */
+		/* 添加柱形图 /雷达图指标数组 */
 		setBarEdbList(edb) {
 			let have_bol = this.tableData.some(item => item.EdbInfoId === edb.EdbInfoId);
 
@@ -247,7 +230,16 @@ export default {
 			this.search_txt = '';
 			this.chartInfo.Unit = this.chartInfo.Unit||edb.Unit
 			this.tableData.push(edb)
+		},
 
+		/* 奇怪柱形图的日期配置项现在不止柱形图用了 获取数据时扩展一下 */
+		barOptionPreviewMap(data) {
+			let tyepeMapApi = {
+				7: this.getBarPreviewData,//柱形图
+				11: this.getRadarPreviewData//雷达图
+			}
+
+			tyepeMapApi[this.chartInfo.ChartType](data);
 		},
 
 		/* 获取bar数据 */
@@ -290,8 +282,50 @@ export default {
 		},
 
 		/* 获取雷达图预览数据 */
-		getRadarPreviewData() {
+		async getRadarPreviewData({dateList}) {
+			if(this.tableData.length<3 || !dateList.length) return
+			
+			let parmas = {
+				ChartEdbInfoList: this.tableData.map(_ => ({
+					EdbInfoId: _.EdbInfoId,
+					EdbAliasName:_.EdbAliasName
+				})),
+				ExtraConfig: JSON.stringify({ DateList: dateList})
+			}
+
+			const res = await dataBaseInterface.getRadarPreviewData(parmas)
+
+			if(res.Ret!==200) return 
+
+			const { DataResp,EdbInfoList,ChartInfo } = res.Data;
+
+			console.log(JSON.parse(this.chartInfo.ChartThemeStyle))
+			//默认来源搞一下
+			this.chartInfo.SourcesFrom = JSON.stringify({
+				isShow: true,
+				text: ChartInfo.ChartSource,
+				color: JSON.parse(this.chartInfo.ChartThemeStyle).markerOptions.style.color,
+				fontSize: JSON.parse(this.chartInfo.ChartThemeStyle).markerOptions.style.fontSize
+			});
 			
+			this.radarChartData = {
+				YDataList: DataResp.YDataList,
+				XDataList: EdbInfoList.filter(_ => DataResp.XEdbIdValue.includes(_.EdbInfoId))
+			}
+
+			// //初始状态设置上下限极值
+			if(!this.chartInfo.LeftMin) {
+				const value_arr = this.radarChartData.YDataList.map(_ => _.Value).flat(Infinity)
+
+				this.chartLimit = {
+					min: Math.min(...value_arr),
+					max: Math.max(...value_arr)
+				}
+			}
+
+			this.setRadarChart()
+
+
 		},
 
 		/* 曲线图切换筛选项时请求数据 */
@@ -656,10 +690,27 @@ export default {
 							}))
 						})
 					}	
+				case 11: 
+					return {
+						...public_param,
+						DateType: 6,
+						Unit: this.chartInfo.Unit,
+						LeftMin: String(this.chartLimit.min),
+						LeftMax: String(this.chartLimit.max),
+						ExtraConfig: JSON.stringify({
+							DateList: this.$refs.BarOptRef.dateList.map(item => ({
+								Type: item.Type,
+								Date: item.Date,
+								Value: item.Value,
+								Name: item.Name,
+								Color: item.Color
+							})),
+						})
+					}
 			}
 		},
 
-		/* 奇怪柱形图更新单位 */
+		/* 更新单位 */
 		changeUnit(val) {
 			if(!this.options.series) return
 
@@ -782,7 +833,8 @@ export default {
 			
 			const chartTypeMap = {
         7: this.setBarChart, //柱形图
-        10: this.setSectionScatterChart //截面散点
+        10: this.setSectionScatterChart, //截面散点
+				11: this.setRadarChart  //雷达图
       }
       chartTypeMap[this.chartInfo.ChartType] 
 				? chartTypeMap[this.chartInfo.ChartType]() 

src/views/dataEntry_manage/mixins/chartPublic.js

@@ -1798,47 +1798,118 @@ export const chartSetMixin = {
       this.currentLang=='en' && this.changeOptions()
     },
 
+    //雷达图数据初始化
+    initRadarData(data) {
+      const { DataResp,EdbInfoList,ChartInfo } = data;
 
+      this.leftIndex = -1;
+      this.rightIndex = -1;
+      this.rightTwoIndex = -1;
+      
+      this.radarChartData = {
+				YDataList: DataResp.YDataList,
+				XDataList: EdbInfoList.filter(_ => DataResp.XEdbIdValue.includes(_.EdbInfoId))
+			}
+      this.chartLimit = {
+        min: Number(ChartInfo.LeftMin),
+        max: Number(ChartInfo.LeftMax)
+      }
+
+      this.setRadarChart();
+    },
     /*雷达图绘图*/
     setRadarChart() {
-      const {} = this.radarChartData;
+      const { YDataList,XDataList } = this.radarChartData;
 
       /* 主题样式*/
       const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
 
       //x轴
       let xAxis = {
-        lineWidth: 0
+        lineWidth: 0,
+        tickLength: 0,
+        tickmarkPlacement: 'on',
+        categories: XDataList.map(_ => _.EdbAliasName||_.EdbName),
+        labels: {
+          allowOverlap: true,
+          autoRotationLimit: 40,
+          style: {
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          }
+        }
       }
 
       //y轴
-      let yAxis = {
+      const { max,min } = this.chartLimit;
+      let yAxis = [{
         gridLineInterpolation: 'polygon',
+        gridLineWidth: 1,
         lineWidth: 0,
-        endOnTick: false,
+        endOnTick: true,
         startOnTick: false,
         showLastLabel: true,
-      }
+        // tickAmount:4,
+        title: {
+          text:  this.chartInfo.Unit,
+          textCh: this.chartInfo.Unit,
+          textEn: this.chartInfo.UnitEn,
+          align: 'high',
+          rotation: 0,
+          y: 5,
+          x:10,
+          textAlign: 'left',
+          reserveSpace: false,
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
+        },
+        labels: {
+          allowOverlap: true,
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          }
+        },
+        min: Number(min),
+        max: Number(max),
+      }]
 
       //系列
       let series = [];
+      YDataList.forEach(item => {
+        let serie_item = {
+          data: item.Value,
+          pointPlacement: 'on',
+          type: (chartTheme&&chartTheme.lineOptions.lineType) || 'line',
+          dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
+          yAxis: 0,
+          name: item.Name || item.Date,
+          nameCh: item.Name || item.Date,
+          nameEn: item.Date,
+          color: item.Color,
+          lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 1,
+          chartType: 'linear'
+        };
+        series.push(serie_item)
+      })
 
       this.options = {
         chart: {
           ...defaultOpts.chart,
 					...chartTheme.drawOption,
-          spacing: chartTheme.legendOptions.verticalAlign==='bottom' ? [23,10,2,10] : [2,10,2,10],
+          spacing: [2,10,2,10],
           polar:true,
         },
         title: {
           text:''
         },
+        pane: {
+          size: '85%'
+        },
         series,
         yAxis,
         xAxis
       }
       this.currentLang=='en' && this.changeOptions();
-
     },
 
 

src/views/mychart_manage/components/chartDetailDia.vue

@@ -272,7 +272,7 @@
                 </div>
 
                   <!-- 后续新图专用上下限 和其他数据依赖不公用 柱形图 截面散点-->
-                <template v-if="[7,10].includes(chartInfo.ChartType)">	
+                <template v-if="[7,10,11].includes(chartInfo.ChartType)">	
                   <div class="range-cont left">
                     <el-input
                       style="width: 60px; display: block"
@@ -732,7 +732,11 @@ export default {
             this.setDefaultDateSelect(); //设置默认的日期选中
             this.chartInfo.ChartType === 7 && this.initBarData(res.Data);
 
+            //截面散点图
             this.chartInfo.ChartType === 10 && this.initSectionScatterData(res.Data);
+
+            //雷达图
+            this.chartInfo.ChartType === 11 && this.initRadarData(res.Data);
           }else if([2,5].includes(this.chartInfo.Source)) {
             this.tableData = [res.Data.EdbInfoList[0]];
             this.chartInfo = res.Data.ChartInfo.Source===5 ? {
@@ -923,7 +927,7 @@ export default {
     async refreshHandle() {
       // 清除缓存配置项
       this.refreshLoading = true;
-      const { Source,ChartInfoId,UniqueCode } = this.chartInfo;
+      const { Source,ChartInfoId,UniqueCode,ChartType } = this.chartInfo;
 
       let res=null
       if(Source===1){
@@ -943,7 +947,10 @@ export default {
         this.refreshLoading = false;
         if (res.Ret !== 200) return
         this.$message.success(res.Msg);
-        Source === 1 ? this.getPreviewChartInfo() : this.getChartDetail(UniqueCode);
+
+        Source===1&&![7,10,11].includes(ChartType) 
+          ? this.getPreviewChartInfo() 
+          : this.getChartDetail(UniqueCode);
     },
     // 英文面板时候的判断
     copyChartConfirm(type){
@@ -1149,12 +1156,14 @@ export default {
           }
           break
         case 7:
+        case 11:
           typeChartParam = {
             ...public_param,
             DateType: 6,
             LeftMin: String(this.chartLimit.min),
             LeftMax: String(this.chartLimit.max),
           }
+          break
         case 10: 
           typeChartParam = {
             ...public_param,
@@ -1167,7 +1176,8 @@ export default {
               YMinValue: String(this.chartLimit.min),
               YMaxValue: String(this.chartLimit.max),
             })
-          } 
+          }
+          break
       }
 
       let params = this.sameOptionType.includes(this.chartInfo.ChartType)

src/views/system_manage/chartTheme/themeSetting.vue

@@ -112,8 +112,11 @@ export default {
         ChartThemeStyle: themeItem.Config
       };
       this.tableData = res.Data.EdbInfoList;
+
       if(this.chartInfo.ChartType === 7) return this.initBarData(res.Data);
-      if(this.chartInfo.ChartType === 10) return this.initSectionScatterData(res.Data);
+      else if(this.chartInfo.ChartType === 10) return this.initSectionScatterData(res.Data);
+      
+      else if(this.chartInfo.ChartType === 11) return this.initRadarData(res.Data);
 
       this.setChartOptionHandle(this.tableData)
     },