兼容雷达图

src/components/chart.vue

@@ -6,10 +6,12 @@
 <script lang="ts">
 import { defineComponent, ref, watch, onMounted, PropType } from 'vue';
 import Highcharts from 'highcharts/highstock';
+import HighchartsMore from 'highcharts/highcharts-more';
 import HighchartszhCN from '@/utils/highcahrts-zh_CN';
 import { defaultOpts } from '@/utils/chartOptions';
 
 HighchartszhCN(Highcharts);
+HighchartsMore(Highcharts);
 
 export default defineComponent({
   name: '',

src/hooks/chart/useChartRender.ts

@@ -51,7 +51,7 @@ interface StateProps {
  * useChartRender 处理图表渲染 返回options
  * @param Data 详情数据 lange中英文
  * @param {
- *  Source 1 //ETA图  ChartType: 1曲线图 2季节图 3面积图 4柱状图 5散点图 6组合图 7柱形 8截面散点
+ *  Source 1 //ETA图  ChartType: 1曲线图 2季节图 3面积图 4柱状图 5散点图 6组合图 7柱形 10截面散点 11雷达图
  * 2 商品价格
  * 3 相关性
  * 4 滚动相关性
@@ -95,6 +95,7 @@ export const useChartRender = (Data,lang='ch',) => {
       6: setStackOrCombinChart,
       7: initBarData,
       10: initSectionScatterData,
+      11: initRadarData
     };
 
     chartOptions = typeMap[state.chartInfo.ChartType] && typeMap[state.chartInfo.ChartType](Data);
@@ -1561,6 +1562,115 @@ const setCrossVarietyChart = () => {
 }
 
 
+/* 雷达图 */
+const radarChartRenderData =  ref<any>({})
+const initRadarData = (data) => {
+  const { DataResp,EdbInfoList,ChartInfo } = data;
+  
+  radarChartRenderData.value = {
+    YDataList: DataResp.YDataList,
+    XDataList: EdbInfoList.filter(_ => DataResp.XEdbIdValue.includes(_.EdbInfoId))
+  }
+  state.chartLimit.min=Number(ChartInfo.LeftMin)
+  state.chartLimit.max=Number(ChartInfo.LeftMax)
+
+  return setRadarChart();
+}
+const setRadarChart = () => {
+  const { YDataList,XDataList } = radarChartRenderData.value;
+
+  const { chartLimit,dataList,chartInfo } = state;
+
+    /* 主题样式*/
+    const chartTheme =  chartInfo.ChartThemeStyle ? JSON.parse(chartInfo.ChartThemeStyle) : null;
+
+    let categories = language.value==='ch' 
+    ? XDataList.map(_ => _.EdbAliasName||_.EdbName)
+    : XDataList.map(_ => _.EdbNameEn)
+
+    //x轴
+    let xAxis = {
+      lineWidth: 0,
+      tickLength: 0,
+      tickmarkPlacement: 'on',
+      categories,
+      labels: {
+        allowOverlap: true,
+        autoRotationLimit: 40,
+        style: {
+          ...chartTheme&&chartTheme.xAxisOptions.style
+        }
+      }
+    }
+
+    //y轴
+    const { max,min } = chartLimit;
+    let yAxis = [{
+      gridLineInterpolation: 'polygon',
+      gridLineWidth: 1,
+      lineWidth: 0,
+      endOnTick: false,
+      startOnTick: false,
+      showLastLabel: true,
+      // tickAmount:4,
+      title: {
+        text:  language.value==='ch' ? chartInfo.Unit : 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:any[] = [];
+    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: language.value==='ch' ? (item.Name || item.Date) : item.Date,
+        color: item.Color,
+        lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 1,
+        chartType: 'linear'
+      };
+      series.push(serie_item)
+    })
+
+    return {
+      chart: {
+        ...defaultOpts.chart,
+        ...chartTheme.drawOption,
+        spacing: [2,10,2,10],
+        polar:true,
+      },
+      title: {
+        text:''
+      },
+      pane: {
+        size: '85%'
+      },
+      series,
+      yAxis,
+      xAxis
+    }
+}
+
 
 
 // 曲线图x轴显示计算年限差 >1年 显示年/月 <=1 显示月/日