图表超过10条线不显示问题

src/hooks/chart/useChartRender.ts

@@ -232,16 +232,16 @@ const setDefaultLineOptions = () => {
 
     //预测指标配置
     let predict_params = item.EdbInfoCategoryType === 1 ? getPredictParams(item) : {};
-
+    const noExceed = chartTheme && chartTheme.lineOptionList.length > index //线条数没超过图表可配置的线条数
     let obj = {
       data: [] as any[],
-      type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
-      dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
+      type: (noExceed&&chartTheme.lineOptionList[index].lineType) || 'spline',
+      dashStyle: (noExceed&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
       yAxis: sameSideIndex,
       name,
       color: item.ChartColor,
-      lineWidth: Number(item.ChartWidth)||(chartTheme&&chartTheme.lineOptionList[index].lineWidth)||1,
-      marker:chartTheme && chartTheme.lineOptionList[index].dataMark && chartTheme.lineOptionList[index].dataMark!='none'?{
+      lineWidth: Number(item.ChartWidth)||(noExceed&&chartTheme.lineOptionList[index].lineWidth)||1,
+      marker:noExceed && chartTheme.lineOptionList[index].dataMark && chartTheme.lineOptionList[index].dataMark!='none'?{
         enabled:true,
         symbol: chartTheme.lineOptionList[index].markType || 'circle',
         fillColor:chartTheme.lineOptionList[index].markColor,
@@ -347,21 +347,23 @@ const setSeasonOptions = () => {
 
     /* 主题样式*/
   const chartTheme =  state.chartInfo.ChartThemeStyle ? JSON.parse(state.chartInfo.ChartThemeStyle) : null;
+  // 跟颜色对应
+  chartTheme && (chartTheme.lineOptionList=chartTheme.lineOptionList.reverse().slice(-chartDataHandle.length))
 
   /*处理数据列*/
   for (let index in chartDataHandle) {
     let j = chartDataHandle[index]
     //预测指标配置
     let predict_params =  chartData.EdbInfoCategoryType === 1 ? getSeasonPredictParams(j.CuttingDataTimestamp) : {};
-
+    const noExceed = chartTheme && chartTheme.lineOptionList.length > index //线条数没超过图表可配置的线条数
     let serie_item = {
       data: [] as any[],
-      type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || chartData.ChartStyle,
-      dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
+      type: (noExceed&&chartTheme.lineOptionList[index].lineType) || chartData.ChartStyle,
+      dashStyle: (noExceed&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
       yAxis: 0,
       name: j.ChartLegend,
-      lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 1,
-      marker:chartTheme && chartTheme.lineOptionList[index].dataMark && chartTheme.lineOptionList[index].dataMark!='none'?{
+      lineWidth: (noExceed&&chartTheme.lineOptionList[index].lineWidth) || 1,
+      marker:noExceed && chartTheme.lineOptionList[index].dataMark && chartTheme.lineOptionList[index].dataMark!='none'?{
         enabled:true,
         symbol: chartTheme.lineOptionList[index].markType || 'circle',
         fillColor:chartTheme.lineOptionList[index].markColor,
@@ -971,6 +973,7 @@ const setSectionScatterChart = () => {
     //数据列
     let series: any[] = [];
     DataList.forEach((item:any,index:number) => {
+        const noExceed = chartTheme && chartTheme.lineOptionList.length > index //线条数没超过图表可配置的线条数
         //数据列
         let series_item = {
             data: [] as any[],
@@ -981,7 +984,7 @@ const setSectionScatterChart = () => {
             chartType: 'linear',
             zIndex:1,
             marker: {
-              radius: (chartTheme&&chartTheme.lineOptionList[index].radius)||5,
+              radius: (noExceed&&chartTheme.lineOptionList[index].radius)||5,
             },
             visible: true
         }
@@ -1171,16 +1174,16 @@ const setCommodityChart = () => {
   data.forEach((item: { Value: number[]; Name: string; Date: string; Color: string;NameEn: string,XEdbInfoIdList: number[],NoDataEdbList: number[] },index:number) => {
     //处理首或/尾全是无效数据的以null填充
     let filterData = filterInvalidData(item)
-
+    const noExceed = chartTheme && chartTheme.lineOptionList.length > index //线条数没超过图表可配置的线条数
     let serie_item = {
       data: filterData,
-      type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
-      dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
+      type: (noExceed&&chartTheme.lineOptionList[index].lineType) || 'spline',
+      dashStyle: (noExceed&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
       yAxis: 0,
       name: language.value === 'zh' ? item.Name : item.NameEn,
       color: item.Color,
       chartType: 'linear',
-      lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 3,
+      lineWidth: (noExceed&&chartTheme.lineOptionList[index].lineWidth) || 3,
       marker: {
         enabled: false
       }
@@ -1342,15 +1345,16 @@ const initRelevanceChartData=(data)=>{
   //处理series
   let seriesData:any[]=[]
   data.YDataList.forEach((item:any,index:number)=>{
+    const noExceed = chartTheme && chartTheme.lineOptionList.length > index //线条数没超过图表可配置的线条数
     let serie_item = {
       data: item.Value,
-      type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
-      dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
+      type: (noExceed&&chartTheme.lineOptionList[index].lineType) || 'spline',
+      dashStyle: (noExceed&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
       yAxis: 0,
       name: language.value=='zh'?data.ChartInfo.ChartName:data.ChartInfo.ChartNameEn,
       color: item.Color,
       chartType: 'linear',
-      lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 3,
+      lineWidth: (noExceed&&chartTheme.lineOptionList[index].lineWidth) || 3,
       marker: {
         enabled: false
       }
@@ -1449,15 +1453,15 @@ const setStatisticFrequency = () => {
       max: index===0? Number(LeftMaxValue):Number(RightMaxValue),
       tickWidth: 1,
     }
-
+    const noExceed = chartTheme && chartTheme.lineOptionList.length > index //线条数没超过图表可配置的线条数
     let series_item = {
       data: item.Value.map(_ =>[_.X,_.Y]),
-      dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
-      type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
+      dashStyle: (noExceed&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
+      type: (noExceed&&chartTheme.lineOptionList[index].lineType) || 'spline',
       yAxis: index,
       name: language.value === 'zh' ? item.Name : item.NameEn,
       color: item.Color,
-      lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth)||3,
+      lineWidth: (noExceed&&chartTheme.lineOptionList[index].lineWidth)||3,
       chartType: 'linear',
       zIndex:1
     }
@@ -1729,15 +1733,16 @@ const setRadarChart = () => {
     //系列
     let series:any[] = [];
     YDataList.forEach((item,index) => {
+      const noExceed = chartTheme && chartTheme.lineOptionList.length > index //线条数没超过图表可配置的线条数
       let serie_item = {
         data: item.Value,
         pointPlacement: 'on',
-        type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'line',
-        dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
+        type: (noExceed&&chartTheme.lineOptionList[index].lineType) || 'line',
+        dashStyle: (noExceed&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
         yAxis: 0,
         name: language.value==='zh' ? (item.Name || item.Date) : item.Date,
         color: item.Color,
-        lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 1,
+        lineWidth: (noExceed&&chartTheme.lineOptionList[index].lineWidth) || 1,
         chartType: 'linear'
       };
       series.push(serie_item)