修复兼容eta1.9.0图表配置优化需求

src/hooks/chart/config.js

@@ -27,6 +27,9 @@ export const chartDefaultOpts={
 		series: {
 			turboThreshold: 0, //不限制数据点个数 
 			boostThreshold:0,
+			dataGrouping: {
+        enabled: false,
+      },//取消数据大自动数据合并
 			animation: {
 				duration: 1000
 			}

src/hooks/chart/render.js

@@ -51,6 +51,9 @@ const axisLimitState = reactive({//极值数据
 let useSelfLimit = false
 let isUseSelfLimit = ref(false)
 
+const screen = ref(document.body.clientWidth < 1200 ? 'phone' : 'pc');
+// webcomponent的EtaChart.ce.vue文件用到了这里的逻辑
+// 有修改了 chartRender,setLimitData 这俩方法的，需要重新编辑下webcomponent（npm run build.lib），然后替换掉report项目的对应文件eta_comp.js
 export function useChartRender(){
     return {
         options,
@@ -105,7 +108,7 @@ export function chartRender({data,renderId,lang='zh',changeLangIsCheck,showChart
     chartData.value=data
    /*  useSelfLimit = ['/myETA/chartdetail','/chartETA/chartdetail'].includes(window.location.pathname) */
    useSelfLimit = shouldUseSelfLimit
-    if(data.ChartInfo.Source===1){
+    if([1,11].includes(data.ChartInfo.Source)){
         const chartSetMap = {
             1: setSplineOpt,
             2: setSeasonOpt,
@@ -151,6 +154,7 @@ export function chartRender({data,renderId,lang='zh',changeLangIsCheck,showChart
     options.value={...chartDefaultOpts,...themeOptions, ...chartOpt}
     // 设置图标题
     setChartTitle(showChartTitle)
+    
     // 设置语言
     setChartLang(changeLangIsCheck)
     
@@ -168,7 +172,8 @@ export function chartRender({data,renderId,lang='zh',changeLangIsCheck,showChart
 function setThemeOptions() {
     if(!chartData.value.ChartInfo.ChartThemeStyle) return {}
 
-    let chartTheme = JSON.parse(chartData.value.ChartInfo.ChartThemeStyle)		
+    let chartTheme = JSON.parse(chartData.value.ChartInfo.ChartThemeStyle)
+
     return {
         legend: {
             ...chartDefaultOpts.legend,
@@ -311,16 +316,14 @@ function getSeasonPredictParams (timestamp){
 }
 
 // 查询范围为1年内 x轴显示为月/日 否则默认年/月
-function xTimeDiffer(minTime,maxTime){
+function xTimeDiffer(minTime,maxTime,dateType){
     //年限差
     let year_differ=moment(maxTime).diff(moment(minTime),'years',true)
     // console.log('年限差',year_differ)
-    if (year_differ<=1) {
-        // console.log('true');
-        return true;
+    if ([5, 6].includes(dateType) && year_differ <= 1) {
+        return true
     } else {
-        // console.log('false');
-        return false;
+        return false
     }
 }
 
@@ -430,9 +433,9 @@ function setChartLang(changeLangIsCheck){
         // 散点图
         if(ChartType == 5){
             options.value.yAxis.title.text = LangType.value == 'zh' ? options.value.yAxis.title.textZh : options.value.yAxis.title.textEn;
-            options.value.yAxis.title.style = LangType.value == 'zh' ? {} : options.value.yAxis.title.styleEn;
+            // options.value.yAxis.title.style = LangType.value == 'zh' ? {} : options.value.yAxis.title.styleEn;
             options.value.xAxis.title.text = LangType.value == 'zh' ? options.value.xAxis.title.textZh : options.value.xAxis.title.textEn
-            options.value.xAxis.title.style = LangType.value == 'zh' ? {} : options.value.xAxis.title.styleEn;
+            // options.value.xAxis.title.style = LangType.value == 'zh' ? {} : options.value.xAxis.title.styleEn;
             options.value.series.forEach(item => {
                 item.name = LangType.value == 'zh' ? item.nameZh : item.nameEn;
             });
@@ -441,7 +444,7 @@ function setChartLang(changeLangIsCheck){
             // 单位
             options.value.yAxis.forEach(item => {
                 item.title.text = LangType.value == 'zh' ? item.title.textZh : item.title.textEn;
-                item.title.style = LangType.value == 'zh' ? {} : (item.title.styleEn || {})
+                // item.title.style = LangType.value == 'zh' ? {} : (item.title.styleEn || {})
             });
             // 图例  名称
             if(ChartType != 2){
@@ -455,7 +458,7 @@ function setChartLang(changeLangIsCheck){
             //截面散点 x轴标题
             if(ChartType === 10){
                 options.value.xAxis.title.text = LangType.value == 'zh' ? options.value.xAxis.title.textZh : options.value.xAxis.title.textEn;
-                options.value.xAxis.title.style = LangType.value == 'zh' ? {} : options.value.xAxis.title.styleEn;
+                // options.value.xAxis.title.style = LangType.value == 'zh' ? {} : options.value.xAxis.title.styleEn;
                 options.value.tooltip.formatter = LangType.value == 'zh' ? options.value.tooltip.formatterCh : options.value.tooltip.formatterEn;
                 options.value.series.forEach(item => {
                     if(!item.linkedTo) {
@@ -471,7 +474,7 @@ function setChartLang(changeLangIsCheck){
             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
+                ? chartData.value.EdbInfoList.find(edb => edb.EdbInfoId===_).EdbAliasName || chartData.value.EdbInfoList.find(edb => edb.EdbInfoId===_).EdbName
                 : chartData.value.EdbInfoList.find(edb => edb.EdbInfoId===_).EdbNameEn)
             }
         }
@@ -561,14 +564,14 @@ function setStatisticFrequency(e){
 
       let series_item = {
         data: item.Value.map(_ =>[_.X,_.Y]),
-        dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
-        type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
+        dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
+        type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
         yAxis: index,
         name: item.Name,
         nameZh: item.Name,
         nameEn: item.NameEn||item.Name,
         color: item.Color,
-        lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth)||3,
+        lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth)||3,
         chartType: 'linear',
         zIndex:1
       }
@@ -651,17 +654,23 @@ function setSplineOpt(e){
             dataGrouping:{
                 enabled:false
             },
-            type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
-            dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
+            type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
+            dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
             yAxis:index,
             name:temName,
             nameZh:temName,
             nameEn:temNameEN,
             color: item.ChartColor,
-            lineWidth: Number(item.ChartWidth),
+            lineWidth: Number(item.ChartWidth)||(chartTheme&&chartTheme.lineOptionList[index].lineWidth)||1,
             visible:true,
             LatestDate:item.LatestDate,
             LatestValue:item.LatestValue,
+            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 || [];
@@ -724,7 +733,7 @@ function setSplineOpt(e){
                 reserveSpace: false,
                 style:{
                     ...chartTheme&&chartTheme.yAxisOptions.style
-                },
+                }
             },
             opposite: [0,2].includes(item.IsAxis),
             reversed: item.IsOrder,
@@ -736,7 +745,6 @@ function setSplineOpt(e){
             plotLines: setAxisPlotLines(item.IsAxis)
         }
         yAxis.push(yItem)
-        
         if(item.DataList.length>0){
             minAndMaxTimeTemArr.push(item.DataList[0].DataTimestamp)
             minAndMaxTimeTemArr.push(item.DataList[item.DataList.length-1].DataTimestamp)
@@ -751,7 +759,8 @@ function setSplineOpt(e){
     let maxTime=Math.max.apply(null,minAndMaxTimeTemArr)
 
 
-    const isLessThanOneYear = xTimeDiffer(minTime,maxTime)
+    const isLessThanOneYear = xTimeDiffer(minTime,maxTime,e.ChartInfo.DateType)
+
     xAxis={
         ...basicXAxis,
         labels: {
@@ -764,7 +773,7 @@ function setSplineOpt(e){
                 ...chartTheme&&chartTheme.xAxisOptions.style
             }
         },
-        tickInterval:((maxTime-minTime)/6)/(24*3600*1000)>30?(maxTime-minTime)/6:24*3600*1000*30,
+        tickInterval:screen.value === 'phone'?((maxTime-minTime)/6)/(24*3600*1000)>30?(maxTime-minTime)/6:24*3600*1000*30:undefined,
         plotBands: setAxisPlotAreas(3,'datetime'),
         plotLines: setAxisPlotLines(3,'datetime')
     }
@@ -800,7 +809,6 @@ function setSplineOpt(e){
             }
         }
     })
-
     return {
         series,
         xAxis:[xAxis],
@@ -841,13 +849,19 @@ function setSeasonOpt(e){
                 dataGrouping:{
                     enabled:false
                 },
-                type: (chartTheme&&chartTheme.lineOptions.lineType) || data.ChartStyle,
-                dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
+                type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || data.ChartStyle,
+                dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
                 yAxis:0,
                 name:item.ChartLegend,
-                lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 1,
+                lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 1,
                 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||[]
@@ -948,7 +962,7 @@ function setSeasonOpt(e){
                 ...chartTheme&&chartTheme.xAxisOptions.style
             }
         },
-        tickInterval:24*3600*1000*60,//季节图
+        tickInterval:screen.value === 'phone'?24*3600*1000*60:undefined,//季节图
         plotBands: setAxisPlotAreas(3,'datetime'),
         plotLines: setAxisPlotLines(3,'datetime')
     }
@@ -1164,7 +1178,7 @@ function setStackOrCombinChart(e){
     let minTime=Math.min.apply(null,minAndMaxTimeTemArr)
     let maxTime=Math.max.apply(null,minAndMaxTimeTemArr)
 
-    const isLessThanOneYear = xTimeDiffer(minTime,maxTime)
+    const isLessThanOneYear = xTimeDiffer(minTime,maxTime,e.ChartInfo.DateType)
     xAxis={
         ...basicXAxis,
         labels: {
@@ -1177,7 +1191,7 @@ function setStackOrCombinChart(e){
                 ...chartTheme&&chartTheme.xAxisOptions.style
             }
         },
-        tickInterval:((maxTime-minTime)/6)/(24*3600*1000)>30?(maxTime-minTime)/6:24*3600*1000*30,
+        tickInterval:screen.value === 'phone'?((maxTime-minTime)/6)/(24*3600*1000)>30?(maxTime-minTime)/6:24*3600*1000*30:undefined,
         plotBands: setAxisPlotAreas(3,'datetime'),
         plotLines: setAxisPlotLines(3,'datetime')
     }
@@ -1369,7 +1383,7 @@ function setScatterOptions(data){
         visible:true,
         chartType: 'linear',
         marker: {
-          radius: (chartTheme&&chartTheme.lineOptions.radius)||5,
+          radius: (chartTheme&&chartTheme.lineOptionList[0].radius)||5,
         },
     }
     real_data.forEach(_ => {
@@ -1436,17 +1450,20 @@ function setBarChart (e){
     }
 
     const { leftMin,leftMax } = axisLimitState;
+
+    const textZh = e.ChartInfo?.Unit
+    const textEn = e.ChartInfo?.UnitEn||e.ChartInfo?.Unit
     // console.log(leftMin,leftMax)
     //y轴
     let yAxis = {
         ...basicYAxis,
         title: {
-            text:  ``,
-            textZh: '',
-            textEn: '',
+            text:  textZh,
+            textZh: textZh,
+            textEn: textEn,
             align: 'high',
             rotation: 0,
-            y: -15,
+            y: -12,
             x:0,
             textAlign: 'left',
             reserveSpace: false,
@@ -1586,21 +1603,21 @@ const setCommodityChart = (leftMin,leftMax) => {
     }
 
     //数据列
-    data.forEach(item => {
+    data.forEach((item,index) => {
         //处理首或/尾全是无效数据的以null填充
         let filterData = filterInvalidData(item)
 
         let serie_item = {
             data: filterData,
-            type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
-            dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
+            type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
+            dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
             yAxis: 0,
             name: item.Name,
             nameZh: item.Name,
             nameEn: item.NameEn,
             color: item.Color,
             chartType: 'linear',
-            lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 3,
+            lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 3,
             visible: true,
             marker: {
                 enabled: false
@@ -1784,18 +1801,18 @@ function initRelevanceChart(data){
 
     //处理series
     let seriesData=[]
-    data.YDataList.forEach(item=>{
+    data.YDataList.forEach((item,index)=>{
         let serie_item = {
           data: item.Value,
-          type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
-          dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
+          type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
+          dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
           yAxis: 0,
           name: data.ChartInfo.ChartName,
           nameZh: data.ChartInfo.ChartName,
           nameEn: data.ChartInfo.ChartNameEn,
-          color: '#00f',
+          color: item.Color,
           chartType: 'linear',
-          lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 3,
+          lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 3,
           visible:true,
           marker: {
             enabled: false
@@ -1927,7 +1944,7 @@ function setSectionScatterChart({DataResp,ChartInfo}) {
 
     //数据列
     let series = [];
-    DataList.forEach(item => {
+    DataList.forEach((item,index) => {
         //数据列
         let series_item = {
             data: [],
@@ -1941,7 +1958,7 @@ function setSectionScatterChart({DataResp,ChartInfo}) {
             zIndex:1,
             visible: true,
             marker: {
-                radius: (chartTheme&&chartTheme.lineOptions.radius)||5,
+                radius: (chartTheme&&chartTheme.lineOptionList[index].radius)||5,
             },
         }
         item.EdbInfoList.forEach(_ => {
@@ -1970,7 +1987,7 @@ function setSectionScatterChart({DataResp,ChartInfo}) {
                     dataLabels: {
                     enabled: item.ShowRSquare || item.ShowFitEquation,
                     align: 'left',
-                    color: '#666',
+                    color: item.Color,
                     x: 20,
                     y: 30,
                     zIndex: 9,
@@ -2212,7 +2229,6 @@ function setRadarChart({DataResp,EdbInfoList,ChartInfo}) {
     const { YDataList,XEdbIdValue } = DataResp;
 
     let XDataList = EdbInfoList.filter(_ => XEdbIdValue.includes(_.EdbInfoId));
-
     axisLimitState.hasLeftAxis=true
     axisLimitState.leftMin=Number(ChartInfo.LeftMin)
     axisLimitState.leftMax=Number(ChartInfo.LeftMax)
@@ -2234,7 +2250,6 @@ function setRadarChart({DataResp,EdbInfoList,ChartInfo}) {
         }
       }
     }
-
     //y轴
     let yAxis = [{
       gridLineInterpolation: 'polygon',
@@ -2270,18 +2285,18 @@ function setRadarChart({DataResp,EdbInfoList,ChartInfo}) {
 
     //系列
     let series = [];
-    YDataList.forEach(item => {
+    YDataList.forEach((item,index) => {
       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',
+        type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'line',
+        dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
         yAxis: 0,
         color: item.Color,
-        lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 1,
+        lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 1,
         chartType: 'linear'
       };
       series.push(serie_item)