tailwind+react组件实现销售后台仪表盘效果代码-html代码-BFW代码库

tailwind+react组件实现销售后台仪表盘效果代码

代码语言：html

代码描述：tailwind+react组件实现销售后台仪表盘效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  
  
  
<style>
.half-circle-pie {
	display: block;
	width: 100%;
	max-width: 30rem;
	height: auto;
}
.icon {
	display: block;
	width: 1em;
	height: 1em;
}
</style>


  
  
</head>

  <body class="bg-gray-200 text-black dark:bg-gray-900 dark:text-white transition-colors duration-300">
	<div id="root"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.7.18.13.js"></script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.18.2.0.js"></script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.18.2.0.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
      <script type="text/babel">
       const { useEffect, useRef, useState,StrictMode} = window.React;
  const { createRoot } = window.ReactDOM;


class Formatter {
	static LOCALE = "en-US";
	static CURRENCY = "USD";

	static count(value) {
		return new Intl.NumberFormat(this.LOCALE).format(value);
	}

	static currency(value) {
		return new Intl.NumberFormat(this.LOCALE, {
			currency: this.CURRENCY,
			style: "currency",
			notation: "compact",
			maximumFractionDigits: 1
		}).format(value);
	}

	static percent(value) {
		return new Intl.NumberFormat(this.LOCALE, {
			maximumFractionDigits: 1,
			style: "percent"
		}).format(value);
	}

	static date(date) {
		return new Intl.DateTimeFormat(this.LOCALE, {
			dateStyle: "short"
		}).format(date);
	}
}

class Random {
	static random() {
		return crypto.getRandomValues(new Uint32Array(1))[0] / 2**32;
	}

	static float(min, max) {
		return (this.random() * (max - min)) + min;
	}

	static hash() {
		return Math.round(this.float(0,1) * 0xffff).toString(16);
	}

	static int(min, max) {
		return Math.floor(this.random() * (max - min)) + min;
	}
}

function fakeData() {
	const data = {
		overview: {
			top: Random.int(1,15) / 100,
			sales_goals: 0.672,
			number_of_sales: 2608,
			change: 0.035,
			total_sales: 42200,
			total_change: -0.045
		},
		users: [
			{
				name: "Jack O. Lantern",
				avatar: "http.........完整代码请登录后点击上方下载按钮下载查看