chore: upgrade echarts-for-react version

Author: fecommunity

client/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@reactpress/client",
   "version": "1.0.0",
-  "private": true,
   "scripts": {
     "prebuild": "rimraf .next",
     "build": "next build",
@@ -51,7 +50,9 @@
     "react-visibility-sensor": "^5.1.1",
     "showdown": "^1.9.1",
     "viewerjs": "^1.5.0",
-    "xml": "^1.0.1"
+    "xml": "^1.0.1",
+    "echarts-for-react": "^3.0.2",
+    "echarts": "^5.6.0"
   },
   "devDependencies": {
     "@types/node": "17.0.22",

client/pages/admin/article/index.tsx

@@ -6,7 +6,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 
 import { LocaleTime } from '@/components/LocaleTime';
 import { PaginationTable } from '@/components/PaginationTable';
-// import { ViewChart } from '@/components/ViewChart';
+import { ViewChart } from '@/components/ViewChart';
 import { getRandomColor } from '@/constants';
 import { useAsyncLoading } from '@/hooks/useAsyncLoading';
 import { usePagination } from '@/hooks/usePagination';
@@ -338,7 +338,7 @@ const Article: NextPage = () => {
         >
           <div style={{ textAlign: 'center' }}>
             <Spin spinning={getViewsLoading}>
-              {/* <ViewChart data={views} /> */}
+              <ViewChart data={views} />
             </Spin>
           </div>
         </Modal>

client/src/components/ViewChart/index.tsx

@@ -1,6 +1,6 @@
 import dateFormat from 'date-fns/format';
-// import echarts from 'echarts';
-// import ReactEcharts from 'echarts-for-react';
+import ReactEcharts from 'echarts-for-react';
+import * as echarts from 'echarts';
 import React from 'react';
 
 import { groupBy } from '@/utils';
@@ -22,74 +22,73 @@ export const ViewChart: React.FC<IProps> = ({ data: propsData = [] }) => {
     return a;
   }, []);
 
-  // const option = {
-  //   grid: {
-  //     top: '3%',
-  //     left: '3%',
-  //     right: '4%',
-  //     bottom: '3%',
-  //     containLabel: true,
-  //   },
-  //   tooltip: {
-  //     trigger: 'axis',
-  //     formatter(d) {
-  //       const target = d && d[0] && data[d[0].dataIndex];
+  const option = {
+    grid: {
+      top: '3%',
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: 'axis',
+      formatter(d) {
+        const target = d && d[0] && data[d[0].dataIndex];
 
-  //       return `日期：${target.updateAt}<br />访问量：${target.count}`;
-  //     },
-  //   },
-  //   xAxis: {
-  //     type: 'category',
-  //     boundaryGap: false,
-  //     data: data.map((d) => d.updateAt),
-  //   },
-  //   yAxis: {
-  //     type: 'value',
-  //     boundaryGap: [0, '100%'],
-  //   },
-  //   dataZoom: [
-  //     {
-  //       type: 'inside',
-  //     },
-  //     {
-  //       handleIcon:
-  //         'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
-  //       handleSize: '80%',
-  //       handleStyle: {
-  //         color: 'var(--bg)',
-  //         shadowBlur: 3,
-  //         shadowColor: 'rgba(0, 0, 0, 0.6)',
-  //         shadowOffsetX: 2,
-  //         shadowOffsetY: 2,
-  //       },
-  //     },
-  //   ],
-  //   series: [
-  //     {
-  //       type: 'line',
-  //       smooth: true,
-  //       symbol: 'none',
-  //       sampling: 'average',
-  //       itemStyle: {
-  //         color: 'rgb(255, 70, 131)',
-  //       },
-  //       areaStyle: {
-  //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-  //           {
-  //             offset: 0,
-  //             color: 'rgb(255, 158, 68)',
-  //           },
-  //           {
-  //             offset: 1,
-  //             color: 'rgb(255, 70, 131)',
-  //           },
-  //         ]),
-  //       },
-  //       data: data.map((d) => d.count),
-  //     },
-  //   ],
-  // };
-  // TOOD: replace echarts with antd-charts
-  // return <ReactEcharts option={option} />;
-  return null;
+        return `日期：${target.updateAt}<br />访问量：${target.count}`;
+      },
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: data.map((d) => d.updateAt),
+    },
+    yAxis: {
+      type: 'value',
+      boundaryGap: [0, '100%'],
+    },
+    dataZoom: [
+      {
+        type: 'inside',
+      },
+      {
+        handleIcon:
+          'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+        handleSize: '80%',
+        handleStyle: {
+          color: 'var(--bg)',
+          shadowBlur: 3,
+          shadowColor: 'rgba(0, 0, 0, 0.6)',
+          shadowOffsetX: 2,
+          shadowOffsetY: 2,
+        },
+      },
+    ],
+    series: [
+      {
+        type: 'line',
+        smooth: true,
+        symbol: 'none',
+        sampling: 'average',
+        itemStyle: {
+          color: 'rgb(255, 70, 131)',
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgb(255, 158, 68)',
+            },
+            {
+              offset: 1,
+              color: 'rgb(255, 70, 131)',
+            },
+          ]),
+        },
+        data: data.map((d) => d.count),
+      },
+    ],
+  };
+
+  return <ReactEcharts key={JSON.stringify(option)} option={option} />;
 };