兼容手机刻度

src/views/chartShow/index.vue

@@ -55,6 +55,7 @@ export default defineComponent({
 
     const code = ref(route.query.code);
     const isShare = ref(route.query.fromType === 'share');
+    const screen = ref(document.body.clientWidth < 1200 ? 'phone' : 'pc');
 
     const state = reactive<IState>({
       options: {},
@@ -128,10 +129,7 @@ export default defineComponent({
         true
       );
       // console.log(year_differ)
-      if (
-      state.chartInfo.DateType === 4 ||
-        ([5, 6].includes(state.chartInfo.DateType) && year_differ <= 1)
-      ) {
+      if ([5, 6].includes(state.chartInfo.DateType) && year_differ <= 1) {
         return true
       } else {
         return false
@@ -143,7 +141,7 @@ export default defineComponent({
       const { dataList,chartInfo } = state;
 
       //拼接标题 数据列
-      let data = [] as any[],ydata = [] as any[];
+      let data = [] as any[],ydata = [] as any[],minTimeArr: number[] = [],maxTimeArr: number[] = [];
       const chartData = _.cloneDeep(dataList);
 
       //支持的图表类型
@@ -232,6 +230,11 @@ export default defineComponent({
           obj.data.push([i.DataTimestamp, i.Value]);
         }
 
+        if(item.DataList.length){
+            minTimeArr.push(item.DataList[0].DataTimestamp)
+            maxTimeArr.push(item.DataList[item.DataList.length-1].DataTimestamp)
+        }
+
         data.push(obj);
         ydata.push(yItem);
       })
@@ -239,8 +242,14 @@ export default defineComponent({
       // 范围为1年内 x轴显示为月/日 否则默认年/月
       let xAxis:any = {};
       const bool_time:boolean = xTimeDiffer();
+      let minTime: number=Math.min(...minTimeArr);
+      let maxTime=Math.max(...maxTimeArr);
+
+      let step = setXaxisStep(maxTime-minTime);
+
       xAxis = bool_time ? {
         ...defaultOpts.xAxis,
+        tickInterval: screen.value === 'phone' ? step : undefined,
         labels: {
           formatter: function (ctx: any) {
             return Highcharts.dateFormat('%m/%d', ctx.value);
@@ -251,6 +260,7 @@ export default defineComponent({
         }
       } : {
         ...defaultOpts.xAxis,
+        tickInterval: screen.value === 'phone' ? step : undefined,
         labels: {
           style: {
             fontSize: '10px',
@@ -265,6 +275,12 @@ export default defineComponent({
       };
     }
 
+    /* 设置x轴步长 刻度数量多一点 */
+    const setXaxisStep = (timestamp: number) => {
+      // return  timestamp / 6 < 24 * 3600 * 1000 * 30 ? 24 * 3600 * 1000 * 30 : timestamp / 6;
+      return  timestamp / 6;
+    }
+
     /* 季节图 */
     const setSeasonOptions = () => {
       const chartData = state.dataList[0];
@@ -358,6 +374,7 @@ export default defineComponent({
       // 季节图x轴显示月/日 周度指标额外处理时间轴显示
       const xAxis = {
         ...defaultOpts.xAxis,
+        tickInterval:  screen.value === 'phone' ? 24 * 3600 * 1000 * 60 : undefined,
         labels: {
           formatter: function (ctx: any) {
             return Highcharts.dateFormat('%m/%d', ctx.value);
@@ -420,11 +437,6 @@ export default defineComponent({
             enabled: false,
           };
 
-      //农历图调整顶部缩进
-      // if (state.chartInfo.Calendar === '农历' && browser() !== 'FF' && getTerminal() !== 'ios') chart = {
-      //   spacing: [-26, 8, 2, 8]
-      // }
-
       state.options = {
         colors:
           state.chartInfo.Calendar === '公历'