样式调整

.env.test

@@ -1 +1 @@
-VITE_BASEURL = 'http://8.136.199.33:8608/v1'
+VITE_BASEURL = 'https://charttest.hzinsights.com/v1'

src/reset.css

@@ -113,4 +113,9 @@ input {
 }
 option {
 	min-height: 0 !important;
+}
+.text_oneLine {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

src/utils/chartOptions.ts

@@ -60,7 +60,7 @@ export const defaultOpts = {
   //图例
   legend: {
     enabled: true,
-    verticalAlign: "top",
+    verticalAlign: 'top',
     margin: 3,
     // layout: 'vertical'
   },
@@ -80,6 +80,7 @@ export const defaultOpts = {
     lineColor: '#bfbfbf',
     tickColor: '#bfbfbf',
     type: 'datetime',
+    tickLength: 5,
     dateTimeLabelFormats: {
       day: '%y/%m',
       week: '%y/%m',
@@ -98,10 +99,138 @@ export const defaultOpts = {
     visible: true,
     gridLineWidth: 0,
     tickWidth: 1,
+    tickLength: 5,
     tickPosition: 'inside',
     endOnTick: false,
     startOnTick: false,
-  }
+  },
+  // responsive: {
+  //   rules: [
+  //     {
+  //       condition: { maxWidth: 576 },
+  //       chartOptions: {
+  //         title: {
+  //           margin: 5,
+  //           style: { fontSize: '12px' },
+  //         },
+  //         legend: {
+  //           floating: false,
+  //           margin: 3,
+  //           // symbolPadding: 3,
+  //           itemDistance: 5,
+  //           align: 'center',
+  //           alignColumns: false,
+  //           itemStyle: {
+  //             fontSize: '10px',
+  //           },
+  //         },
+
+  //         yAxis: [
+  //           {
+  //             title: {
+  //               margin: 5,
+  //               style: { fontSize: '10px' },
+  //             },
+
+  //             labels: {
+  //               style: {
+  //                 fontSize: '8px',
+  //               },
+  //               x: -5,
+  //               y: -1,
+  //             },
+  //             tickLength: 2,
+  //           },
+  //           {
+  //             title: {
+  //               margin: 5,
+  //               style: { fontSize: '10px' },
+  //             },
+  //             labels: {
+  //               style: {
+  //                 fontSize: '8px',
+  //               },
+  //               x: 3,
+  //               y: -1,
+  //             },
+  //             tickLength: 2,
+  //           },
+  //           {
+  //             title: {
+  //               margin: 5,
+  //               style: { fontSize: '10px' },
+  //             },
+  //             labels: {
+  //               style: {
+  //                 fontSize: '8px',
+  //               },
+  //               x: 3,
+  //               y: -1,
+  //             },
+  //             tickLength: 2,
+  //           },
+  //           {
+  //             title: {
+  //               margin: 5,
+  //               style: { fontSize: '10px' },
+  //             },
+  //             labels: {
+  //               style: {
+  //                 fontSize: '8px',
+  //               },
+  //               x: 3,
+  //               y: -1,
+  //             },
+  //             tickLength: 2,
+  //           },
+  //           {
+  //             title: {
+  //               margin: 5,
+  //               style: { fontSize: '10px' },
+  //             },
+  //             labels: {
+  //               style: {
+  //                 fontSize: '8px',
+  //               },
+  //               x: 3,
+  //               y: -1,
+  //             },
+  //             tickLength: 2,
+  //           },
+  //         ],
+  //         rangeSelector: { enabled: false },
+  //         xAxis: {
+  //           title: {
+  //             margin: 2,
+  //             style: { fontSize: '10px' },
+  //           },
+  //           labels: {
+  //             style: { fontSize: '8px' },
+  //           },
+  //           y: 2,
+  //           tickLength: 2,
+  //         },
+
+  //         navigator: {
+  //           height: 28,
+  //           margin: 3,
+  //           handles: {
+  //             width: 18,
+  //             height: 28,
+  //           },
+  //         },
+  //       },
+  //     },
+  //     {
+  //       condition: { maxHeight: 350 },
+  //       chartOptions: {
+  //         legend: {
+  //           floating: false,
+  //         },
+  //       },
+  //     },
+  //   ],
+  // },
 };
 
 /* 季节性图配置 */

src/utils/utils.ts

@@ -1,4 +1,4 @@
-export const browser = () => {
+export const browser = ():string => {
 	// 取得浏览器的userAgent字符串
 	var userAgent = navigator.userAgent
 	// 判断是否Opera浏览器
@@ -36,20 +36,17 @@ export const browser = () => {
 		} else {
 			return 'IE'
 		}
-	}
-	if (isOpera) {
+	}else if (isOpera) {
 		return 'Opera'
-	}
-	if (isEdge) {
+	}else if (isEdge) {
 		return 'Edge'
-	}
-	if (isFF) {
+	}else if (isFF) {
 		return 'FF'
-	}
-	if (isSafari) {
+	}else if (isSafari) {
 		return 'Safari'
-	}
-	if (isChrome) {
+	}else if (isChrome) {
 		return 'Chrome'
+	}else {
+		return ''
 	}
 }

src/views/chartShow/index.less

@@ -22,7 +22,7 @@
 		background: #fff;
 		border-radius: 5px;
 		.chart-header {
-			background-color: rgba(0, 0, 0, 0.03);
+			background-color: #F2F2F2;
 			border-bottom: 1px solid rgba(0, 0, 0, 0.125);
 			cursor: pointer;
 			min-height: 30px;
@@ -64,15 +64,15 @@
 	@media (max-width: 1200px) {
 		.chart-header {
 			font-size: 16px;
-			padding: 4px 20px;
+			padding: 2px 20px;
 		}
 		.chart-show {
-			width: 100%;
+			width: calc(100% - 4px);
 		}
 		.chart-wrapper {
-			width: 100vw;
+			width:  calc(100vw - 4px);
 			height: calc(100vh - 60px);
 			max-height: calc(100vw - 60px);
-			padding: 0 5px 10px;
+			padding: 0 0 5px;
 		}
 	}

src/views/chartShow/index.vue

@@ -1,7 +1,7 @@
 <!--  -->
 <template>
   <div class="chart-show">
-    <header class="chart-header" @click="openNew">
+    <header class="chart-header text_oneLine" @click="openNew">
       {{ chartInfo.ChartName }}
     </header>
     <template v-if="haveData">
@@ -132,12 +132,17 @@ export default defineComponent({
 								return sameSideIndex !== index ? '' : val;
 							},
 							align: 'center',
+              x: item.IsAxis === 0 ? 5 : -5,
+              style: {
+                fontSize: '10px',
+              },
 						},
             opposite: item.IsAxis === 0,
             reversed: item.IsOrder,
             min: Number(chartData[sameSideIndex].MinData),
 						max: Number(chartData[sameSideIndex].MaxData),
             tickWidth: sameSideIndex !== index ? 0 : 1,
+            tickLength:5,
             lineWidth: 1,
 						lineColor: '#bfbfbf',
 						tickColor: '#bfbfbf',
@@ -202,10 +207,17 @@ export default defineComponent({
             formatter: function (ctx: any) {
               return Highcharts.dateFormat('%m/%d', ctx.value);
             },
+            style: {
+              fontSize: '10px',
+            },
           }
         } : {
           ...defaultOpts.xAxis,
-          labels: {},
+          labels: {
+            style: {
+              fontSize: '10px',
+            },
+          },
         }
 
         state.options = {
@@ -219,7 +231,9 @@ export default defineComponent({
         const chartData = state.dataList[0];
         let seasonYdata = [],
           seasonData = [],
-          chart = {};
+          chart = {
+            spacing: [5, 8, 2, 8]
+          };
 
         /* 公历数据处理 处理数据列 y轴 */
         if (state.chartInfo.Calendar === '公历')
@@ -245,6 +259,9 @@ export default defineComponent({
                   return index !== 0 ? '' : val;
                 },
                 align: 'center',
+                style: {
+                  fontSize: '10px',
+                },
                 x: -5,
               },
               max: Number(chartData.MaxData),
@@ -286,6 +303,9 @@ export default defineComponent({
                   return index !== 0 ? '' : val;
                 },
                 align: 'center',
+                style: {
+                  fontSize: '10px',
+                },
                 x: -5,
               },
               max: Number(chartData.MaxData),
@@ -303,6 +323,9 @@ export default defineComponent({
             formatter: function (ctx: any) {
               return Highcharts.dateFormat('%m/%d', ctx.value);
             },
+            style: {
+              fontSize: '10px',
+            },
           },
         };
 
@@ -348,8 +371,9 @@ export default defineComponent({
             };
 
         //农历图调整顶部缩进
-        if (state.chartInfo.Calendar === '农历' && browser() !== 'FF') chart = {
-          spacingTop: -26,
+        ['FF','Safari'].includes(browser())
+        if (state.chartInfo.Calendar === '农历' && !['FF','Safari'].includes(browser())) chart = {
+          spacing: [-26, 8, 2, 8]
         }
 
         state.options = {

vite.config.ts

@@ -8,8 +8,6 @@ export default defineConfig({
   plugins: [
 		vue(),
 		legacy({
-			targets: ['> 1%, last 1 version, ie >= 11'],
-      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
 			polyfills: ['es.promise.finally', 'es/map', 'es/set'],
       modernPolyfills: ['es.promise.finally']
     })
@@ -20,7 +18,8 @@ export default defineConfig({
 		host: '0.0.0.0',
 		proxy: {
 			'/v1': {
-				target: 'http://8.136.199.33:8608',
+				// target: 'http://8.136.199.33:8608',
+				target: 'https://charttest.hzinsights.com',
 				changeOrigin: true,
         rewrite: (path) => path.replace(/^\/v1/, '/v1')
 			}