feats

package.json

@@ -13,6 +13,7 @@
     "@ant-design/pro-components": "^2.3.13",
     "@zjxpcyc/react-tiny-store": "^2.0.1",
     "antd": "^4.23.4",
+    "echarts": "^5.4.0",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-helmet": "^6.1.0",

pnpm-lock.yaml

@@ -8,6 +8,7 @@ specifiers:
   '@vitejs/plugin-react': ^2.0.0
   '@zjxpcyc/react-tiny-store': ^2.0.1
   antd: ^4.23.4
+  echarts: ^5.4.0
   less: ^4.1.3
   react: 18.1.0
   react-dom: 18.1.0
@@ -22,6 +23,7 @@ dependencies:
   '@ant-design/pro-components': registry.npmmirror.com/@ant-design/pro-components/2.3.13_4ahbtacxshq5zvmbq25uec6w6a
   '@zjxpcyc/react-tiny-store': registry.npmmirror.com/@zjxpcyc/react-tiny-store/2.0.1
   antd: registry.npmmirror.com/antd/4.23.4_ef5jwxihqo6n7gxfmzogljlgcm
+  echarts: registry.npmmirror.com/echarts/5.4.0
   react: registry.npmmirror.com/react/18.1.0
   react-dom: registry.npmmirror.com/react-dom/18.1.0_react@18.1.0
   react-helmet: registry.npmmirror.com/react-helmet/6.1.0_react@18.1.0
@@ -1191,6 +1193,15 @@ packages:
       tslib: registry.npmmirror.com/tslib/2.4.0
     dev: true
 
+  registry.npmmirror.com/echarts/5.4.0:
+    resolution: {integrity: sha512-uPsO9VRUIKAdFOoH3B0aNg7NRVdN7aM39/OjovjO9MwmWsAkfGyeXJhK+dbRi51iDrQWliXV60/XwLA7kg3z0w==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/echarts/-/echarts-5.4.0.tgz}
+    name: echarts
+    version: 5.4.0
+    dependencies:
+      tslib: registry.npmmirror.com/tslib/2.3.0
+      zrender: registry.npmmirror.com/zrender/5.4.0
+    dev: false
+
   registry.npmmirror.com/electron-to-chromium/1.4.211:
     resolution: {integrity: sha512-BZSbMpyFQU0KBJ1JG26XGeFI3i4op+qOYGxftmZXFZoHkhLgsSv4DHDJfl8ogII3hIuzGt51PaZ195OVu0yJ9A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.211.tgz}
     name: electron-to-chromium
@@ -2866,6 +2877,12 @@ packages:
     version: 1.0.6
     dev: false
 
+  registry.npmmirror.com/tslib/2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz}
+    name: tslib
+    version: 2.3.0
+    dev: false
+
   registry.npmmirror.com/tslib/2.4.0:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/tslib/-/tslib-2.4.0.tgz}
     name: tslib
@@ -2972,3 +2989,11 @@ packages:
     dependencies:
       loose-envify: registry.npmmirror.com/loose-envify/1.4.0
     dev: false
+
+  registry.npmmirror.com/zrender/5.4.0:
+    resolution: {integrity: sha512-rOS09Z2HSVGFs2dn/TuYk5BlCaZcVe8UDLLjj1ySYF828LATKKdxuakSZMvrDz54yiKPDYVfjdKqcX8Jky3BIA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/zrender/-/zrender-5.4.0.tgz}
+    name: zrender
+    version: 5.4.0
+    dependencies:
+      tslib: registry.npmmirror.com/tslib/2.3.0
+    dev: false

src/components/chart/index.jsx

@@ -0,0 +1,81 @@
+import React, { useRef, useEffect } from 'react';
+
+// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
+import * as echarts from 'echarts/core';
+// 引入图表，图表后缀都为 Chart
+import {
+  BarChart,
+  PieChart,
+  LineChart,
+  GaugeChart,
+  RadarChart,
+  PictorialBarChart,
+} from 'echarts/charts';
+// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
+import {
+  TitleComponent,
+  TooltipComponent,
+  ToolboxComponent,
+  GridComponent,
+  DatasetComponent,
+  LegendComponent,
+  DataZoomComponent,
+  TransformComponent,
+  VisualMapComponent,
+} from 'echarts/components';
+// 标签自动布局，全局过渡动画等特性
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+import { CanvasRenderer } from 'echarts/renderers';
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  ToolboxComponent,
+  GridComponent,
+  DatasetComponent,
+  LegendComponent,
+  DataZoomComponent,
+  TransformComponent,
+  VisualMapComponent,
+  BarChart,
+  PieChart,
+  LineChart,
+  GaugeChart,
+  RadarChart,
+  PictorialBarChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer
+]);
+
+export default (props) => {
+  const { className, style, option } = props;
+
+  const domRef = useRef();
+  const chartRef = useRef();
+
+  useEffect(() => {
+    if (!chartRef.current) {
+      chartRef.current = echarts.init(domRef.current);
+    }
+
+    const resize = () => {
+      const t = setTimeout(() => {
+        clearTimeout(t);
+        chartRef.current.resize();
+      }, 100);
+    };
+
+    chartRef.current.setOption(option);
+    resize();
+
+    window.addEventListener('resize', resize);    
+    return () => window.removeEventListener('resize', resize);
+  }, [option]);
+
+  return (
+    <div className={className} style={style} ref={domRef}></div>
+  )
+}

src/pages/Home.jsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import { Row, Col, Card, Space, Statistic } from 'antd';
-import { ArrowDownOutlined, ArrowUpOutlined, LikeOutlined } from '@ant-design/icons';
-import Container from '@/components/page/Container';
-
-export default (props) => {
-  return (
-    <Container>
-      <Row gutter={24}>
-        <Col span={6}>
-          <Card>
-            <Statistic title="Feedback" value={1128} prefix={<LikeOutlined />} />
-          </Card>
-        </Col>
-        <Col span={6}>
-          <Card>
-            <Statistic title="Unmerged" value={93} suffix="/ 100" />
-          </Card>
-        </Col>
-        <Col span={6}>
-          <Card>
-            <Statistic
-              title="Active"
-              value={11.28}
-              precision={2}
-              valueStyle={{ color: '#3f8600' }}
-              prefix={<ArrowUpOutlined />}
-              suffix="%"
-            />
-          </Card>
-        </Col>
-        <Col span={6}>
-          <Card>
-            <Statistic
-              title="Idle"
-              value={9.3}
-              precision={2}
-              valueStyle={{ color: '#cf1322' }}
-              prefix={<ArrowDownOutlined />}
-              suffix="%"
-            />
-          </Card>
-        </Col>
-      </Row>
-    </Container>
-  )
-}

src/pages/sample/home/components/AreaChart.jsx

@@ -0,0 +1,191 @@
+import React from 'react';
+import { Card } from 'antd';
+import * as echarts from 'echarts/core';
+import Chart from '@/components/chart';
+
+export default (props) => {
+  const option = {
+    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
+    // title: {
+    //   text: 'Gradient Stacked Area Chart'
+    // },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+    legend: {
+      data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: [
+      {
+        name: 'Line 1',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        lineStyle: {
+          width: 0
+        },
+        showSymbol: false,
+        areaStyle: {
+          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgb(128, 255, 165)'
+            },
+            {
+              offset: 1,
+              color: 'rgb(1, 191, 236)'
+            }
+          ])
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: [140, 232, 101, 264, 90, 340, 250]
+      },
+      {
+        name: 'Line 2',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        lineStyle: {
+          width: 0
+        },
+        showSymbol: false,
+        areaStyle: {
+          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgb(0, 221, 255)'
+            },
+            {
+              offset: 1,
+              color: 'rgb(77, 119, 255)'
+            }
+          ])
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: [120, 282, 111, 234, 220, 340, 310]
+      },
+      {
+        name: 'Line 3',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        lineStyle: {
+          width: 0
+        },
+        showSymbol: false,
+        areaStyle: {
+          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgb(55, 162, 255)'
+            },
+            {
+              offset: 1,
+              color: 'rgb(116, 21, 219)'
+            }
+          ])
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: [320, 132, 201, 334, 190, 130, 220]
+      },
+      {
+        name: 'Line 4',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        lineStyle: {
+          width: 0
+        },
+        showSymbol: false,
+        areaStyle: {
+          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgb(255, 0, 135)'
+            },
+            {
+              offset: 1,
+              color: 'rgb(135, 0, 157)'
+            }
+          ])
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: [220, 402, 231, 134, 190, 230, 120]
+      },
+      {
+        name: 'Line 5',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        lineStyle: {
+          width: 0
+        },
+        showSymbol: false,
+        label: {
+          show: true,
+          position: 'top'
+        },
+        areaStyle: {
+          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgb(255, 191, 0)'
+            },
+            {
+              offset: 1,
+              color: 'rgb(224, 62, 76)'
+            }
+          ])
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: [220, 302, 181, 234, 210, 290, 150]
+      }
+    ]
+  };
+  
+
+  return (
+    <Card title='Gradient Stacked Area Chart'>
+      <Chart option={option} style={props.style}></Chart>
+    </Card>
+  )
+}

src/pages/sample/home/components/Banner.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Row, Col, Card, Statistic } from 'antd';
+import { ArrowDownOutlined, ArrowUpOutlined, LikeOutlined } from '@ant-design/icons';
+
+export default (props) => {
+  return (
+    <Row gutter={24}>
+      <Col span={6}>
+        <Card>
+          <Statistic title="Feedback" value={1128} prefix={<LikeOutlined />} />
+        </Card>
+      </Col>
+      <Col span={6}>
+        <Card>
+          <Statistic title="Unmerged" value={93} suffix="/ 100" />
+        </Card>
+      </Col>
+      <Col span={6}>
+        <Card>
+          <Statistic
+            title="Active"
+            value={11.28}
+            precision={2}
+            valueStyle={{ color: '#3f8600' }}
+            prefix={<ArrowUpOutlined />}
+            suffix="%"
+          />
+        </Card>
+      </Col>
+      <Col span={6}>
+        <Card>
+          <Statistic
+            title="Idle"
+            value={9.3}
+            precision={2}
+            valueStyle={{ color: '#cf1322' }}
+            prefix={<ArrowDownOutlined />}
+            suffix="%"
+          />
+        </Card>
+      </Col>
+    </Row>
+  )
+}

src/pages/sample/home/components/BarChart.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Card } from 'antd';
+import Chart from '@/components/chart';
+
+export default (props) => {
+
+  const option = {
+    legend: {},
+    tooltip: {},
+    dataset: {
+      source: [
+        ['product', '2015', '2016', '2017'],
+        ['Matcha Latte', 43.3, 85.8, 93.7],
+        ['Milk Tea', 83.1, 73.4, 55.1],
+        ['Cheese Cocoa', 86.4, 65.2, 82.5],
+        ['Walnut Brownie', 72.4, 53.9, 39.1]
+      ]
+    },
+    xAxis: { type: 'category' },
+    yAxis: {},
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    // Declare several bar series, each will be mapped
+    // to a column of dataset.source by default.
+    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
+  };
+
+  return (
+    <Card title='Bar Chart'>
+      <Chart option={option} style={props.style}></Chart>
+    </Card>
+  )
+}

src/pages/sample/home/components/PictorialBar.jsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { Card } from 'antd';
+import * as echarts from 'echarts/core';
+import Chart from '@/components/chart';
+
+
+export default (props) => {
+  let category = [];
+  let dottedBase = +new Date();
+  let lineData = [];
+  let barData = [];
+  for (let i = 0; i < 20; i++) {
+    let date = new Date((dottedBase += 3600 * 24 * 1000));
+    category.push(
+      [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
+    );
+    let b = Math.random() * 200;
+    let d = Math.random() * 200;
+    barData.push(b);
+    lineData.push(d + b);
+  }
+
+  const option = {
+    backgroundColor: '#0f375f',
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    legend: {
+      data: ['line', 'bar'],
+      textStyle: {
+        color: '#ccc'
+      }
+    },
+    xAxis: {
+      data: category,
+      axisLine: {
+        lineStyle: {
+          color: '#ccc'
+        }
+      }
+    },
+    yAxis: {
+      splitLine: { show: false },
+      axisLine: {
+        lineStyle: {
+          color: '#ccc'
+        }
+      }
+    },
+    series: [
+      {
+        name: 'line',
+        type: 'line',
+        smooth: true,
+        showAllSymbol: true,
+        symbol: 'emptyCircle',
+        symbolSize: 15,
+        data: lineData
+      },
+      {
+        name: 'bar',
+        type: 'bar',
+        barWidth: 10,
+        itemStyle: {
+          borderRadius: 5,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#14c8d4' },
+            { offset: 1, color: '#43eec6' }
+          ])
+        },
+        data: barData
+      },
+      {
+        name: 'line',
+        type: 'bar',
+        barGap: '-100%',
+        barWidth: 10,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(20,200,212,0.5)' },
+            { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
+            { offset: 1, color: 'rgba(20,200,212,0)' }
+          ])
+        },
+        z: -12,
+        data: lineData
+      },
+      {
+        name: 'dotted',
+        type: 'pictorialBar',
+        symbol: 'rect',
+        itemStyle: {
+          color: '#0f375f'
+        },
+        symbolRepeat: true,
+        symbolSize: [12, 4],
+        symbolMargin: 1,
+        z: -10,
+        data: lineData
+      }
+    ]
+  };
+
+  return (
+    <Card title='Pictorial Chart'>
+      <Chart option={option} style={props.style}></Chart>
+    </Card>
+  )
+}

src/pages/sample/home/components/PieChart.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Card } from 'antd';
+import Chart from '@/components/chart';
+
+export default (props) => {
+
+  const option = {
+    // title: {
+    //   text: 'Referer of a Website',
+    //   subtext: 'Fake Data',
+    //   left: 'center'
+    // },
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      orient: 'vertical',
+      left: 'left'
+    },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: '50%',
+        data: [
+          { value: 1048, name: 'Search Engine' },
+          { value: 735, name: 'Direct' },
+          { value: 580, name: 'Email' },
+          { value: 484, name: 'Union Ads' },
+          { value: 300, name: 'Video Ads' }
+        ],
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }
+    ]
+  };
+
+  return (
+    <Card title='Basic Pie Chart'>
+      <Chart option={option} style={props.style}></Chart>
+    </Card>
+  )
+}

src/pages/sample/home/components/RadarChart.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Card } from 'antd';
+import Chart from '@/components/chart';
+
+export default (props) => {
+
+  const option = {
+    // title: {
+    //   text: 'Basic Radar Chart'
+    // },
+    legend: {
+      data: ['Allocated Budget', 'Actual Spending']
+    },
+    radar: {
+      // shape: 'circle',
+      indicator: [
+        { name: 'Sales', max: 6500 },
+        { name: 'Administration', max: 16000 },
+        { name: 'Information Technology', max: 30000 },
+        { name: 'Customer Support', max: 38000 },
+        { name: 'Development', max: 52000 },
+        { name: 'Marketing', max: 25000 }
+      ]
+    },
+    series: [
+      {
+        name: 'Budget vs spending',
+        type: 'radar',
+        data: [
+          {
+            value: [4200, 3000, 20000, 35000, 50000, 18000],
+            name: 'Allocated Budget'
+          },
+          {
+            value: [5000, 14000, 28000, 26000, 42000, 21000],
+            name: 'Actual Spending'
+          }
+        ]
+      }
+    ]
+  };
+
+  return (
+    <Card title='Basic Radar Chart'>
+      <Chart option={option} style={props.style}></Chart>
+    </Card>
+  )
+}

src/pages/sample/home/index.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Row, Col, Card, Space, Statistic } from 'antd';
+import Container from '@/components/page/Container';
+import Banner from './components/Banner';
+import AreaChart from './components/AreaChart';
+import BarChart from './components/BarChart';
+import PictorialBar from './components/PictorialBar';
+import RadarChart from './components/RadarChart';
+import PieChart from './components/PieChart';
+
+export default (props) => {
+
+  const chartStyle = {
+    height: '360px',
+    width: '100%',
+  }
+
+  return (
+    <Container>
+      <Banner />
+
+      <Row gutter={24} style={{ marginTop: '24px' }}>
+        <Col span={18}>
+          <AreaChart style={chartStyle}/>
+        </Col>
+        <Col span={6}>
+          <RadarChart style={chartStyle}/>
+        </Col>
+      </Row>
+
+      <Row gutter={24} style={{ marginTop: '24px' }}>
+        <Col span={6}>
+          <PieChart style={chartStyle}/>
+        </Col>
+        <Col span={18}>
+          <BarChart style={chartStyle}/>
+        </Col>
+      </Row>
+    </Container>
+  )
+}

src/routes/routes.jsx

@@ -1,7 +1,7 @@
 import AuthLayout from "@/layouts/AuthLayout";
-import Home from "@/pages/Home";
 import Login from '@/pages/login';
 import Page404 from '@/pages/404';
+import Home from "@/pages/sample/home";
 import BasicForm from '@/pages/sample/form';
 import BasicTable from '@/pages/sample/table';