feat: svg+渐变+两侧容高

src/components/respository/Info.tsx

@@ -40,6 +40,7 @@ import CustomLink from '../links/CustomLink';
 import Message from '../message';
 
 import { Repository, RepositoryProps } from '@/types/repository';
+import SvgTrend from '@/components/respository/SvgTrend';
 
 type URLoption = {
   url: string;
@@ -221,7 +222,6 @@ const Info: NextPage<RepositoryProps> = ({ repo }) => {
       </div>
     </div>
   );
-
   const chartOptions = repo.star_history && {
     xAxis: {
       type: 'category',
@@ -344,11 +344,12 @@ const Info: NextPage<RepositoryProps> = ({ repo }) => {
           <div className='hidden md:flex'>
             {repo.star_history ? (
               <div className='flex flex-col items-center'>
-                <ReactECharts
+                {/* <ReactECharts
                   option={chartOptions}
                   style={{ height: 54, width: 320 }}
                   opts={{ renderer: 'svg' }}
-                />
+                />*/}
+                <SvgTrend {...repo.star_history} />
                 <div className='text-xs text-gray-500'>{`过去 ${
                   repo.star_history.x.length
                 } 天共收获 ${numFormat(

src/components/respository/SvgTrend.tsx

@@ -0,0 +1,51 @@
+import { StarHistory } from '@/types/repository';
+
+const SvgTrend = (props: StarHistory) => {
+  const height = 54;
+  const width = 320;
+  const { max, min, x, y } = props;
+  const scale = 0.8; // 缩放比例 避免贴边
+  const indent = (height * (1 - scale)) / 2; //多出的空间给最小值和最大值
+  const fillColor =
+    max >= 100000
+      ? '#f16d6d'
+      : max >= 10000
+      ? '#ecc052'
+      : max >= 1000
+      ? '#409eff'
+      : '#67c23a';
+  const xRange = 320 / (x.length > 1 ? x.length - 1 : 1);
+  // 根据最大值和最小值差计算每个1的高度，后续最小值的y设置为0，最大值的y设置为height
+  const heightRange = (scale * height) / (max - min);
+  const points = y.map((stars, index) => {
+    const x = index * xRange;
+    // y轴摆正
+    const y = height - (stars - min) * heightRange - indent;
+    return `${x},${y}`;
+  });
+  // 画折线和折线加xy轴的多边形
+  return (
+    <svg width={width} height={height} key='render-svg'>
+      <linearGradient id='my-filter'>
+        `
+        <stop offset='0%' stopColor={fillColor + '33'} />
+        <stop offset='50%' stopColor={fillColor + '66'} />
+        <stop offset='100%' stopColor={fillColor} />
+      </linearGradient>
+      <polyline
+        points={points.join(' ')}
+        fill='transparent'
+        stroke={fillColor}
+        strokeWidth='2'
+      ></polyline>
+      <polygon
+        points={`${points.join(' ')} ${xRange * (x.length - 1)},${height} ${
+          xRange * (x.length - 1)
+        },${height} 0,${height}`}
+        fill='url(#my-filter) transparent'
+        stroke='none'
+      ></polygon>
+    </svg>
+  );
+};
+export default SvgTrend;

src/types/repository.tsx

@@ -14,8 +14,8 @@ export interface StarHistory {
   increment: number;
   max: number;
   min: number;
-  y: [];
-  x: [];
+  y: number[];
+  x: string[];
 }
 
 export interface Repository extends RepoType {