指标库 预测指标库指标渲染

src/views/hzyb/chart/component/chartBox.vue

@@ -105,7 +105,11 @@ const chartDefaultOpts={
 
 const props = defineProps({
   options: Object,
-	chartInfo: Object
+	chartInfo: Object,
+    showTitle:{
+        type:Boolean,
+        default:true
+    }
 })
 import {ref,onMounted,watch,toRefs } from 'vue'
 import Highcharts from 'highcharts/highstock';
@@ -187,7 +191,7 @@ watch(
 
 <template>
     <div class="chart-wrap">
-        <div class="chart-top-labels">
+        <div class="chart-top-labels" v-if="props.showTitle">
             <div 
                 class="item" 
                 v-for="(item,index) in props.options.series" 

src/views/hzyb/forexCalendar/Detail.vue

@@ -5,7 +5,7 @@ import chartBox from '../chart/component/chartBox.vue'
 import {
     apiGetbaseEdbInfo,apiGetpredictEdbInfo,apiGetCalendarEventList
 } from '@/api/hzyb/forexCalendar.js'
-import {setSplineOpt} from '../hooks/chartBase'
+import {setSplineOpt,setOptions} from '../hooks/chartBase'
 /**
  * 外汇日历详情
         传入参数：
@@ -25,7 +25,9 @@ let chartData=ref({
     yAxis:[],
 
 })// 图表配置数据
-let resData=ref(null)//接口详情数据
+let resData=ref({
+    EdbInfo:{}
+})//接口详情数据
 let pageBoxPosition=reactive({
     top:window.innerHeight-165,
     left:window.innerWidth-50,
@@ -33,15 +35,6 @@ let pageBoxPosition=reactive({
     temLeft:0,
 })
 localStorage.setItem('hzyb-token',route.query.token)
-/* async function testChart(){
-    const res=await apiMyChartDetail({
-        ChartInfoId:'178',
-    })
-    resData.value=res.data
-    chartData.value = setSplineOpt(res.data.EdbInfoList,resData)
-}
-testChart()
- */
 function pageChange(){}
 const pageTouchmove=(e)=>{
     const touchObj=e.touches[0]
@@ -86,50 +79,59 @@ async function getEdbList(){
         })
         EdbList.value = events
         currentEdbId.value = Number(edbInfoId)
-        const eventIndex = events.findIndex(e=>e.edb_info_id===Number(edbInfoId))
+        const eventIndex = events.findIndex(e=>e.edbInfoId===Number(edbInfoId))
         currentEdbIndex.value = eventIndex>=0?eventIndex:0
         getEdbDetail()
     })
 }
 getEdbList()
 
+function capitalizeFirstLetter(obj) {
+  return Object.keys(obj).reduce((acc, key) => {
+    const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
+    acc[capitalizedKey] = obj[key];
+    return acc;
+  }, {});
+}
 async function getEdbDetail(){
     const res = EdbList.value[currentEdbIndex.value].matterType===2
                 ?await apiGetbaseEdbInfo({edb_info_id:currentEdbId.value})
                 :await apiGetpredictEdbInfo({edb_info_id:currentEdbId.value})
     resData.value=res.data
+    //由于EdbInfo大小写命名和后台不一致，重新整一份
+    const EdbInfo = capitalizeFirstLetter(res.data.EdbInfo)
     const edbData = {
         DataList:res.data.DataList||[],
         EdbInfo:{
-            ...res.data.EdbInfo,
+            ...EdbInfo,
             ChartColor:'',
             ChartStyle:'',
+            PredictChartColor:'',
             ChartType:0,
-            ChartWidth:0,
+            ChartWidth:3,
             MaxData:res.data.EdbInfo.maxValue,
             MinData:res.data.EdbInfo.minValue,
             EdbInfoCategoryType:1,
-            EdbInfoType:1,
-            EdbName:res.data.EdbInfo.edbName,
-            IsAxis:1
+            EdbInfoType:0,
+            IsAxis:1,
         }
     }
-    chartData.value = setSplineOpt(
-        [
-            {
-                ...edbData.EdbInfo,
-                DataList:edbData.DataList
-            }
-        ],
-        {value:{ChartInfo:{ChartType:1}}}
-    )
+
+    chartData.value = EdbList.value[currentEdbIndex.value].matterType===2
+                      ? setOptions(res.data.DataList||[],EdbInfo)
+                      : setSplineOpt([{
+                            ...edbData.EdbInfo,
+                            DataList:res.data.DataList||[]
+                            }],
+                            {value:{ChartInfo:{ChartType:1}}}
+                        )
 }
 </script>
 
 <template>
     <div class="edb-detail-wrap">
         <div class="edb-title">{{resData.EdbInfo.edbName}}</div>
-        <chartBox :options='chartData' :chartInfo="{ChartType:1}" v-if="!loading"></chartBox>
+        <chartBox :options='chartData' :chartInfo="{ChartType:1}" :showTitle="false"></chartBox>
         <!-- 上一张下一张图切换 -->
         <div 
             class="change-page-wrap" 

src/views/hzyb/hooks/chartBase.js

@@ -188,6 +188,7 @@ export const setAxisPlotAreas = (axis,axisType,resData) => {
 
 // 设置常规图配置 曲线
 export const setSplineOpt=(data,resData)=>{
+    console.log('setSplineOpt')
     let series=[]
     let yAxis=[]
     let xAxis = {}
@@ -216,7 +217,6 @@ export const setSplineOpt=(data,resData)=>{
         let dynamic_arr = newData.filter(
           (item) => dynamic_title === item.EdbName
         );
-        console.log('dynamic_title',dynamic_title)
         //处理数据列name
         let temName= setDyncmicSerieName(item,dynamic_arr)  
 
@@ -336,4 +336,101 @@ export const setSplineOpt=(data,resData)=>{
         yAxis,
         rangeSelector:{ enabled: false}
     }
+}
+
+/* 图表配置 曲线*/
+export function setOptions(tableData,chartInfo) {
+    console.log('setOptions')
+    const chartData = tableData
+    //拼接标题 数据列
+    let data = [],ydata = [];
+    //y轴
+    let yItem = {
+        title: {
+            text: chartInfo.Unit||'',
+            align: 'high',
+            rotation: 0,
+            y: -12,
+            x: 0,
+            textAlign: 'left',
+            reserveSpace: false,
+        },
+        labels: {
+            formatter: function (ctx) {
+                return ctx.value;
+            },
+            align: 'center',
+        },
+        min: Number(chartInfo.MinValue),
+        max: Number(chartInfo.MaxValue),
+        lineWidth: 1,
+        lineColor: '#bfbfbf',
+        tickColor: '#bfbfbf',
+        opposite: false,
+        reversed: false,
+        visible: true,
+        gridLineWidth: 0,
+        tickWidth: 1,
+        tickLength:5,
+        tickPosition: 'inside',
+        endOnTick: false,
+        startOnTick: false,
+        showLastLabel: true, //显示最后刻度值
+        tickPixelInterval: 50
+    }
+    // 图例名称和图例文字样式
+    let dataName = chartInfo.EdbName||''
+    let color = '#333'
+    let legend = {
+        enabled: true,
+        verticalAlign: 'top',
+        margin:12,
+        itemMarginBottom:0,
+        itemMarginTop: 0,
+        itemStyle: {
+            color
+        },
+    }
+    //数据列
+    let obj = {
+        data: [],
+        type: 'spline',
+        yAxis: 0,
+        name: dataName,
+        lineWidth: 3,
+    }
+    chartData.forEach((item, index) => {
+        obj.data.push([item.DataTimestamp, item.Value]);
+    })
+    
+    data.push(obj);
+    ydata.push(yItem);
+
+    // 默认年/月
+    let xAxis = {}
+    xAxis = {
+        tickPosition: 'inside',
+        lineColor: '#bfbfbf',
+        tickColor: '#bfbfbf',
+        tickLength:5,
+        type: 'datetime',
+        ordinal: false,
+        dateTimeLabelFormats: {
+            day: '%y/%m',
+            week: '%y/%m',
+            month: '%y/%m',
+            year: '%y/%m',
+        },
+        labels: {
+            formatter: function (ctx) {
+                return Highcharts.dateFormat('%y/%m', ctx.value);
+            },
+        },
+    }
+    return  {
+        series: data,
+        yAxis: ydata,
+        xAxis,
+        legend
+    }
 }