feat: 实现首页的日期和数字格式化

src/utils/tools.ts

@@ -66,16 +66,16 @@ export const isEuropean = () => {
  * @param digits - 小数位数
  * @param isEuropean - 是否为欧洲地区
  */
-export const formatNumber = (number: number, digits: number = 0): string => {
+export const formatNumber = (number: number, digits?: number): string => {
   const userLanguage = userStore.userInfo?.numbers_format === 'European' ? 'de-DE' : 'zh-CN'
 
   // 设置数字格式化的选项
   const options: Intl.NumberFormatOptions = {
-    style: 'decimal',
-    minimumFractionDigits: digits
+    style: 'decimal'
+    // minimumFractionDigits: digits
     // maximumFractionDigits: 3
   }
-
+  digits ?? (options.minimumFractionDigits = digits)
   // 其他地区使用默认格式
   return new Intl.NumberFormat(userLanguage, options).format(number)
 }

src/views/Dashboard/src/components/BarChart.vue

@@ -3,6 +3,7 @@
 import * as echarts from 'echarts'
 import { useThemeStore } from '@/stores/modules/theme'
 import { onMounted, ref, reactive, watch, computed } from 'vue'
+import { formatNumber } from '@/utils/tools'
 const themeStore = useThemeStore()
 const props = defineProps({
   BarData: Object,
@@ -101,7 +102,7 @@ const initOption = reactive({
           item.marker +
           item.seriesName +
           ': ' +
-          item.value +
+          formatNumber(item.value) +
           '</div>'
       })
       allnum = allnum.toFixed(2)
@@ -150,7 +151,10 @@ const initOption = reactive({
     },
     axisLabel: {
       fontFamily: 'Lato-Light',
-      color: '#B5B9BF'
+      color: '#B5B9BF',
+      formatter: function (value: any) {
+        return formatNumber(value, 0)
+      }
     },
     min: 0, // 最小值
     max: Max.value, // 最大值

src/views/Dashboard/src/components/PieChart.vue

@@ -1,8 +1,9 @@
 <!-- 饼状图 -->
- <script lang="ts" setup>
+<script lang="ts" setup>
 import * as echarts from 'echarts'
 import { useThemeStore } from '@/stores/modules/theme'
 import { onMounted, ref, reactive, watch, computed } from 'vue'
+import { formatNumber } from '@/utils/tools'
 const props = defineProps({
   PieData: Object
 })
@@ -83,7 +84,7 @@ const initOption: any = reactive({
         params.marker +
         params.percent +
         '% (' +
-        params.value +
+        formatNumber(params.value) +
         ')</div>'
       return str
     }
@@ -114,7 +115,10 @@ const initOption: any = reactive({
     label: {
       show: true,
       // formatter: '{d}%({c})',
-      formatter: '{name|{d}%}\n{time|({c})}',
+      formatter: (params) => {
+        console.log(params, 'params')
+        return `{name|${params.percent}%}\n {time|(${formatNumber(params.value)})}`
+      },
       alignTo: 'labelLine',
       rich: {
         name: {

src/views/Dashboard/src/components/RevenueChart.vue

@@ -5,6 +5,7 @@ import { useThemeStore } from '@/stores/modules/theme'
 import { onMounted, ref, reactive, watch, computed } from 'vue'
 import updateIcon from '../image/xiazai.png'
 import * as XLSX from 'xlsx'
+import { formatNumber } from '@/utils/tools'
 
 const themeStore = useThemeStore()
 const props = defineProps({
@@ -198,7 +199,7 @@ const initOption = reactive({
           item.marker +
           item.seriesName +
           ': ' +
-          item.value +
+          formatNumber(item.value) +
           '</div>'
       })
       allnum = allnum.toFixed(2)
@@ -247,7 +248,10 @@ const initOption = reactive({
     },
     axisLabel: {
       fontFamily: 'Lato-Light',
-      color: '#B5B9BF'
+      color: '#B5B9BF',
+      formatter: function (value: any) {
+        return formatNumber(value, 0)
+      }
     },
     min: 0, // 最小值
     max: Max.value, // 最大值

src/views/Dashboard/src/components/TopMap.vue

@@ -3,6 +3,7 @@ import { onMounted, ref, watch } from 'vue'
 import OriginIcon from '../image/hhh_2.png'
 import L from 'leaflet'
 import { useThemeStore } from '@/stores/modules/theme'
+import { formatNumber } from '@/utils/tools'
 
 const themeStore = useThemeStore()
 const MapDataList = ref([])
@@ -70,7 +71,7 @@ const addMarkersToMap = () => {
     <div class="popup-content" style="background-color:${item.color}">
       <div class="popup-content-text">
         <p class="popup-label" style="color:${item.textcolor}">${item.name}</p>
-        <p class="popup-value" style="color:${item.textcolor}">${item.value}</p>
+        <p class="popup-value" style="color:${item.textcolor}">${formatNumber(item.value)}</p>
       </div>
     </div>
   `