图表数量超过10条不显示问题

src/views/hzyb/chart/Detail.vue

@@ -521,17 +521,18 @@ const initRelevanceChart=(data)=>{
     //处理series
     let seriesData=[]
     data.YDataList.forEach((item,index)=>{
+        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: data.ChartInfo.ChartName,
           nameCh: data.ChartInfo.ChartName,
           nameEn: data.ChartInfo.ChartName,
           color: '#00f',
           chartType: 'linear',
-          lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 3,
+          lineWidth: (noExceed&&chartTheme.lineOptionList[index].lineWidth) || 3,
           visible:true,
           marker: {
             enabled: false
@@ -752,16 +753,16 @@ const setCommodityChart = () => {
     data.forEach((item,index) => {
         //处理首或/尾全是无效数据的以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: item.Name,
             color: item.Color,
             chartType: 'linear',
-            lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 3,
+            lineWidth: (noExceed&&chartTheme.lineOptionList[index].lineWidth) || 3,
             visible: true,
             marker: {
                 enabled: false
@@ -903,6 +904,7 @@ const setSectionScatterChart = () => {
     //数据列
     let series = [];
     DataList.forEach((item,index) => {
+        const noExceed = chartTheme && chartTheme.lineOptionList.length > index //线条数没超过图表可配置的线条数
         //数据列
         let series_item = {
             data: [],
@@ -913,7 +915,7 @@ const setSectionScatterChart = () => {
             chartType: 'linear',
             zIndex:1,
             marker: {
-                radius: (chartTheme&&chartTheme.lineOptionList[index].radius)||5,
+                radius: (noExceed&&chartTheme.lineOptionList[index].radius)||5,
             },
             visible: true
         }
@@ -1053,15 +1055,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: item.Name,
         color: item.Color,
-        lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth)||3,
+        lineWidth: (noExceed&&chartTheme.lineOptionList[index].lineWidth)||3,
         chartType: 'linear',
         visible: true,
         zIndex:1
@@ -1303,19 +1305,20 @@ const setRadarChart = () => {
     //系列
     let series = [];
     YDataList.forEach((item,index) => {
-      let serie_item = {
-        data: item.Value,
-        pointPlacement: 'on',
-        type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'line',
-        dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
-        yAxis: 0,
-        name: item.Name || item.Date,
-        color: item.Color,
-        lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 1,
-        chartType: 'linear',
-        visible: true
-      };
-      series.push(serie_item)
+        const noExceed = chartTheme && chartTheme.lineOptionList.length > index //线条数没超过图表可配置的线条数
+        let serie_item = {
+            data: item.Value,
+            pointPlacement: 'on',
+            type: (noExceed&&chartTheme.lineOptionList[index].lineType) || 'line',
+            dashStyle: (noExceed&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
+            yAxis: 0,
+            name: item.Name || item.Date,
+            color: item.Color,
+            lineWidth: (noExceed&&chartTheme.lineOptionList[index].lineWidth) || 1,
+            chartType: 'linear',
+            visible: true
+        };
+        series.push(serie_item)
     })
 
     chartData.value = {
@@ -1413,22 +1416,22 @@ const setSplineOpt=(data)=>{
 
         //预测指标配置
         let predict_params = item.EdbInfoCategoryType === 1 ? getPredictParams(item) : {};
-
+        const noExceed = chartTheme && chartTheme.lineOptionList.length > index //线条数没超过图表可配置的线条数
         let seriesItemObj={
             data:[],
             dataGrouping:{
                 enabled:false
             },
-            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:index,
             name:temName,
             color: item.ChartColor,
-            lineWidth: Number(item.ChartWidth),
+            lineWidth: Number(item.ChartWidth)|| (noExceed&&chartTheme.lineOptionList[index].lineWidth)||1,
             visible:true,
             LatestDate:item.LatestDate,
             LatestValue:item.LatestValue,
-            marker: chartTheme && chartTheme.lineOptionList[index].dataMark && chartTheme.lineOptionList[index].dataMark!='none'?{
+            marker: noExceed && chartTheme.lineOptionList[index].dataMark && chartTheme.lineOptionList[index].dataMark!='none'?{
                 enabled:true,
                 symbol: chartTheme.lineOptionList[index].markType || 'circle',
                 fillColor:chartTheme.lineOptionList[index].markColor,
@@ -1832,6 +1835,7 @@ const setSeasonOpt=(data)=>{
     const chartTheme =  resData.value.ChartInfo.ChartThemeStyle ? JSON.parse(resData.value.ChartInfo.ChartThemeStyle) : null;
 
     const colorsArr=chartTheme&&chartTheme.colorsOptions.reverse();
+
     let series=[],yAxis=[]
     //农历默认选中一年数据并隐藏按钮  公历显示全部数据
     // let rangeSelector={}
@@ -1843,82 +1847,84 @@ const setSeasonOpt=(data)=>{
                             data.DataList.slice(1,data.DataList.length)||[]:
                             data.DataList
 
-        chartDataHandle.forEach((item,index)=>{
-             //预测指标配置
-            let predict_params =  data.EdbInfoCategoryType === 1 ? getSeasonPredictParams(item.CuttingDataTimestamp) : {};
-
-            let seriesItem={
-                data:[],
-                dataGrouping:{
-                    enabled:false
-                },
-                type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || data.ChartStyle,
-                dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
-                yAxis:0,
-                name:item.ChartLegend,
-                color:colorsArr.slice(-chartDataHandle.length)[index],                
-                visible:true,
-                marker: chartTheme && chartTheme.lineOptionList[index].dataMark && chartTheme.lineOptionList[index].dataMark!='none'?{
-                    enabled:true,
-                    symbol: chartTheme.lineOptionList[index].markType || 'circle',
-                    fillColor:chartTheme.lineOptionList[index].markColor,
-                    radius: chartTheme.lineOptionList[index].markSize
-                }:{},
-                ...predict_params
-            }
-            item.DataList=item.DataList||[]
-            for(let i of item.DataList){
-                seriesItem.data.push([i.DataTimestamp, i.Value])
-            }
-            series.push(seriesItem)
+    // 跟颜色对应
+    chartTheme && (chartTheme.lineOptionList=chartTheme.lineOptionList.reverse().slice(-chartDataHandle.length))
+    chartDataHandle.forEach((item,index)=>{
+            //预测指标配置
+        let predict_params =  data.EdbInfoCategoryType === 1 ? getSeasonPredictParams(item.CuttingDataTimestamp) : {};
+        const noExceed = chartTheme && chartTheme.lineOptionList.length > index //线条数没超过图表可配置的线条数
+        let seriesItem={
+            data:[],
+            dataGrouping:{
+                enabled:false
+            },
+            type: (noExceed&&chartTheme.lineOptionList[index].lineType) || data.ChartStyle,
+            dashStyle: (noExceed&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
+            yAxis:0,
+            name:item.ChartLegend,
+            color:colorsArr.slice(-chartDataHandle.length)[index%(colorsArr.length)],                
+            visible:true,
+            marker: noExceed && chartTheme.lineOptionList[index].dataMark && chartTheme.lineOptionList[index].dataMark!='none'?{
+                enabled:true,
+                symbol: chartTheme.lineOptionList[index].markType || 'circle',
+                fillColor:chartTheme.lineOptionList[index].markColor,
+                radius: chartTheme.lineOptionList[index].markSize
+            }:{},
+            ...predict_params
+        }
+        item.DataList=item.DataList||[]
+        for(let i of item.DataList){
+            seriesItem.data.push([i.DataTimestamp, i.Value])
+        }
+        series.push(seriesItem)
 
-        })
+    })
 
-        yAxis=[{
-            IsAxis:data.IsAxis,
-            labels: {
-                // formatter: function (ctx) {
-                //     return ctx.value;
-                // },
-                align: 'center',
-                y:5,
-                style: {
-                    ...chartTheme&&chartTheme.yAxisOptions.style
-                }
-            },
-            title: {
-                text:  `${data.Unit}`,
-                align: 'high',
-                rotation: 0,
-                y: -15,
-                x: 0,
-                textAlign: 'left',
-                reserveSpace: false,
-                style:{
-                    ...chartTheme&&chartTheme.yAxisOptions.style
-                },
+    yAxis=[{
+        IsAxis:data.IsAxis,
+        labels: {
+            // formatter: function (ctx) {
+            //     return ctx.value;
+            // },
+            align: 'center',
+            y:5,
+            style: {
+                ...chartTheme&&chartTheme.yAxisOptions.style
+            }
+        },
+        title: {
+            text:  `${data.Unit}`,
+            align: 'high',
+            rotation: 0,
+            y: -15,
+            x: 0,
+            textAlign: 'left',
+            reserveSpace: false,
+            style:{
+                ...chartTheme&&chartTheme.yAxisOptions.style
             },
-            max: Number(data.MaxData),
-            min: Number(data.MinData),
-            plotBands: setAxisPlotAreas(1),
-            plotLines: setAxisPlotLines(1),
-            lineWidth: 1,
-            lineColor: '#bfbfbf',
-            tickColor: '#bfbfbf',
-            offset: 0,
-            opposite: false,
-            reversed: false,
-            visible: true,
-            gridLineWidth: 0,
-            tickWidth: 1,
-            tickLength:5,
-            tickPosition: 'inside',
-            endOnTick: false,
-            startOnTick: false,
-            showLastLabel: true, //显示最后刻度值
-            tickPixelInterval: 50,
-            // chartEdbInfo:item//指标数据
-        }]
+        },
+        max: Number(data.MaxData),
+        min: Number(data.MinData),
+        plotBands: setAxisPlotAreas(1),
+        plotLines: setAxisPlotLines(1),
+        lineWidth: 1,
+        lineColor: '#bfbfbf',
+        tickColor: '#bfbfbf',
+        offset: 0,
+        opposite: false,
+        reversed: false,
+        visible: true,
+        gridLineWidth: 0,
+        tickWidth: 1,
+        tickLength:5,
+        tickPosition: 'inside',
+        endOnTick: false,
+        startOnTick: false,
+        showLastLabel: true, //显示最后刻度值
+        tickPixelInterval: 50,
+        // chartEdbInfo:item//指标数据
+    }]
 
     chartData.value.series=series
     chartData.value.yAxis=yAxis

src/views/hzyb/hooks/chartBase.js

@@ -222,14 +222,14 @@ export const setSplineOpt=(data,resData)=>{
 
         //预测指标配置
         let predict_params = item.EdbInfoCategoryType === 1 ? getPredictParams(item) : {};
-
+        const noExceed = chartTheme && chartTheme.lineOptionList.length > index //线条数没超过图表可配置的线条数
         let seriesItemObj={
             data:[],
             dataGrouping:{
                 enabled:false
             },
-            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:index,
             name:temName,
             color: item.ChartColor,