diff --git a/package-lock.json b/package-lock.json index 6ae624d7..2587a9c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,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", @@ -13536,6 +13538,33 @@ "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", "dev": true }, + "node_modules/echarts": { + "version": "5.4.2", + "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.2.tgz", + "integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==", + "dependencies": { + "tslib": "2.3.0", + "zrender": "5.4.3" + } + }, + "node_modules/echarts-for-react": { + "version": "3.0.2", + "resolved": "https://registry.npmmirror.com/echarts-for-react/-/echarts-for-react-3.0.2.tgz", + "integrity": "sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA==", + "dependencies": { + "fast-deep-equal": "^3.1.3", + "size-sensor": "^1.0.1" + }, + "peerDependencies": { + "echarts": "^3.0.0 || ^4.0.0 || ^5.0.0", + "react": "^15.0.0 || >=16.0.0" + } + }, + "node_modules/echarts/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz", @@ -29887,6 +29916,11 @@ "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==", "dev": true }, + "node_modules/size-sensor": { + "version": "1.0.1", + "resolved": "https://registry.npmmirror.com/size-sensor/-/size-sensor-1.0.1.tgz", + "integrity": "sha512-QTy7MnuugCFXIedXRpUSk9gUnyNiaxIdxGfUjr8xxXOqIB3QvBUYP9+b51oCg2C4dnhaeNk/h57TxjbvoJrJUA==" + }, "node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz", @@ -34739,6 +34773,19 @@ "node": ">=10" } }, + "node_modules/zrender": { + "version": "5.4.3", + "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.3.tgz", + "integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==", + "dependencies": { + "tslib": "2.3.0" + } + }, + "node_modules/zrender/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + }, "node_modules/zstddec": { "version": "0.0.2", "resolved": "https://registry.npmmirror.com/zstddec/-/zstddec-0.0.2.tgz", @@ -44995,6 +45042,31 @@ "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", "dev": true }, + "echarts": { + "version": "5.4.2", + "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.2.tgz", + "integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==", + "requires": { + "tslib": "2.3.0", + "zrender": "5.4.3" + }, + "dependencies": { + "tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + } + } + }, + "echarts-for-react": { + "version": "3.0.2", + "resolved": "https://registry.npmmirror.com/echarts-for-react/-/echarts-for-react-3.0.2.tgz", + "integrity": "sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA==", + "requires": { + "fast-deep-equal": "^3.1.3", + "size-sensor": "^1.0.1" + } + }, "ee-first": { "version": "1.1.1", "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz", @@ -57863,6 +57935,11 @@ "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==", "dev": true }, + "size-sensor": { + "version": "1.0.1", + "resolved": "https://registry.npmmirror.com/size-sensor/-/size-sensor-1.0.1.tgz", + "integrity": "sha512-QTy7MnuugCFXIedXRpUSk9gUnyNiaxIdxGfUjr8xxXOqIB3QvBUYP9+b51oCg2C4dnhaeNk/h57TxjbvoJrJUA==" + }, "slash": { "version": "3.0.0", "resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz", @@ -61676,6 +61753,21 @@ "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", "dev": true }, + "zrender": { + "version": "5.4.3", + "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.3.tgz", + "integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==", + "requires": { + "tslib": "2.3.0" + }, + "dependencies": { + "tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + } + } + }, "zstddec": { "version": "0.0.2", "resolved": "https://registry.npmmirror.com/zstddec/-/zstddec-0.0.2.tgz", diff --git a/package.json b/package.json index adb10b81..dfd7700b 100644 --- a/package.json +++ b/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", diff --git a/src/pages/echarts/index.jsx b/src/pages/echarts/index.jsx new file mode 100644 index 00000000..f6b370c4 --- /dev/null +++ b/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}
{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 ( + +

Welcome to echarts!

+ + + ) +} + +export default Echarts diff --git a/src/pages/layout/proSecNav/index.jsx b/src/pages/layout/proSecNav/index.jsx index 57222e0c..8923ea79 100644 --- a/src/pages/layout/proSecNav/index.jsx +++ b/src/pages/layout/proSecNav/index.jsx @@ -70,6 +70,7 @@ const ProSecNav = () => { { label: 'ReactTilt', key: '/tilt', icon: }, { label: 'Music', key: '/music', icon: }, { label: 'Three', key: '/three', icon: }, + { label: 'Echarts', key: '/echarts', icon: }, { label: '技术栈', key: '/sub-act', diff --git a/src/routers/authRouter.jsx b/src/routers/authRouter.jsx index 4b526cfe..1848af11 100644 --- a/src/routers/authRouter.jsx +++ b/src/routers/authRouter.jsx @@ -12,7 +12,7 @@ const AuthRouter = (props) => { if (!token) return // * 后端返回有权限路由列表 暂时硬编码 需要结合 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 return props.children diff --git a/src/routers/index.jsx b/src/routers/index.jsx index 9b3d7215..f5acd62d 100644 --- a/src/routers/index.jsx +++ b/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',