英文图表兼容

.env.test

@@ -1,5 +1,5 @@
 # 接口地址
-VITE_APP_API_URL="https://rddptest.hzinsights.com/adminapi"
+VITE_APP_API_URL="http://8.136.199.33:8610/v1"
 # 路由根地址
 VITE_APP_BASE_URL="/"
 # 打包输入文件名

.gitignore

@@ -12,6 +12,7 @@ dist
 dist-ssr
 *.local
 package-lock.json
+hongze_ETA_mobile
 
 # Editor directories and files
 .vscode/*

README.md

@@ -1,3 +1,3 @@
 # 移动ETA
 1. 图片等静态资源如果要放在oss中请放入 oss://hzchart/static/ETA_mobile/ 目录下。
-2. 
+2. 测试地址：http://8.136.199.33:8611/tabbar/home

src/hooks/chart/config.js

@@ -150,3 +150,21 @@ export const basicXAxis={
     xDateFormat:'%Y-%m-%d'
 }
 
+//领先频度对应英文
+export const leadUnitEnMap={
+	'年': 'Y',
+    '季': 'Q',
+    '月': 'M',
+    '周': 'W',
+    '天': 'D',
+}
+
+//相关性图表单位英文Map
+export const relevanceUnitEnMap={
+	'年': 'Year',
+    '季': 'Season',
+    '月': 'Month',
+    '周': 'Week',
+    '天': 'Day',
+}
+

src/hooks/chart/render.js

@@ -1,14 +1,14 @@
 // 图渲染逻辑模块
 
-import {onMounted,ref} from 'vue'
-import {chartDefaultOpts,scatterXAxis,basicYAxis,basicXAxis} from './config'
+import {onMounted,ref,nextTick} from 'vue'
+import {chartDefaultOpts,scatterXAxis,basicYAxis,basicXAxis,leadUnitEnMap,relevanceUnitEnMap} from './config'
 import Highcharts from 'highcharts/highstock';
 import HighchartszhCN  from './highcahrts-zh_CN.js'
 import moment from 'moment'
 import _ from 'lodash';
 HighchartszhCN(Highcharts)
 
-let LangType='zh'//当前图表显示的语言版本
+
 
 /**
  * 渲染图方法
@@ -16,10 +16,17 @@ let LangType='zh'//当前图表显示的语言版本
  * @param renderId 图表在dom中的id
  * @param lang 图表显示为中文/英文 默认 zh中文 en英文
  */
+let ChartIns=null
+let chartData=ref(null)//图的所有数据
+let LangType=ref('zh')//当前图表显示的语言版本
+let RenderDomId=ref('')//图表渲染的domid
+let options=ref(null)
 export function chartRender(data,renderId,lang='zh'){
-    let obj={...chartDefaultOpts}
     let chartOpt={}
-    LangType=lang
+    LangType.value=lang
+    RenderDomId.value=renderId
+    chartData.value=data
+
     if([1,3,4,5,6].includes(data.ChartInfo.ChartType)){
         const chartSetMap = {
             1: setSplineOpt,
@@ -40,13 +47,15 @@ export function chartRender(data,renderId,lang='zh'){
     }else if(data.ChartInfo.ChartType ===10){//截面散点图
         chartOpt=setSectionScatterChart(data);
     }
-    obj={...obj,...chartOpt}
-
+    options.value={...chartDefaultOpts,...chartOpt}
+    // 设置语言
+    setChartLang()
+    // console.log(options.value,RenderDomId.value);
     //stock不支持线形图只支持时间图 某些用chart
     let is_linear = chartOpt.series 
     ? chartOpt.series.every(_ => _.type === 'scatter') || chartOpt.series.some(_ => _.chartType === 'linear')
     : false ;
-    is_linear ?Highcharts.chart(renderId,obj) : Highcharts.stockChart(renderId,obj);
+    is_linear ?ChartIns=Highcharts.chart(RenderDomId.value,options.value) : ChartIns=Highcharts.stockChart(RenderDomId.value,options.value);
 }
 
 
@@ -91,40 +100,61 @@ function xTimeDiffer(minTime,maxTime){
     }
 }
 
-/* 拼接数据列动态name */
-function setDyncmicSerieName (item,dynamic_arr) {
+/* 拼接动态的指标名称小标签 */
+function concatDynamicTag(item,lang){
     const { IsAxis,IsOrder,EdbInfoType,LeadValue,LeadUnit }  = item;
     // IsAxis左轴1 右轴0 2右2轴 
+    //IsOrder正序false 逆序true 
       //IsOrder正序false 逆序true 
-      //EdbInfoType是否是领先指标
-    const axisLabelMap = {
+    //IsOrder正序false 逆序true 
+    //EdbInfoType是否是领先指标
+    const axisLabelMap =lang=='zh'? {
         0: '右轴',
         2: '右2轴'
+    }:{
+        0: 'RHS',
+        2: '2-RHS'
     }
-    const orderLabelMap = {
+    const orderLabelMap =lang=='zh'? {
         1: '逆序'
+    }:{
+        1: 'REV'
     }
-    const edbInfoMap = {
+    const edbInfoMap =lang=='zh'? {
         0: '领先'
+    }:{
+        0: 'Lead'
     }
 
+    //英文领先单位转换
+    const leadUnit = lang==='zh' ? LeadUnit : leadUnitEnMap[LeadUnit];
+
     let axis_tag = axisLabelMap[IsAxis] || '';
       //逆序拼接
     let order_tag = orderLabelMap[Number(IsOrder)] ? `${axis_tag ? '，': ''}${orderLabelMap[Number(IsOrder)]}` : ''
       //领先拼接
-    let edb_tag = edbInfoMap[EdbInfoType] ? `${(axis_tag||order_tag) ? '，' : '' }${edbInfoMap[EdbInfoType]}${LeadValue}${LeadUnit}` : '';
+    let edb_tag = edbInfoMap[EdbInfoType] ? `${(axis_tag||order_tag) ? '，' : '' }${edbInfoMap[EdbInfoType]}${LeadValue}${leadUnit}` : '';
 
     let dynamic_tag = (axis_tag || order_tag || edb_tag) ? `(${axis_tag}${order_tag}${edb_tag})` : '';
 
-    let temName = dynamic_arr.length > 1
-                ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
-                : `${item.EdbName}${dynamic_tag}`
+    return dynamic_tag
+}
+/* 拼接数据列动态name */
+function setDyncmicSerieName (item,dynamic_arr,lang='zh') {
+    let temName =''
+    if(lang=='zh'){
+        temName= dynamic_arr.length > 1
+            ? `${item.EdbName}(${item.SourceName})${concatDynamicTag(item,'zh')}`
+            : `${item.EdbName}${concatDynamicTag(item,'zh')}`
+    }else{
+        temName=item.EdbNameEn?`${item.EdbNameEn}${concatDynamicTag(item,'en')}`:''
+    }
+
     if(temName.length>20){
         let temArr=[]
         for(let i=0;i<temName.length/20;i++){
             temArr.push(temName.slice(i*20,i*20+20))
         }
-        // console.log(temArr);
         temName=temArr.join('<br>')
     }
 
@@ -143,6 +173,62 @@ function changeEdbOrder (data){
     return [left_edbs,right_edbs,right_two_edbs].flat(Infinity);
 }
 
+// 设置图表显示的语言
+function setChartLang(){
+    // console.log(options.value);
+    // console.log(LangType.value)
+    const {ChartType,Source} = chartData.value.ChartInfo
+    if(Source==1){
+        // 散点图
+        if(ChartType == 5){
+            options.value.yAxis.title.text = LangType.value == 'zh' ? options.value.yAxis.title.textCh : options.value.yAxis.title.textEn;
+            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.textCh : options.value.xAxis.title.textEn
+            options.value.xAxis.title.style = LangType.value == 'zh' ? {} : options.value.xAxis.title.styleEn;
+            options.value.series.forEach(item => {
+                item.name = LangType.value == 'zh' ? item.nameCh : item.nameEn;
+            });
+            options.value.tooltip.formatter = LangType.value == 'zh' ? options.value.tooltip.formatterCh : options.value.tooltip.formatterEn;
+        }else{
+            // 单位
+            options.value.yAxis.forEach(item => {
+                item.title.text = LangType.value == 'zh' ? item.title.textCh : item.title.textEn;
+                item.title.style = LangType.value == 'zh' ? {} : (item.title.styleEn || {})
+            });
+            // 图例  名称
+            if(ChartType != 2){
+                // 季节图 不更改图例名称
+                options.value.series.forEach(item => {
+                    item.name = LangType.value == 'zh' 
+                        ? item.nameCh 
+                        : (item.nameEn!='无英文名称'?item.nameEn:`<span style="color:#999">${item.nameEn}</span>`)
+                });
+            }
+            //截面散点 x轴标题
+            if(ChartType === 10){
+                options.value.xAxis.title.text = LangType.value == 'zh' ? options.value.xAxis.title.textCh : options.value.xAxis.title.textEn;
+                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) {
+                        item.data.forEach(point => {
+                            point.dataLabels.format = LangType.value == 'zh' ? point.dataLabels.formatCh : (point.dataLabels.formatEn||'无英文标签');
+                            point.dataLabels.color = (LangType.value==='en' && !point.dataLabels.formatEn) ? '#999' : '#333'
+                        })
+                    }
+                });
+            } 
+
+            //柱形图额外设置x轴中英文
+            if(ChartType ===7){
+                //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===_).EdbNameEn)
+            }
+        }
+    }
+}
 
 //曲线图
 function setSplineOpt(e){
@@ -173,8 +259,8 @@ function setSplineOpt(e){
           (item) => dynamic_title === item.EdbName
         );
         //处理数据列name
-        let temName= setDyncmicSerieName(item,dynamic_arr)  
-
+        let temName= setDyncmicSerieName(item,dynamic_arr,'zh')  
+        let temNameEN=setDyncmicSerieName(item,dynamic_arr,'en')  
         //预测指标配置
         let predict_params = item.EdbInfoCategoryType === 1 ? getPredictParams(item) : {};
 
@@ -186,6 +272,8 @@ function setSplineOpt(e){
             type: 'spline',
             yAxis:index,
             name:temName,
+            nameZh:temName,
+            nameEn:temNameEN,
             color: item.ChartColor,
             lineWidth: Number(item.ChartWidth),
             visible:true,
@@ -221,6 +309,8 @@ function setSplineOpt(e){
             tickWidth: sameSideIndex !== index ? 0 : 1,
             title: {
                 text:  sameSideIndex !== index ? '' : `${item.Unit}`,
+                textZh:item.Unit,//中文单位
+                textEn:item.Unit?item.UnitEn:'',//英文单位，但如果无中文单位则不显示
                 align: 'high',
                 rotation: 0,
                 y: -15,
@@ -346,6 +436,11 @@ function setSeasonOpt(e){
                 },
                 title: {
                     text:  `${data.Unit}`,
+                    textZh:data.Unit, // 中文
+                    // 中文不存在，无论英文有无都显示空
+                    textEn:data.Unit?data.UnitEn?data.UnitEn:'英文单位':'', // 英文
+                    style:{},
+                    styleEn:data.Unit && (!data.UnitEn)?{cursor:'pointer',color:"#999"}:{cursor:'pointer'}, // 英文样式
                     align: 'high',
                     rotation: 0,
                     y: -15,
@@ -413,6 +508,10 @@ function setSeasonOpt(e){
                 },
                 title: {
                     text:  `${data.Unit}`,
+                    textZh:data.Unit, // 中文
+                    // 中文不存在，无论英文有无都显示空
+                    textEn:data.Unit?data.UnitEn?data.UnitEn:'英文单位':'', // 英文
+                    styleEn:data.Unit && (!data.UnitEn)?{cursor:'pointer',color:"#999"}:{cursor:'pointer'}, // 英文样式
                     align: 'high',
                     rotation: 0,
                     y: -15,
@@ -590,7 +689,8 @@ function setStackOrCombinChart(e){
           (item) => dynamic_title === item.EdbName
         );
         //处理数据列name
-        let temName= setDyncmicSerieName(item,dynamic_arr)  
+        let temName= setDyncmicSerieName(item,dynamic_arr,'zh')
+        let temNameEN=setDyncmicSerieName(item,dynamic_arr,'en')  
 
         //预测指标配置
         let predict_params = item.EdbInfoCategoryType === 1 ? getPredictParams(item) : {};
@@ -603,6 +703,8 @@ function setStackOrCombinChart(e){
             type: chartStyle || item.ChartStyle,
             yAxis:serie_yIndex,
             name:temName,
+            nameZh:temName,
+            nameEn:temNameEN,
             color: item.ChartColor,
             lineWidth: (e.ChartInfo.ChartType === 6 && item.ChartStyle === 'spline') ? Number(item.ChartWidth) : 0,
             fillColor: (e.ChartInfo.ChartType === 3 || (e.ChartInfo.ChartType === 6 && item.ChartStyle === 'areaspline')) ? item.ChartColor : undefined,
@@ -637,7 +739,13 @@ function setStackOrCombinChart(e){
                 y:5,
             },
             title: {
-                text:  sameSideIndex !== index ? '' : `${item.Unit}`,
+                // text:  sameSideIndex !== index ? '' : `${item.Unit}`,
+                text: item.Unit,
+                textZh:item.Unit, // 中文
+                // 中文不存在，无论英文有无都显示空
+                textEn:item.Unit?item.UnitEn?item.UnitEn:'英文单位':'', // 英文
+                style:{},
+                styleEn:item.Unit && (!item.UnitEn)?{cursor:'pointer',color:"#999"}:{cursor:'pointer'}, // 英文样式
                 align: 'high',
                 rotation: 0,
                 y: -15,
@@ -747,6 +855,22 @@ function setScatterOptions(data){
             ${dataList[0].EdbName}: <span style="font-weight: 600">	${this.x}</span><br>
             ${dataList[1].EdbName}: <span style="font-weight: 600">	${this.y}</span>
             `
+        },
+        // 中文
+        formatterCh: function() {
+            return `<strong>${ tmpData_date[this.x+'_'+this.y].length > 4 ? tmpData_date[this.x+'_'+this.y].slice(0,4).join()+'...' : tmpData_date[this.x+'_'+this.y].join() }</strong><br>
+            ${dataList[0].EdbName}: <span style="font-weight: 600">	${this.x}</span><br>
+            ${dataList[1].EdbName}: <span style="font-weight: 600">	${this.y}</span>
+            `
+        },
+        // 英文
+        formatterEn: function() {
+            let str1 = `${dataList[0].EdbNameEn}`
+            let str2 = `${dataList[1].EdbNameEn}`
+            return `<strong>${ tmpData_date[this.x+'_'+this.y].length > 4 ? tmpData_date[this.x+'_'+this.y].slice(0,4).join()+'...' : tmpData_date[this.x+'_'+this.y].join() }</strong><br>
+            ${str1}: <span style="font-weight: 600">	${this.x}</span><br>
+            ${str2}: <span style="font-weight: 600">	${this.y}</span>
+            `
         }
     }
 
@@ -755,6 +879,8 @@ function setScatterOptions(data){
     let yAxis = {
         title: {
             text:  `${dataList[1].Unit}`,
+            textZh:dataList[1].Unit,
+            textEn:dataList[1].Unit?dataList[1].UnitEn:'',
             align: 'high',
             rotation: 0,
             y: -15,
@@ -790,6 +916,8 @@ function setScatterOptions(data){
         data: [],
         type: 'scatter',
         name: `${ChartInfo.ChartName}${IsOrder ? '(逆序)' : ''}`,
+        nameZh:`${ChartInfo.ChartName}${IsOrder ? '(逆序)' : ''}`,
+        nameEn:ChartInfo.ChartNameEn?`${ChartInfo.ChartNameEn}${IsOrder ? '(reverse)' : ''}`:'',
         color: ChartColor,
         visible:true,
         lineWidth: 0
@@ -808,6 +936,8 @@ function setScatterOptions(data){
             ...scatterXAxis,
             title: {
                 text:  `${dataList[0].Unit}`,
+                textZh:dataList[0].Unit,
+                textEn:dataList[0].Unit?dataList[0].UnitEn:'',
                 align: 'high',
                 rotation: 0,
                 x: 0,
@@ -852,6 +982,8 @@ function setBarChart (){
         ...basicYAxis,
         title: {
             text:  ``,
+            textZh: '',
+            textEn: '',
             align: 'high',
             rotation: 0,
             y: -15,
@@ -877,6 +1009,8 @@ function setBarChart (){
             type: 'column',
             yAxis: 0,
             name: item.Name || item.Date,
+            nameZh: item.Name || item.Date,
+            nameEn: item.Date,
             color: item.Color,
             chartType: 'linear',              
             visible:true,
@@ -945,6 +1079,8 @@ const setCommodityChart = (leftMin,leftMax) => {
         ...basicYAxis,
         title: {
             text: commodityEdbList.value[0].Unit,
+            textZh: commodityEdbList.value[0].Unit,
+            textEn: commodityEdbList.value[0].Unit?(commodityEdbList.value[0].UnitEn||'英文单位'):'',
             align: 'high',
             rotation: 0,
             y: -15,
@@ -973,6 +1109,8 @@ const setCommodityChart = (leftMin,leftMax) => {
             type: 'spline',
             yAxis: 0,
             name: item.Name,
+            nameZh: item.Name,
+            nameEn: item.NameEn,
             color: item.Color,
             chartType: 'linear',
             lineWidth: 3,
@@ -1003,6 +1141,38 @@ const setCommodityChart = (leftMin,leftMax) => {
             })
             return str
         },
+        formatterCh: function() {
+            let str = ''; 
+            this.points.forEach(item => {
+              let obj_item = data.find(_ => _.Name === item.series.name);
+              let index = commodityXData.value.findIndex(_ => _.Name === this.x);
+  
+              str+=`<b>${ commodityEdbList.value.find(_ => _.EdbInfoId === obj_item.XEdbInfoIdList[index]).EdbName }</b>`
+  
+              if(!obj_item.NoDataEdbList.includes(obj_item.XEdbInfoIdList[index])) {
+                str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: ${item.y}<br>`
+              }else {
+                str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: 无<br>`
+              }
+            })
+            return str
+          },
+          formatterEn: function() {
+            let str = ''; 
+            this.points.forEach(item => {
+              let obj_item = data.find(_ => _.NameEn === item.series.name);
+              let index = commodityXData.value.findIndex(_ => _.NameEn === this.x);
+  
+              str+=`<b>${ commodityEdbList.value.find(_ => _.EdbInfoId === obj_item.XEdbInfoIdList[index]).EdbNameEn }</b>`
+  
+              if(!obj_item.NoDataEdbList.includes(obj_item.XEdbInfoIdList[index])) {
+                str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: ${item.y}<br>`
+              }else {
+                str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: 无<br>`
+              }
+            })
+            return str
+          },
         shared: true
     }
     // console.log(seriesData);
@@ -1053,7 +1223,9 @@ function initRelevanceChart(data){
         categories: data.XEdbIdValue,
         tickWidth: 1,
         title: {
-          text:  `期数（${data.CorrelationChartInfo.LeadUnit}）`,
+          text: data.ChartInfo.Source===3 ?`期数（${data.CorrelationChartInfo.LeadUnit}）` : null,
+          textZh:data.ChartInfo.Source===3 ? `期数（${data.CorrelationChartInfo.LeadUnit}）`:null,
+          textEn:data.ChartInfo.Source===3 ? `stage（${relevanceUnitEnMap[data.CorrelationChartInfo.LeadUnit]}）`:null,
           align: 'high',
           rotation: 0,
           x: 0,
@@ -1070,7 +1242,7 @@ function initRelevanceChart(data){
         ...basicYAxis,
         title: {
           text: '相关性系数',
-          textCh: '相关性系数',
+          textZh: '相关性系数',
           textEn: 'Correlation coefficient',
           align: 'high',
           rotation: 0,
@@ -1099,8 +1271,8 @@ function initRelevanceChart(data){
           type: 'spline',
           yAxis: 0,
           name: data.ChartInfo.ChartName,
-          nameCh: data.ChartInfo.ChartName,
-          nameEn: data.ChartInfo.ChartName,
+          nameZh: data.ChartInfo.ChartName,
+          nameEn: data.ChartInfo.ChartNameEn,
           color: '#00f',
           chartType: 'linear',
           lineWidth: 3,
@@ -1111,37 +1283,40 @@ function initRelevanceChart(data){
         };
         seriesData.push(serie_item)
     })
+    const { LeadValue,LeadUnit } = data.CorrelationChartInfo;
+    const { Source } = data.ChartInfo;
 
     let tooltip = {
         formatter: function() {
-          let str = `<p>相关性系数：${this.y.toFixed(4)}</p><br><p>领先${this.x}期</p>`
-          return str
+            let str = `<p>相关性系数：${this.y.toFixed(4)}</p><br><p>领先${ Source===3 ?this.x+'期' : LeadValue+LeadUnit}</p>`
+            return str
         },
         formatterCh: function() {
-          let str = `<p>相关性系数：${this.y.toFixed(4)}</p><br><p>领先${this.x}期</p>`
-          return str
+            let str = `<p>相关性系数：${this.y.toFixed(4)}</p><br><p>领先${ Source===3 ?this.x+'期' : LeadValue+LeadUnit}</p>`
+            return str
         },
         formatterEn: function() {
-          let str = `<p>Correlation coefficient：${this.y.toFixed(4)}</p><br><p>lead${this.x}stage</p>`
-          return str
+            let str = `<p>Correlation coefficient：${this.y.toFixed(4)}</p><br><p>lead${ Source===3 ? this.x+'stage' : LeadValue+relevanceUnitEnMap[LeadUnit]}</p>`
+            return str
         }
     }
     
-    // nextTick(()=>{
-    //     const hEl=document.getElementById('chart'+data.ChartInfo.UniqueCode)
-    //     console.log(hEl.offsetHeight);
-    //     xAxis.offset=-(hEl.offsetHeight-74)/2
-    //     chartData.value = {
-    //         isRelevanceChart:true,
-    //         title: {
-    //             text:''
-    //         },
-    //         series: seriesData,
-    //         yAxis: [yAxis] ,
-    //         xAxis:xAxis,
-    //         tooltip
-    //     }
-    // })
+    nextTick(()=>{
+        const hEl=document.getElementById(RenderDomId.value)
+        // console.log(hEl.offsetHeight);
+        xAxis.offset=-(hEl.offsetHeight-98)/2
+        options.value = {
+            isRelevanceChart:true,
+            title: {
+                text:''
+            },
+            series: seriesData,
+            yAxis: [yAxis] ,
+            xAxis:xAxis,
+            tooltip
+        }
+        ChartIns.update(options.value,true)
+    })
 
     return {
         isRelevanceChart:true,
@@ -1169,6 +1344,10 @@ function setSectionScatterChart({DataResp}) {
         ...basicYAxis,
         title: {
             text: YName,
+            textZh:YName,// 中文
+            textEn:YNameEn|| '',
+            style:{},
+            styleEn:{cursor:'pointer',color: '#999'},
             align: 'middle',
         },
         opposite: false,
@@ -1183,6 +1362,10 @@ function setSectionScatterChart({DataResp}) {
         ...scatterXAxis,
         title: {
             text: XName,
+            textZh:XName,// 中文
+            textEn:XNameEn || '',
+            style:{},
+            styleEn:{cursor:'pointer',color: '#999'},
             align: 'middle',
         },
         min: Number(xMin),
@@ -1197,6 +1380,8 @@ function setSectionScatterChart({DataResp}) {
             data: [],
             type: 'scatter',
             name: item.Name,
+            nameZh: item.Name,
+            nameEn: item.NameEn,
             color: item.Color,
             lineWidth: 0,
             chartType: 'linear',
@@ -1280,6 +1465,27 @@ function setSectionScatterChart({DataResp}) {
             str += `<br><span style="color:${this.color}">\u25CF</span>${ponit_obj.XName}: ${this.x} ${ponit_obj.XDate}<br>`;
             str += `<span style="color:${this.color}">\u25CF</span>${ponit_obj.YName}: ${this.y} (${ponit_obj.YDate})`;
 
+            return str
+        },
+        formatterCh: function() {
+            let series_obj = DataList.find(_ => _.Name === this.series.name);
+            let ponit_obj = series_obj.EdbInfoList.find(_ => _.XValue ===this.x && _.YValue===this.y);
+  
+            let str=`<b>${ ponit_obj.Name }</b>`;
+            str += `<br><span style="color:${this.color}">\u25CF</span>${ponit_obj.XName}: ${this.x} ${ponit_obj.XDate}<br>`;
+            str += `<span style="color:${this.color}">\u25CF</span>${ponit_obj.YName}: ${this.y} (${ponit_obj.YDate})`;
+  
+            return str
+            
+          },
+        formatterEn: function() {
+            let series_obj = DataList.find(_ => _.NameEn === this.series.name);
+            let ponit_obj = series_obj.EdbInfoList.find(_ => _.XValue ===this.x && _.YValue===this.y);
+  
+            let str=`<b>${ ponit_obj.NameEn }</b>`;
+            str += `<br><span style="color:${this.color}">\u25CF</span>${ponit_obj.XNameEn}: ${this.x} ${ponit_obj.XDate}<br>`;
+            str += `<span style="color:${this.color}">\u25CF</span>${ponit_obj.YNameEn}: ${this.y} ${ponit_obj.YDate}`;
+  
             return str
         }
     }

src/views/ppt/style/common.scss

@@ -49,5 +49,5 @@ $pptItemH:630PX;
     }
 }
 .ppt-item-box_en{
-    background-image: url('/pptImg/pptitem_bg_en.png');
+    background-image: url('/pptImg/pptitem_bg_en.jpg');
 }

src/views/ppt/template/FormatFive.vue

@@ -26,14 +26,14 @@ const lang=ref(window.location.pathname.startsWith('/ppten')?'en':'zh')
 				</div>
 				<div class="item-half-box">
 					<component 
-						:is="getPPTContentType(2,pageData.elements)"
-						:itemData="getPPTContentItemData(2,pageData)"
+						:is="getPPTContentType(3,pageData.elements)"
+						:itemData="getPPTContentItemData(3,pageData)"
 					/>
 				</div>
 				<div class="item-half-box">
 					<component 
-						:is="getPPTContentType(3,pageData.elements)"
-						:itemData="getPPTContentItemData(3,pageData)"
+						:is="getPPTContentType(2,pageData.elements)"
+						:itemData="getPPTContentItemData(2,pageData)"
 					/>
 				</div>
 				<div class="item-half-box">

src/views/ppt/utils/config.js

@@ -75,7 +75,7 @@ export const pptSlideMasterEn = {
                 y: -0.1,
                 w: 10,
                 h: 7.1,
-                path: "/pptImg/pptitem_bg.png", 
+                path: "/pptImg/pptitem_bg.jpg", 
             },
 		},
 	],