图库10.2 图表切换中英文显示

.gitignore

@@ -5,3 +5,4 @@ dist-ssr
 *.local
 horz_chart
 horz_chart.zip
+package-lock.json

src/views/chartShow/index.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="chart-show">
     <header class="chart-header" @click="openNew">
-      <span class="chart-title" @click.stop @dblclick="copyText">{{ chartInfo.ChartName }}</span>
+      <span class="chart-title" @click.stop @dblclick="copyText">{{ language == 'ch'?chartInfo.ChartName: chartInfo.ChartNameEn}}</span>
     </header>
     <template v-if="haveData">
       <div
@@ -80,6 +80,8 @@ export default defineComponent({
 
     const code = ref(route.query.code);
     const isShare = ref(route.query.fromType === 'share');
+    // 语言 中英文 ch en  默认中文
+    const language = ref(route.query.lang || 'ch');
     const screen = ref(document.body.clientWidth < 1200 ? 'phone' : 'pc');
 
     const state = reactive<IState>({
@@ -127,7 +129,7 @@ export default defineComponent({
         loading.value = false;
         state.chartInfo = Data.ChartInfo;
         state.dataList = Data.EdbInfoList;
-        document.title = Data.ChartInfo.ChartName;
+        document.title = language.value=='ch'?Data.ChartInfo.ChartName:Data.ChartInfo.ChartNameEn;
         haveData.value = true;
         dealSourceHandle();
         setOptions();
@@ -180,6 +182,7 @@ export default defineComponent({
         let MaxlabelLen = getLabelMaxLen(item.DataList) + item.Unit.length
 
         //y轴
+        let textEn = item.Unit?item.UnitEn:''
         let yItem = {
           ...basicYAxis,
           labels: {
@@ -194,7 +197,7 @@ export default defineComponent({
             },
           },
           title: {
-            text: sameSideIndex !== index ? '' : `${item.Unit}`,
+            text:language.value=='ch'?sameSideIndex !== index ? '' : `${item.Unit}`:textEn,
             // text: null,
             align: 'high',
             rotation: 0,
@@ -218,16 +221,19 @@ export default defineComponent({
 
         // 拼接配置  IsAxis左轴1 右轴0 IsOrder正序false 逆序true EdbInfoType是否是领先指标
         let dynamic_tag = concatDynamicTag(item)
-
+        // 英文后缀
+        let dynamic_tag_en = concatDynamicTag(item,'en')
         //数据列
+        let nameCh:String = dynamic_arr.length > 1
+              ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
+              : `${item.EdbName}${dynamic_tag}`
+        let nameEn:String=item.EdbNameEn?`${item.EdbNameEn}${dynamic_tag_en}`:''
+        let name :String=language.value == 'ch'?nameCh:nameEn
         let obj = {
           data: [] as any[],
           type:  'spline',
           yAxis: sameSideIndex,
-          name:
-            dynamic_arr.length > 1
-              ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
-              : `${item.EdbName}${dynamic_tag}`,
+          name,
           color: item.ChartColor,
           lineWidth: Number(item.ChartWidth)
         };
@@ -350,6 +356,7 @@ export default defineComponent({
         let MaxlabelLen = getLabelMaxLen(item.DataList) + item.Unit.length
 
         //y轴
+        let textEn = item.Unit?item.UnitEn:''
         let yItem = {
           ...basicYAxis,
           labels: {
@@ -364,7 +371,7 @@ export default defineComponent({
             },
           },
           title: {
-            text: sameSideIndex !== index ? '' : `${item.Unit}`,
+            text:language.value=='ch'?sameSideIndex !== index ? '' : `${item.Unit}`:textEn,
             // text: null,
             align: 'high',
             rotation: 0,
@@ -388,16 +395,19 @@ export default defineComponent({
 
         // 拼接配置  IsAxis左轴1 右轴0 IsOrder正序false 逆序true EdbInfoType是否是领先指标
         let dynamic_tag = concatDynamicTag(item)
-
+        // 英文后缀
+        let dynamic_tag_en = concatDynamicTag(item,'en')
         //数据列
+        let nameCh:String = dynamic_arr.length > 1
+              ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
+              : `${item.EdbName}${dynamic_tag}`
+        let nameEn:String=item.EdbNameEn?`${item.EdbNameEn}${dynamic_tag_en}`:''
+        let name :String=language.value == 'ch'?nameCh:nameEn
         let obj = {
           data: [] as any[],
           type: chartStyle || item.ChartStyle,
           yAxis: serie_yIndex,
-          name:
-            dynamic_arr.length > 1
-              ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
-              : `${item.EdbName}${dynamic_tag}`,
+          name,
           color: item.ChartColor,
           lineWidth: (chartInfo.ChartType === 6 && item.ChartStyle === 'spline') ? Number(item.ChartWidth) : 0,
           fillColor: (chartInfo.ChartType === 3 || (chartInfo.ChartType === 6 && item.ChartStyle === 'areaspline')) ? item.ChartColor : undefined,
@@ -480,6 +490,7 @@ export default defineComponent({
           const index = chartData.DataList.findIndex(
             (item: ISeasonDataItemProps) => item.Year === j.Year
           );
+          let textEn = chartData.Unit?chartData.UnitEn:''
           const s_yItem = {
             labels: {
               formatter: function (ctx: any) {
@@ -493,7 +504,7 @@ export default defineComponent({
               x: -5,
             },
             title: {
-              text:  `${chartData.Unit}`,
+               text:language.value=='ch'?`${chartData.Unit}`:textEn,
               // text: null,
               align: 'high',
               rotation: 0,
@@ -531,7 +542,7 @@ export default defineComponent({
           const index = filterArr.findIndex(
             (item: ILunarItem) => item.Year === j.Year
           );
-
+          let textEn = chartData.Unit?chartData.UnitEn:''
           const s_yItem = {
             labels: {
               formatter: function (ctx: any) {
@@ -545,7 +556,7 @@ export default defineComponent({
               x: -5,
             },
             title: {
-              text:  `${chartData.Unit}`,
+              text:language.value=='ch'?`${chartData.Unit}`:textEn,
               // text: null,
               align: 'high',
               rotation: 0,
@@ -673,9 +684,14 @@ export default defineComponent({
       let tooltip = {
         formatter: function() {
           const that: any = this;
-          return `<strong>${ tmpData_date[that.x+'_'+that.y].length > 4 ? tmpData_date[that.x+'_'+that.y].slice(0,4).join()+'...' : tmpData_date[that.x+'_'+that.y].join() }</strong><br>
+          return language.value=='ch'?
+          `<strong>${ tmpData_date[that.x+'_'+that.y].length > 4 ? tmpData_date[that.x+'_'+that.y].slice(0,4).join()+'...' : tmpData_date[that.x+'_'+that.y].join() }</strong><br>
           ${dataList[0].EdbName}: <span style="font-weight: 600">	${that.x}</span><br>
           ${dataList[1].EdbName}: <span style="font-weight: 600">	${that.y}</span>
+          `:
+          `<strong>${ tmpData_date[that.x+'_'+that.y].length > 4 ? tmpData_date[that.x+'_'+that.y].slice(0,4).join()+'...' : tmpData_date[that.x+'_'+that.y].join() }</strong><br>
+          ${dataList[0].EdbNameEn}: <span style="font-weight: 600">	${that.x}</span><br>
+          ${dataList[1].EdbNameEn}: <span style="font-weight: 600">	${that.y}</span>
           `
         }
       }
@@ -684,7 +700,7 @@ export default defineComponent({
       //y轴
       let yAxis = {
         title: {
-          text:  `${dataList[1].Unit}`,
+          text: language.value=='ch'?`${dataList[1].Unit}`:dataList[1].Unit?dataList[1].UnitEn:'',
           // text: null,
           align: 'high',
           rotation: 0,
@@ -720,7 +736,7 @@ export default defineComponent({
       let series: any = {
         data: [],
         type: 'scatter',
-        name: `${chartInfo.ChartName}${IsOrder ? '(逆序)' : ''}`,
+        name: language.value == 'ch'?`${chartInfo.ChartName}${IsOrder ? '(逆序)' : ''}`:`${chartInfo.ChartNameEn}${IsOrder ? '(reserve)' : ''}`,
         color: ChartColor,
         lineWidth: 0
       }
@@ -737,7 +753,7 @@ export default defineComponent({
         xAxis: {
           ...scatterXAxis,
           title: {
-            text:  `${dataList[0].Unit}`,
+            text: language.value=='ch'?`${dataList[0].Unit}`:dataList[0].Unit?dataList[0].UnitEn:'',
             // text: null,
             align: 'high',
             rotation: 0,
@@ -767,19 +783,26 @@ export default defineComponent({
     };
 
     /* 拼接动态的指标名称小标签 */
-    const concatDynamicTag = ({ IsAxis,IsOrder,EdbInfoType,LeadValue,LeadUnit }: IDataProps ): string => {
+    const concatDynamicTag = ({ IsAxis,IsOrder,EdbInfoType,LeadValue,LeadUnit }: IDataProps,lang:String='ch'): string => {
       // IsAxis左轴1 右轴0 2右2轴 
       //IsOrder正序false 逆序true 
       //EdbInfoType是否是领先指标
-      const axisLabelMap:any = {
+      const axisLabelMap:any = lang=='ch'?{
         0: '右轴',
         2: '右2轴'
+      }:{
+        0: 'right axis',
+        2: 'second right axis'
       }
-      const orderLabelMap:any = {
+      const orderLabelMap:any = lang=='ch'?{
         1: '逆序'
+      }:{
+        1: 'reverse'
       }
-      const edbInfoMap:any = {
+      const edbInfoMap:any = lang=='ch'?{
         0: '领先'
+      }:{
+        0: 'lead'
       }
       
       let axis_tag = axisLabelMap[IsAxis] || '';
@@ -795,7 +818,7 @@ export default defineComponent({
     const copyText = () => {
       const { chartInfo } = state;
       let input = document.createElement("input");
-      input.value = chartInfo.ChartName;
+      input.value = language.value == 'ch'?chartInfo.ChartName:chartInfo.ChartNameEn;
       document.body.appendChild(input)
       input.select();
       document.execCommand('copy');
@@ -828,6 +851,7 @@ export default defineComponent({
       openNew,
       copyUrl,
       isShare,
+      language,
       refreshChart,
       copyText
     };