Merge branch 'bug_5007'

src/hooks/chart/useChartRender.ts

@@ -232,20 +232,21 @@ const setDefaultLineOptions = () => {
 
     //预测指标配置
     let predict_params = item.EdbInfoCategoryType === 1 ? getPredictParams(item) : {};
-
+    //图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
+    const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
     let obj = {
       data: [] as any[],
-      type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
-      dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
+      type: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineType) || 'spline',
+      dashStyle: (chartTheme&&chartTheme.lineOptionList[lineIndex].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)||(chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth)||1,
+      marker:chartTheme && chartTheme.lineOptionList[lineIndex].dataMark && chartTheme.lineOptionList[lineIndex].dataMark!='none'?{
         enabled:true,
-        symbol: chartTheme.lineOptionList[index].markType || 'circle',
-        fillColor:chartTheme.lineOptionList[index].markColor,
-        radius: chartTheme.lineOptionList[index].markSize
+        symbol: chartTheme.lineOptionList[lineIndex].markType || 'circle',
+        fillColor:chartTheme.lineOptionList[lineIndex].markColor,
+        radius: chartTheme.lineOptionList[lineIndex].markSize
       }:{},
       ...predict_params
     };
@@ -347,25 +348,30 @@ 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) {
+    console.log(index,'index');
+    
     let j = chartDataHandle[index]
     //预测指标配置
     let predict_params =  chartData.EdbInfoCategoryType === 1 ? getSeasonPredictParams(j.CuttingDataTimestamp) : {};
-
+    // 图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
+    const lineIndex = chartTheme ? Number(index)%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: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineType) || chartData.ChartStyle,
+      dashStyle: (chartTheme&&chartTheme.lineOptionList[lineIndex].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: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth) || 1,
+      marker:chartTheme && chartTheme.lineOptionList[lineIndex].dataMark && chartTheme.lineOptionList[lineIndex].dataMark!='none'?{
         enabled:true,
-        symbol: chartTheme.lineOptionList[index].markType || 'circle',
-        fillColor:chartTheme.lineOptionList[index].markColor,
-        radius: chartTheme.lineOptionList[index].markSize
+        symbol: chartTheme.lineOptionList[lineIndex].markType || 'circle',
+        fillColor:chartTheme.lineOptionList[lineIndex].markColor,
+        radius: chartTheme.lineOptionList[lineIndex].markSize
       }:{},
       ...predict_params
     };
@@ -566,14 +572,15 @@ const setStackOrCombinChart = () => {
 
     //预测指标配置
     let predict_params = item.EdbInfoCategoryType === 1 ? getPredictParams(item,chartStyle) : {};
-
+    //图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
+    const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
     let obj = {
       data: [] as any[],
       type: chartStyle || item.ChartStyle,
       yAxis: serie_yIndex,
       name,
       color: item.ChartColor,
-      lineWidth:  Number(item.ChartWidth),
+      lineWidth: Number(item.ChartWidth)||(chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth) || 1,
       fillColor: (chartInfo.ChartType === 3 || (chartInfo.ChartType === 6 && item.ChartStyle === 'areaspline')) ? item.ChartColor : undefined,
       zIndex: (chartInfo.ChartType === 6 && ['line','spline'].includes(item.ChartStyle)) ? 1 : 0, //防止组合图曲线被遮住
       borderWidth: 1,
@@ -971,6 +978,8 @@ const setSectionScatterChart = () => {
     //数据列
     let series: any[] = [];
     DataList.forEach((item:any,index:number) => {
+        // 图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
+        const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
         //数据列
         let series_item = {
             data: [] as any[],
@@ -981,7 +990,7 @@ const setSectionScatterChart = () => {
             chartType: 'linear',
             zIndex:1,
             marker: {
-              radius: (chartTheme&&chartTheme.lineOptionList[index].radius)||5,
+              radius: (chartTheme&&chartTheme.lineOptionList[lineIndex].radius)||5,
             },
             visible: true
         }
@@ -1171,16 +1180,17 @@ 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)
-
+    // 图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
+    const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
     let serie_item = {
       data: filterData,
-      type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
-      dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
+      type: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineType) || 'spline',
+      dashStyle: (chartTheme&&chartTheme.lineOptionList[lineIndex].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: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth) || 3,
       marker: {
         enabled: false
       }
@@ -1342,15 +1352,17 @@ const initRelevanceChartData=(data)=>{
   //处理series
   let seriesData:any[]=[]
   data.YDataList.forEach((item:any,index:number)=>{
+    // 图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
+    const lineIndex = chartTheme ? index%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: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineType) || 'spline',
+      dashStyle: (chartTheme&&chartTheme.lineOptionList[lineIndex].dashStyle)||'Solid',
       yAxis: 0,
       name: language.value=='zh'?item.Name:item.NameEn||item.Name,
       color: item.Color,
       chartType: 'linear',
-      lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 3,
+      lineWidth: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth) || 3,
       marker: {
         enabled: false
       }
@@ -1449,15 +1461,16 @@ const setStatisticFrequency = () => {
       max: index===0? Number(LeftMaxValue):Number(RightMaxValue),
       tickWidth: 1,
     }
-
+    // 图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
+    const lineIndex = chartTheme ? index%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: (chartTheme&&chartTheme.lineOptionList[lineIndex].dashStyle)||'Solid',
+      type: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineType) || 'spline',
       yAxis: index,
       name: language.value === 'zh' ? item.Name : item.NameEn,
       color: item.Color,
-      lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth)||3,
+      lineWidth: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth)||3,
       chartType: 'linear',
       zIndex:1
     }
@@ -1729,15 +1742,17 @@ const setRadarChart = () => {
     //系列
     let series:any[] = [];
     YDataList.forEach((item,index) => {
+      // 图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
+      const lineIndex = chartTheme ? index%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: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineType) || 'line',
+        dashStyle: (chartTheme&&chartTheme.lineOptionList[lineIndex].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: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth) || 1,
         chartType: 'linear'
       };
       series.push(serie_item)