Ver código fonte

控制显示图标题

jwyu 2 anos atrás
pai
commit
665b9d7618
2 arquivos alterados com 93 adições e 53 exclusões
  1. 86 52
      src/hooks/chart/render.js
  2. 7 1
      src/views/ppt/components/ChartWrap.vue

+ 86 - 52
src/hooks/chart/render.js

@@ -15,13 +15,15 @@ HighchartszhCN(Highcharts)
  * @param data 图详情数据
  * @param renderId 图表在dom中的id
  * @param lang 图表显示为中文/英文 默认 zh中文 en英文
+ * @param changeLangIsCheck 切换中英文时 是否要校验
+ * @param showChartTitle 是否显示图表标题 默认true
  */
 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'}){
+export function chartRender({data,renderId,lang='zh',changeLangIsCheck,showChartTitle=true}){
     let chartOpt={}
     LangType.value=lang
     RenderDomId.value=renderId
@@ -48,9 +50,11 @@ export function chartRender({data,renderId,lang='zh'}){
         chartOpt=setSectionScatterChart(data);
     }
     options.value={...chartDefaultOpts,...chartOpt}
+    // 设置图标题
+    setChartTitle(showChartTitle)
     // 设置语言
-    setChartLang()
-    // console.log(options.value,RenderDomId.value);
+    setChartLang(changeLangIsCheck)
+    
     //stock不支持线形图只支持时间图 某些用chart
     let is_linear = chartOpt.series 
     ? chartOpt.series.every(_ => _.type === 'scatter') || chartOpt.series.some(_ => _.chartType === 'linear')
@@ -173,10 +177,29 @@ function changeEdbOrder (data){
     return [left_edbs,right_edbs,right_two_edbs].flat(Infinity);
 }
 
+//检查图表英文配置是否完整
+function checkChartEnData(){
+    let result = true
+    //图表名称:this.chartInfo.ChartNameEn
+    if(!chartData.value.ChartInfo.ChartNameEn){
+      result = false
+    }
+    //指标名称:this.dataList[].EdbNameEn
+    //指标单位:this.dataList[].UnitEn
+    chartData.value.EdbInfoList.forEach(item=>{
+      if(!item.EdbNameEn){
+        result = false
+      }
+      if(chartData.value.ChartInfo.ChartType!==10&&item.Unit&&!item.UnitEn){
+        result = false
+      }
+    })
+    return result   
+}
+
 // 设置图表显示的语言
-function setChartLang(){
-    // console.log(options.value);
-    // console.log(LangType.value)
+function setChartLang(changeLangIsCheck){
+    if(changeLangIsCheck&&!checkChartEnData()) return
     const {ChartType,Source} = chartData.value.ChartInfo
     if(Source==1){
         // 散点图
@@ -248,7 +271,18 @@ function setChartLang(){
             options.value.xAxis.title.text=LangType.value == 'en'?options.value.xAxis.title.textEn:options.value.xAxis.title.textZh
         }
     }
+}
 
+// 设置图标题
+function setChartTitle(showChartTitle){
+    if(showChartTitle){
+        const ChartInfo=chartData.value.ChartInfo
+        options.value.title.textZh=ChartInfo.ChartName
+        options.value.title.textEn=ChartInfo.ChartNameEn
+        options.value.title.text=LangType.value == 'zh' ?options.value.title.textZh:options.value.title.textEn||options.value.title.textZh
+    }else{
+        options.value.title.text=''
+    }
 }
 
 //曲线图
@@ -1425,56 +1459,56 @@ function setSectionScatterChart({DataResp}) {
         })
         series.push(series_item);
 
-    //趋势线
-    if(item.ShowTrendLine)  {
-        
-        let trend_data = item.TrendLimitData.map((_,_index) => (
-            _index === item.TrendLimitData.length-1 ? {
-                x: _.X,
-                y: _.Y,
-                dataLabels: {
-                enabled: item.ShowRSquare || item.ShowFitEquation,
-                align: 'left',
-                color: '#666',
-                x: 20,
-                y: 30,
-                zIndex: 9,
-                allowOverlap: true,
-                formatter: function(){
-                    let tag = '';
-                    item.ShowRSquare && item.ShowFitEquation
-                    ? tag =`<span>${item.TrendLine}</span><br><span>R²=${item.RSquare}</span>`
-                    : item.ShowRSquare && !item.ShowFitEquation
-                    ? tag =`<span>R²=${item.RSquare}</span>`
-                    : item.ShowFitEquation && !item.ShowRSquare
-                    ? tag =`<span>${item.TrendLine}</span>`
-                    : ''
-                    return tag
-                }
+        //趋势线
+        if(item.ShowTrendLine)  {
+            
+            let trend_data = item.TrendLimitData.map((_,_index) => (
+                _index === item.TrendLimitData.length-1 ? {
+                    x: _.X,
+                    y: _.Y,
+                    dataLabels: {
+                    enabled: item.ShowRSquare || item.ShowFitEquation,
+                    align: 'left',
+                    color: '#666',
+                    x: 20,
+                    y: 30,
+                    zIndex: 9,
+                    allowOverlap: true,
+                    formatter: function(){
+                        let tag = '';
+                        item.ShowRSquare && item.ShowFitEquation
+                        ? tag =`<span>${item.TrendLine}</span><br><span>R²=${item.RSquare}</span>`
+                        : item.ShowRSquare && !item.ShowFitEquation
+                        ? tag =`<span>R²=${item.RSquare}</span>`
+                        : item.ShowFitEquation && !item.ShowRSquare
+                        ? tag =`<span>${item.TrendLine}</span>`
+                        : ''
+                        return tag
+                    }
+                    }
+                } : {
+                    x: _.X,
+                    y: _.Y,
                 }
-            } : {
-                x: _.X,
-                y: _.Y,
-            }
-        ))
+            ))
 
-        let trend_item = {
-            data: trend_data,
-            type: 'spline',
-            linkedTo: ':previous',
-            color: item.Color,
-            lineWidth: 1,
-            chartType: 'linear',
-            enableMouseTracking: false,
-            dashStyle:'Dash',
-            zIndex: 2,
-            visible: true,
-            marker: {
-                enabled: false
+            let trend_item = {
+                data: trend_data,
+                type: 'spline',
+                linkedTo: ':previous',
+                color: item.Color,
+                lineWidth: 1,
+                chartType: 'linear',
+                enableMouseTracking: false,
+                dashStyle:'Dash',
+                zIndex: 2,
+                visible: true,
+                marker: {
+                    enabled: false
+                }
             }
+            series.push(trend_item)
         }
-        series.push(trend_item)
-    }
     })
 
     let tooltip = {

+ 7 - 1
src/views/ppt/components/ChartWrap.vue

@@ -29,10 +29,16 @@ async function getChartInfo(){
         if(window.location.pathname.startsWith('/ppten')){
             lang='en'
         }
+        let showChartTitle=false
+        if((res.Data.ChartInfo.Source==1&&[2,7,10].includes(res.Data.ChartInfo.ChartType))||(res.Data.ChartInfo.Source==2&&res.Data.ChartInfo.ChartType==8)){
+            showChartTitle=true
+        }
         chartRender({
             data:res.Data,
             renderId:renderId.value,
-            lang
+            lang,
+            changeLangIsCheck:true,
+            showChartTitle
         })
     }
 }