feat: echarts

package.json

@@ -232,6 +232,8 @@
  "cookies-js": "^1.2.3",
  "cross-fetch": "^3.1.6",
  "dayjs": "^1.11.7",
+ "echarts": "^5.4.2",
+ "echarts-for-react": "^3.0.2",
  "fetch-intercept": "^2.4.0",
  "helmet": "^7.0.0",
  "js-md5": "^0.7.3",

src/pages/echarts/index.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import FixTabPanel from '@stateless/FixTabPanel'
+import ReactEcharts from 'echarts-for-react'
+
+const Echarts = () => {
+ const option = {
+ title: {
+ text: '某站点用户访问来源',
+ subtext: '纯属虚构',
+ x: 'center',
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a} <br/>{b} : {c} ({d}%)',
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
+ },
+ series: [
+ {
+ name: '访问来源',
+ type: 'pie',
+ radius: '55%',
+ center: ['50%', '60%'],
+ data: [
+ { value: 335, name: '直接访问' },
+ { value: 310, name: '邮件营销' },
+ { value: 234, name: '联盟广告' },
+ { value: 135, name: '视频广告' },
+ { value: 1548, name: '搜索引擎' },
+ ],
+ itemStyle: {
+ emphasis: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)',
+ },
+ },
+ },
+ ],
+ }
+ return (
+ <FixTabPanel>
+ <h3>Welcome to echarts!</h3>
+ <ReactEcharts option={option} />
+ </FixTabPanel>
+ )
+}
+
+export default Echarts

src/pages/layout/proSecNav/index.jsx

@@ -70,6 +70,7 @@ const ProSecNav = () => {
  { label: 'ReactTilt', key: '/tilt', icon: <QrcodeOutlined /> },
  { label: 'Music', key: '/music', icon: <FireOutlined /> },
  { label: 'Three', key: '/three', icon: <QrcodeOutlined /> },
+ { label: 'Echarts', key: '/echarts', icon: <FireOutlined /> },
  {
  label: '技术栈',
  key: '/sub-act',

src/routers/authRouter.jsx

@@ -12,7 +12,7 @@ const AuthRouter = (props) => {
  if (!token) return <Navigate to="/signin" replace />
 
  // * 后端返回有权限路由列表 暂时硬编码 需要结合 proSecNav组件中的menuItems
- const routerList = ['/', '/home', '/demo', '/parallax', '/dashboard', '/tilt', '/prism', '/three']
+ const routerList = ['/', '/home', '/demo', '/parallax', '/dashboard', '/tilt', '/prism', '/three', '/echarts']
  if (routerList.indexOf(pathname) === -1) return <Navigate to="/403" replace />
 
  return props.children

src/routers/index.jsx

@@ -27,6 +27,7 @@ const ParallaxVert = lazy(() => import('@pages/parallax'))
 const ReactTilt = lazy(() => import('@pages/tilt'))
 const ReactMusic = lazy(() => import('@pages/music'))
 const ReactThree = lazy(() => import('@pages/three'))
+const Echarts = lazy(() => import('@pages/echarts'))
 const QrCode = lazy(() => import('@pages/qrGenerate'))
 const PrismRender = lazy(() => import('@pages/prism'))
 const Exception403 = lazy(() => import('@stateless/Exception/exception403'))
@@ -103,6 +104,14 @@ const rootRouter = [
  auth: true,
  element: lazyLoad(ReactThree),
  },
+ {
+ index: false,
+ path: 'echarts',
+ name: 'ReactEcharts',
+ key: '/echarts',
+ auth: true,
+ element: lazyLoad(Echarts),
+ },
  {
  index: false,
  path: 'coupons',