兼容雷达图

src/hooks/chart/render.js

@@ -4,6 +4,7 @@ import {onMounted,ref,nextTick,reactive} from 'vue'
 import {chartDefaultOpts,scatterXAxis,basicYAxis,basicXAxis,leadUnitEnMap,relevanceUnitEnMap} from './config'
 import Highcharts from 'highcharts/highstock';
 import HighchartsFormat from 'highcharts';
+import HighchartsMore from 'highcharts/highcharts-more';
 import HightchartsExport from 'highcharts/modules/exporting';
 import Boost from 'highcharts/modules/boost'
 import HighchartszhCN  from './highcahrts-zh_CN.js'
@@ -11,6 +12,7 @@ import moment from 'moment'
 import _ from 'lodash';
 HighchartszhCN(Highcharts)
 HightchartsExport(Highcharts)
+HighchartsMore(Highcharts)
 Boost(Highcharts)
 
 
@@ -57,7 +59,7 @@ export function useChartRender(){
 
 /**备注一下 越多越乱 
  * @params
- * Source 1 ; chartType只在source:1用到 1曲线 2季节 3面积 4堆积柱 5散点 6组合 7柱形 8截面散点
+ * Source 1 ; chartType只在source:1用到 1曲线 2季节 3面积 4堆积柱 5散点 6组合 7柱形 10截面散点 11雷达图
  * 2 商品价格
  * 3 相关性
  * 4 滚动相关性
@@ -103,7 +105,8 @@ export function chartRender({data,renderId,lang='zh',changeLangIsCheck,showChart
             5: setScatterOptions,
             6: setStackOrCombinChart,
             7: initBarData,
-            10: setSectionScatterChart
+            10: setSectionScatterChart,
+            11: setRadarChart
         };
         chartOpt=chartSetMap[data.ChartInfo.ChartType](data)
     }else if([2,5].includes(data.ChartInfo.Source)){//商品价格曲线
@@ -442,7 +445,7 @@ function setChartLang(changeLangIsCheck){
             } 
 
             //柱形图额外设置x轴中英文
-            if(ChartType ===7){
+            if([7,11].includes(ChartType)){
                 //x轴
                 options.value.xAxis.categories = chartData.value.XEdbIdValue.map(_ => LangType.value == 'zh' 
                 ? chartData.value.EdbInfoList.find(edb => edb.EdbInfoId===_).EdbAliasName
@@ -539,7 +542,7 @@ function setStatisticFrequency(e){
         type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
         yAxis: index,
         name: item.Name,
-        nameCh: item.Name,
+        nameZh: item.Name,
         nameEn: item.NameEn||item.Name,
         color: item.Color,
         lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth)||3,
@@ -1327,7 +1330,7 @@ function setBarChart (e){
         }
     }
 
-    const { leftMin,leftMax } = axisLimitData;
+    const { leftMin,leftMax } = axisLimitState;
     // console.log(leftMin,leftMax)
     //y轴
     let yAxis = {
@@ -1412,9 +1415,6 @@ function initBarData(data){
     axisLimitState.leftMin=Number(ChartInfo.LeftMin)
     axisLimitState.leftMax=Number(ChartInfo.LeftMax)
 
-    axisLimitData.leftMin=Number(ChartInfo.LeftMin)
-    axisLimitData.leftMax=Number(ChartInfo.LeftMax)
-
     return setBarChart(data);
 }
 
@@ -2016,7 +2016,7 @@ function setCrossVarietyChart({DataResp,EdbInfoList,ChartInfo}) {
           data: [],
           type: 'scatter',
           name: item.Name,
-          nameCh: item.Name,
+          nameZh: item.Name,
           nameEn: item.NameEn||item.Name,
           color: item.Color,
           lineWidth: 0,
@@ -2081,4 +2081,107 @@ function setCrossVarietyChart({DataResp,EdbInfoList,ChartInfo}) {
         xAxis,
         tooltip
       }
+}
+
+/* 雷达图 */
+function setRadarChart({DataResp,EdbInfoList,ChartInfo}) {
+    axisLimitState.leftIndex=-1
+    axisLimitState.rightIndex=-1
+    axisLimitState.rightTwoIndex=-1
+
+    const { YDataList,XEdbIdValue } = DataResp;
+
+    let XDataList = EdbInfoList.filter(_ => XEdbIdValue.includes(_.EdbInfoId));
+
+    axisLimitState.hasLeftAxis=true
+    axisLimitState.leftMin=Number(ChartInfo.LeftMin)
+    axisLimitState.leftMax=Number(ChartInfo.LeftMax)
+
+    /* 主题样式*/
+    const chartTheme =  ChartInfo.ChartThemeStyle ? JSON.parse(ChartInfo.ChartThemeStyle) : null;
+
+    //x轴
+    let xAxis = {
+      lineWidth: 0,
+      tickLength: 0,
+      tickmarkPlacement: 'on',
+      categories:XDataList.map(_ => _.EdbAliasName||_.EdbName),
+      labels: {
+        allowOverlap: true,
+        autoRotationLimit: 40,
+        style: {
+          ...chartTheme&&chartTheme.xAxisOptions.style
+        }
+      }
+    }
+
+    //y轴
+    let yAxis = [{
+      gridLineInterpolation: 'polygon',
+      gridLineWidth: 1,
+      lineWidth: 0,
+      endOnTick: false,
+      startOnTick: false,
+      showLastLabel: true,
+      // tickAmount:4,
+      title: {
+        text:  ChartInfo.Unit,
+        textCh: ChartInfo.Unit,
+        textEn: 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(ChartInfo.LeftMin),
+      max: Number(ChartInfo.LeftMax),
+    }]
+
+    //系列
+    let series = [];
+    YDataList.forEach(item => {
+      let serie_item = {
+        name: item.Name || item.Date,
+        nameZh: item.Name || item.Date,
+        nameEn: item.Date,
+        data: item.Value,
+        pointPlacement: 'on',
+        type: (chartTheme&&chartTheme.lineOptions.lineType) || 'line',
+        dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
+        yAxis: 0,
+        color: item.Color,
+        lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 1,
+        chartType: 'linear'
+      };
+      series.push(serie_item)
+    })
+
+    return {
+      chart: {
+        ...chartDefaultOpts.chart,
+        ...chartTheme.drawOption,
+        spacing: [2,10,2,10],
+        polar:true,
+      },
+      title: {
+        text:''
+      },
+      pane: {
+        size: '85%'
+      },
+      series,
+      yAxis,
+      xAxis
+    }
 }