同步一波eta_chart项目的逻辑

src/CustomElement/EtaChart.ce.vue

@@ -3,7 +3,7 @@ import {nextTick,ref} from 'vue'
 import {useChartRender} from '@/hooks/chart/render'
 import {chartInfoByCode} from './api/getData.js'
 import {parseQueryString} from "./utils/index"
-const {chartRender}=useChartRender()
+const {chartRender,setLimitData,isUseSelfLimit}=useChartRender()
 
 const props=defineProps({
     src:'',
@@ -36,19 +36,21 @@ async function getChartData(){
 
         setLangFromEnReport();
         haveData.value = true;
+        //仅ETA图库图表需要初始化上下限
+        if(res.Data.ChartInfo.Source===1&&![7,10,11].includes(res.Data.ChartInfo.ChartType)){
+            isUseSelfLimit.value = true
+            setLimitData(res.Data)
+        }else{
+            isUseSelfLimit.value = false
+        }
         nextTick(()=>{
             chartRender({
-                data:{
-                    ...res.Data,
-                    ChartInfo:{
-                        ...res.Data.ChartInfo,
-                        Calendar:'公历'
-                    },
-                },
+                data:res.Data,
                 renderId:chartContentEl.value,
                 lang:params.language,
                 changeLangIsCheck:false,
-                showChartTitle:false
+                showChartTitle:false,
+                shouldUseSelfLimit:true
             })
             res.Data.WaterMark&&(markDom.value.style.backgroundImage = `url(${res.Data.WaterMark})`)
         })
@@ -173,6 +175,15 @@ div{
         color: #777;
         text-align: center;
     }
+	@media (max-width: 979px) {
+		.mark {
+			width: 242PX;
+			height: 25PX;
+		}
+		.notfound {
+			font-size: 14PX;
+		}
+	}
     .chart-bottom-info{
         padding-right: 10PX;
         padding-bottom: 0;

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,
@@ -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)
             }
         }
@@ -724,7 +727,7 @@ function setSplineOpt(e){
                 reserveSpace: false,
                 style:{
                     ...chartTheme&&chartTheme.yAxisOptions.style
-                },
+                }
             },
             opposite: [0,2].includes(item.IsAxis),
             reversed: item.IsOrder,
@@ -736,7 +739,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 +753,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 +767,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 +803,6 @@ function setSplineOpt(e){
             }
         }
     })
-
     return {
         series,
         xAxis:[xAxis],
@@ -948,7 +950,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 +1166,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 +1179,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')
     }
@@ -1436,17 +1438,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,
@@ -1793,7 +1798,7 @@ function initRelevanceChart(data){
           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,
           visible:true,
@@ -1970,7 +1975,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 +2217,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 +2238,6 @@ function setRadarChart({DataResp,EdbInfoList,ChartInfo}) {
         }
       }
     }
-
     //y轴
     let yAxis = [{
       gridLineInterpolation: 'polygon',