From 8e6e00bc70f3968f16827607cfc5ddd483992499 Mon Sep 17 00:00:00 2001
From: Flcwl <flcwl@vip.qq.com>
Date: Mon, 21 Mar 2022 20:25:40 +0800
Subject: [PATCH] fix: solve merge conflict

---
 .../content-distribution.tsx                  | 130 +++++-----
 .../country-view-hot-map.tsx                  |  99 ++++----
 .../product-problem-analysis.tsx              | 150 +++++------
 .../user-distribution.tsx                     | 181 ++++++-------
 .../dashboard-data-analysis/view-trend.tsx    | 237 +++++++++---------
 yarn.lock                                     |  38 ++-
 6 files changed, 447 insertions(+), 388 deletions(-)

diff --git a/src/views/dashboard-data-analysis/content-distribution.tsx b/src/views/dashboard-data-analysis/content-distribution.tsx
index 6cfae96..9d1a7af 100644
--- a/src/views/dashboard-data-analysis/content-distribution.tsx
+++ b/src/views/dashboard-data-analysis/content-distribution.tsx
@@ -1,71 +1,71 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react'
+// @ts-nocheck
+
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import * as Echarts from 'echarts'
 import { Loading } from '@hi-ui/loading'
-import {fetchContentDistribution} from "./api";
-import {EChartsOptionsGenerator} from "./common";
+import { fetchContentDistribution } from './api'
+import { EChartsOptionsGenerator } from './common'
 
-const generateChartOption =(data: any[]) => (
-  {
-    grid: {
-      left: '48px',
-      right: '24px',
-      top: '20px',
-      bottom: '48px'
-    },
-    tooltip:{
-        show: true
-    },
-    color: ['#237FFA'],
-    xAxis: [
-      {
-        type: 'category',
-        data: data.map(item => item.title),
-        axisTick: {
-          show: false
-        },
-        offset: 12,
-        axisLine: {
-          lineStyle: {
-            color: '#EBEDF0'
-          }
+const generateChartOption = (data: any[]) => ({
+  grid: {
+    left: '48px',
+    right: '24px',
+    top: '20px',
+    bottom: '48px',
+  },
+  tooltip: {
+    show: true,
+  },
+  color: ['#237FFA'],
+  xAxis: [
+    {
+      type: 'category',
+      data: data.map((item) => item.title),
+      axisTick: {
+        show: false,
+      },
+      offset: 12,
+      axisLine: {
+        lineStyle: {
+          color: '#EBEDF0',
         },
-        axisLabel: {
-          color: '#1F2733'
-        }
-      }
-    ],
-    yAxis: [
-      {
-        type: 'value',
-        axisLine: {
-          lineStyle: {
-            color: '#1F2733'
-          }
+      },
+      axisLabel: {
+        color: '#1F2733',
+      },
+    },
+  ],
+  yAxis: [
+    {
+      type: 'value',
+      axisLine: {
+        lineStyle: {
+          color: '#1F2733',
         },
-        offset: 12,
-        splitLine: {
-          lineStyle: {
-            color: '#EBEDF0'
-          }
-        }
-      }
-    ],
-    series: [
-      {
-        type: 'bar',
-        // symbol: 'none',
-        emphasis: {
-          focus: 'series'
+      },
+      offset: 12,
+      splitLine: {
+        lineStyle: {
+          color: '#EBEDF0',
         },
-        data: data.map(item => item.num),
-        barWidth: 36,
-        itemStyle:{
-          borderRadius: 4
-        }
-      }
-    ]
-  }
-)
+      },
+    },
+  ],
+  series: [
+    {
+      type: 'bar',
+      // symbol: 'none',
+      emphasis: {
+        focus: 'series',
+      },
+      data: data.map((item) => item.num),
+      barWidth: 36,
+      itemStyle: {
+        borderRadius: 4,
+      },
+    },
+  ],
+})
 export const ContentDistribution = (props: { style?: React.CSSProperties }) => {
   const [container, setContainer] = useState<HTMLDivElement | null>(null)
   const chartRef = useRef<Echarts.EChartsType | undefined>()
@@ -75,7 +75,7 @@ export const ContentDistribution = (props: { style?: React.CSSProperties }) => {
 
   useEffect(() => {
     setIsFetching(true)
-    fetchContentDistribution().then(result => {
+    fetchContentDistribution().then((result) => {
       setData(result.data)
       setIsFetching(false)
     })
@@ -107,8 +107,8 @@ export const ContentDistribution = (props: { style?: React.CSSProperties }) => {
   return (
     <React.Fragment>
       <Loading visible={isFetching}>
-        <div style={{...props.style, position: 'relative'}}>
-          <div ref={e => setContainer(e)} style={{width: '100%', height: '100%'}}/>
+        <div style={{ ...props.style, position: 'relative' }}>
+          <div ref={(e) => setContainer(e)} style={{ width: '100%', height: '100%' }} />
         </div>
       </Loading>
     </React.Fragment>
diff --git a/src/views/dashboard-data-analysis/country-view-hot-map.tsx b/src/views/dashboard-data-analysis/country-view-hot-map.tsx
index a735e69..44d5fdd 100644
--- a/src/views/dashboard-data-analysis/country-view-hot-map.tsx
+++ b/src/views/dashboard-data-analysis/country-view-hot-map.tsx
@@ -1,42 +1,44 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react'
+// @ts-nocheck
+
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import * as Echarts from 'echarts'
-import {Loading} from '@hi-ui/loading'
-import {fetchCountryViewHotMap} from "./api";
-import {message} from "@hi-ui/hiui";
+import { Loading } from '@hi-ui/loading'
+import { fetchCountryViewHotMap } from './api'
+import { message } from '@hi-ui/hiui'
 
-const generateChartOption = (data: any[]) => (
-  {
-    visualMap: {
-      min: 0,
-      max: 1600,
-      realtime: false,
-      calculable: true,
-      orient: 'horizontal',
-      inRange: {
-        color: ['#fff', '#237FFA']
-      },
-      itemWidth: 6,
-      itemHeight: 160,
-      textStyle:{
-        lineHeight: 40
-      }
+const generateChartOption = (data: any[]) => ({
+  visualMap: {
+    min: 0,
+    max: 1600,
+    realtime: false,
+    calculable: true,
+    orient: 'horizontal',
+    inRange: {
+      color: ['#fff', '#237FFA'],
+    },
+    itemWidth: 6,
+    itemHeight: 160,
+    textStyle: {
+      lineHeight: 40,
     },
-    series:[{
-      type:'map',
-      map:'china',
-      data: data.map(item => ({
+  },
+  series: [
+    {
+      type: 'map',
+      map: 'china',
+      data: data.map((item) => ({
         name: item.title,
-        value: item.num
+        value: item.num,
       })),
       top: 10,
       bottom: -40,
-      itemStyle:{
+      itemStyle: {
         borderColor: '#fff',
-        borderWidth: 1
-      }
-    }]
-  }
-)
+        borderWidth: 1,
+      },
+    },
+  ],
+})
 
 export const CountryViewHotMap = (props: { style?: React.CSSProperties }) => {
   const [container, setContainer] = useState<HTMLDivElement | null>(null)
@@ -48,26 +50,33 @@ export const CountryViewHotMap = (props: { style?: React.CSSProperties }) => {
   useEffect(() => {
     const init = async () => {
       setIsFetching(true)
-      const geo = await fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json').then(e => {
-        if(e.status === 200){
-          return e.text()
-        }else{
-          return undefined
-        }
-      }).catch(e => undefined)
+      const geo = await fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
+        .then((e) => {
+          if (e.status === 200) {
+            return e.text()
+          } else {
+            return undefined
+          }
+        })
+        .catch((e) => undefined)
 
-      if(geo){
+      if (geo) {
         const geoObject = JSON.parse(geo)
         Echarts.registerMap('china', geoObject)
 
-        const result = await fetchCountryViewHotMap([...(geoObject.features as any[]).map(item => item.properties.name).filter(item => item),'南海诸岛'])
+        const result = await fetchCountryViewHotMap([
+          ...(geoObject.features as any[])
+            .map((item) => item.properties.name)
+            .filter((item) => item),
+          '南海诸岛',
+        ])
 
         setData(result.data)
         setIsFetching(false)
-      }else{
+      } else {
         message.open({
-          type:'error',
-          title:'获取全国GEO数据失败'
+          type: 'error',
+          title: '获取全国GEO数据失败',
         })
       }
     }
@@ -101,8 +110,8 @@ export const CountryViewHotMap = (props: { style?: React.CSSProperties }) => {
   return (
     <React.Fragment>
       <Loading visible={isFetching}>
-        <div style={{...props.style, position: 'relative'}}>
-          <div ref={e => setContainer(e)} style={{width: '100%', height: '100%'}}/>
+        <div style={{ ...props.style, position: 'relative' }}>
+          <div ref={(e) => setContainer(e)} style={{ width: '100%', height: '100%' }} />
         </div>
       </Loading>
     </React.Fragment>
diff --git a/src/views/dashboard-data-analysis/product-problem-analysis.tsx b/src/views/dashboard-data-analysis/product-problem-analysis.tsx
index 917f5e8..ae2f0eb 100644
--- a/src/views/dashboard-data-analysis/product-problem-analysis.tsx
+++ b/src/views/dashboard-data-analysis/product-problem-analysis.tsx
@@ -1,81 +1,81 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react'
+// @ts-nocheck
+
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import * as Echarts from 'echarts'
-import {Loading} from '@hi-ui/loading'
-import {fetchProductProblemAnalysis} from "./api";
-import {EChartsOptionsGenerator} from "./common";
+import { Loading } from '@hi-ui/loading'
+import { fetchProductProblemAnalysis } from './api'
+import { EChartsOptionsGenerator } from './common'
 
-const generateChartOption = (data: any[]) => (
-  {
-    grid: {
-      left: '68px',
-      right: '24px',
-      top: '28px',
-      bottom: '48px'
-    },
-    tooltip: {
-      show: true
-    },
-    color: ['#237FFA', '#14CA64'],
-    legend: EChartsOptionsGenerator.legend(['问题', '答复']),
-    yAxis: [
-      {
-        type: 'category',
-        data: data.map(item => item.title),
-        axisTick: {
-          show: false
+const generateChartOption = (data: any[]) => ({
+  grid: {
+    left: '68px',
+    right: '24px',
+    top: '28px',
+    bottom: '48px',
+  },
+  tooltip: {
+    show: true,
+  },
+  color: ['#237FFA', '#14CA64'],
+  legend: EChartsOptionsGenerator.legend(['问题', '答复']),
+  yAxis: [
+    {
+      type: 'category',
+      data: data.map((item) => item.title),
+      axisTick: {
+        show: false,
+      },
+      offset: 12,
+      axisLine: {
+        lineStyle: {
+          color: '#EBEDF0',
         },
-        offset: 12,
-        axisLine: {
-          lineStyle: {
-            color: '#EBEDF0'
-          }
+      },
+      axisLabel: {
+        color: '#1F2733',
+      },
+    },
+  ],
+  xAxis: [
+    {
+      type: 'value',
+      axisLine: {
+        lineStyle: {
+          color: '#1F2733',
         },
-        axisLabel: {
-          color: '#1F2733'
-        }
-      }
-    ],
-    xAxis: [
-      {
-        type: 'value',
-        axisLine: {
-          lineStyle: {
-            color: '#1F2733'
-          }
+      },
+      offset: 12,
+      splitLine: {
+        lineStyle: {
+          color: '#EBEDF0',
         },
-        offset: 12,
-        splitLine: {
-          lineStyle: {
-            color: '#EBEDF0'
-          }
-        }
-      }
-    ],
-    series: [
-      {
-        name: '问题',
-        type: 'bar',
-        // symbol: 'none',
-        data: data.map(item => item.problem),
-        barWidth: 12,
-        itemStyle: {
-          borderRadius: 4
-        }
       },
-      {
-        name: '答复',
-        type: 'bar',
-        // symbol: 'none',
-        data: data.map(item => item.replay),
-        barWidth: 12,
-        barGap: '50%',
-        itemStyle: {
-          borderRadius: 4
-        }
-      }
-    ]
-  }
-)
+    },
+  ],
+  series: [
+    {
+      name: '问题',
+      type: 'bar',
+      // symbol: 'none',
+      data: data.map((item) => item.problem),
+      barWidth: 12,
+      itemStyle: {
+        borderRadius: 4,
+      },
+    },
+    {
+      name: '答复',
+      type: 'bar',
+      // symbol: 'none',
+      data: data.map((item) => item.replay),
+      barWidth: 12,
+      barGap: '50%',
+      itemStyle: {
+        borderRadius: 4,
+      },
+    },
+  ],
+})
 export const ProductProblemAnalysis = (props: { style?: React.CSSProperties }) => {
   const [container, setContainer] = useState<HTMLDivElement | null>(null)
   const chartRef = useRef<Echarts.EChartsType | undefined>()
@@ -85,7 +85,7 @@ export const ProductProblemAnalysis = (props: { style?: React.CSSProperties }) =
 
   useEffect(() => {
     setIsFetching(true)
-    fetchProductProblemAnalysis().then(result => {
+    fetchProductProblemAnalysis().then((result) => {
       setData((result.data as any[]).sort((a, b) => a.problem - b.problem))
       setIsFetching(false)
     })
@@ -117,8 +117,8 @@ export const ProductProblemAnalysis = (props: { style?: React.CSSProperties }) =
   return (
     <React.Fragment>
       <Loading visible={isFetching}>
-        <div style={{...props.style, position: 'relative'}}>
-          <div ref={e => setContainer(e)} style={{width: '100%', height: '100%'}}/>
+        <div style={{ ...props.style, position: 'relative' }}>
+          <div ref={(e) => setContainer(e)} style={{ width: '100%', height: '100%' }} />
         </div>
       </Loading>
     </React.Fragment>
diff --git a/src/views/dashboard-data-analysis/user-distribution.tsx b/src/views/dashboard-data-analysis/user-distribution.tsx
index ac03b8d..f088fd5 100644
--- a/src/views/dashboard-data-analysis/user-distribution.tsx
+++ b/src/views/dashboard-data-analysis/user-distribution.tsx
@@ -1,67 +1,66 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react'
-import * as Echarts from 'echarts'
-import {Loading} from '@hi-ui/loading'
-import {fetchUserDistribution} from "./api";
-import {EChartsOptionsGenerator} from "./common";
+// @ts-nocheck
 
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import * as Echarts from 'echarts'
+import { Loading } from '@hi-ui/loading'
+import { fetchUserDistribution } from './api'
+import { EChartsOptionsGenerator } from './common'
 
-const generateChartOption = (data: any[]) => (
-  {
-    color: ['#237FFA', '#14CA64', '#FAB007', '#2BC7C7', '#9772fB'],
-    legend: {
-      ...EChartsOptionsGenerator.legend(data.map(item => item.title)),
-      bottom: 12
-    },
-    series: [
-      {
-        name: '用户数',
-        type: 'pie',
-        radius: ['50%', '70%'],
-        avoidLabelOverlap: false,
-        itemStyle: {
-          borderRadius: 5,
-          borderColor: '#fff',
-          borderWidth: 2
-        },
-        labelLine: {
-          show: false
-        },
+const generateChartOption = (data: any[]) => ({
+  color: ['#237FFA', '#14CA64', '#FAB007', '#2BC7C7', '#9772fB'],
+  legend: {
+    ...EChartsOptionsGenerator.legend(data.map((item) => item.title)),
+    bottom: 12,
+  },
+  series: [
+    {
+      name: '用户数',
+      type: 'pie',
+      radius: ['50%', '70%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 5,
+        borderColor: '#fff',
+        borderWidth: 2,
+      },
+      labelLine: {
+        show: false,
+      },
+      label: {
+        show: false,
+        position: 'center',
+      },
+      emphasis: {
         label: {
-          show: false,
-          position: 'center',
-        },
-        emphasis: {
-          label: {
-            show: true,
-            formatter: '{title|{c}}\n{des|{b}} {percentage|{d}%}',
-            rich: {
-              title: {
-                fontSize: '24',
-                fontWeight: 'bold',
-                lineHeight: '34',
-                color: '#1F2733'
-              },
-              des: {
-                fontSize: '14',
-                color: '#929AA6',
-                lineHeight: '20'
-              },
-              percentage: {
-                color: '#237FFA'
-              }
-            }
-          }
+          show: true,
+          formatter: '{title|{c}}\n{des|{b}} {percentage|{d}%}',
+          rich: {
+            title: {
+              fontSize: '24',
+              fontWeight: 'bold',
+              lineHeight: '34',
+              color: '#1F2733',
+            },
+            des: {
+              fontSize: '14',
+              color: '#929AA6',
+              lineHeight: '20',
+            },
+            percentage: {
+              color: '#237FFA',
+            },
+          },
         },
-        data: data.map(item => ({
-          value: item.num,
-          name: item.title
-        })),
-        bottom: 40,
-        top: -40
-      }
-    ]
-  }
-)
+      },
+      data: data.map((item) => ({
+        value: item.num,
+        name: item.title,
+      })),
+      bottom: 40,
+      top: -40,
+    },
+  ],
+})
 export const UserDistribution = (props: { style?: React.CSSProperties }) => {
   const [container, setContainer] = useState<HTMLDivElement | null>(null)
   const chartRef = useRef<Echarts.EChartsType | undefined>()
@@ -72,7 +71,7 @@ export const UserDistribution = (props: { style?: React.CSSProperties }) => {
 
   useEffect(() => {
     setIsFetching(true)
-    fetchUserDistribution().then(result => {
+    fetchUserDistribution().then((result) => {
       setData(result.data)
       setIsFetching(false)
     })
@@ -81,16 +80,16 @@ export const UserDistribution = (props: { style?: React.CSSProperties }) => {
   useEffect(() => {
     if (!chartRef.current && container) {
       chartRef.current = Echarts.init(container)
-      chartRef.current?.on('mouseover', e => {
+      chartRef.current?.on('mouseover', (e) => {
         setIsShowTotal(false)
       })
-      chartRef.current?.on('mouseout', e => {
+      chartRef.current?.on('mouseout', (e) => {
         setIsShowTotal(true)
       })
-      chartRef.current?.on('highlight', e => {
+      chartRef.current?.on('highlight', (e) => {
         setIsShowTotal(false)
       })
-      chartRef.current?.on('downplay', e => {
+      chartRef.current?.on('downplay', (e) => {
         setIsShowTotal(true)
       })
     }
@@ -116,29 +115,39 @@ export const UserDistribution = (props: { style?: React.CSSProperties }) => {
   return (
     <React.Fragment>
       <Loading visible={isFetching}>
-        <div style={{...props.style, position: 'relative'}}>
-          <div ref={e => setContainer(e)} style={{width: '100%', height: '100%'}}/>
+        <div style={{ ...props.style, position: 'relative' }}>
+          <div ref={(e) => setContainer(e)} style={{ width: '100%', height: '100%' }} />
           {/* TODO: 此处不高亮则展示总数的功能，暂时没有找到方法直接通过配置EChart 实现，故而使用了监听事件展示方法 */}
           {isShowTotal && !isFetching && (
-            <div style={{
-              position: "absolute",
-              top: '50%',
-              left: '50%',
-              transform: 'translateX(-50%) translateY(calc(-50% - 40px))'
-            }}>
-              <div style={{
-                fontSize: '24px',
-                lineHeight: '34px',
-                fontWeight: 'bold',
-                color: '#1F2733',
-                textAlign:'center'
-              }}>{data.map(item => item.num).reduce((pre, cur) => pre + cur, 0)}</div>
-              <div style={{
-                fontSize:'14px',
-                lineHeight:'20px',
-                color:'#929AA6',
-                textAlign:'center'
-              }}>用户数</div>
+            <div
+              style={{
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translateX(-50%) translateY(calc(-50% - 40px))',
+              }}
+            >
+              <div
+                style={{
+                  fontSize: '24px',
+                  lineHeight: '34px',
+                  fontWeight: 'bold',
+                  color: '#1F2733',
+                  textAlign: 'center',
+                }}
+              >
+                {data.map((item) => item.num).reduce((pre, cur) => pre + cur, 0)}
+              </div>
+              <div
+                style={{
+                  fontSize: '14px',
+                  lineHeight: '20px',
+                  color: '#929AA6',
+                  textAlign: 'center',
+                }}
+              >
+                用户数
+              </div>
             </div>
           )}
         </div>
diff --git a/src/views/dashboard-data-analysis/view-trend.tsx b/src/views/dashboard-data-analysis/view-trend.tsx
index e9f7f7e..b1536d5 100644
--- a/src/views/dashboard-data-analysis/view-trend.tsx
+++ b/src/views/dashboard-data-analysis/view-trend.tsx
@@ -1,124 +1,127 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react'
+// @ts-nocheck
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import * as Echarts from 'echarts'
 import { RadioGroup } from '@hi-ui/radio'
 import { Loading } from '@hi-ui/loading'
-import {fetchViewTrend} from "./api";
-import {EChartsOptionsGenerator} from "./common";
+import { fetchViewTrend } from './api'
+import { EChartsOptionsGenerator } from './common'
 
 enum ViewRange {
   day = 'day',
   week = 'week',
-  month = 'month'
+  month = 'month',
 }
 
-const ViewRangeRadioData = [{
-  id: ViewRange.day,
-  title: '日'
-}, {
-  id: ViewRange.week,
-  title: '周'
-}, {
-  id: ViewRange.month,
-  title: '月'
-}]
-
-const generateChartOption =(data: any[]) => (
+const ViewRangeRadioData = [
   {
-    grid: {
-      left: '48px',
-      right: '24px',
-      top: '60px',
-      bottom: '48px'
-    },
-    color: ['#237FFA', '#14CA64'],
-    legend: EChartsOptionsGenerator.legend(['用户量', '访问量']),
-    xAxis: [
-      {
-        type: 'category',
-        boundaryGap: false,
-        data: data.map(item => item.title),
-        axisTick: {
-          show: false
-        },
-        offset: 12,
-        axisLine: {
-          lineStyle: {
-            color: '#EBEDF0'
-          }
-        },
-        axisLabel: {
-          color: '#1F2733'
-        }
-      }
-    ],
-    yAxis: [
-      {
-        type: 'value',
-        axisLine: {
-          lineStyle: {
-            color: '#1F2733'
-          }
-        },
-        offset: 12,
-        splitLine: {
-          lineStyle: {
-            color: '#EBEDF0'
-          }
-        }
-      }
-    ],
-    series: [
-      {
-        name: '用户量',
-        type: 'line',
-        areaStyle: {
-          opacity: 0.8,
-          color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: '#BDE2EF'
-            },
-            {
-              offset: 1,
-              color: '#fff'
-            }
-          ])
-        },
-        smooth: true,
-        symbol: 'none',
-        emphasis: {
-          focus: 'series'
+    id: ViewRange.day,
+    title: '日',
+  },
+  {
+    id: ViewRange.week,
+    title: '周',
+  },
+  {
+    id: ViewRange.month,
+    title: '月',
+  },
+]
+
+const generateChartOption = (data: any[]) => ({
+  grid: {
+    left: '48px',
+    right: '24px',
+    top: '60px',
+    bottom: '48px',
+  },
+  color: ['#237FFA', '#14CA64'],
+  legend: EChartsOptionsGenerator.legend(['用户量', '访问量']),
+  xAxis: [
+    {
+      type: 'category',
+      boundaryGap: false,
+      data: data.map((item) => item.title),
+      axisTick: {
+        show: false,
+      },
+      offset: 12,
+      axisLine: {
+        lineStyle: {
+          color: '#EBEDF0',
         },
-        stack: 'Total',
-        data: data.map(item => item.user)
       },
-      {
-        name: '访问量',
-        type: 'line',
-        stack: 'Total',
-        areaStyle: {
-          opacity: 0.8,
-          color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: '#B3F2C6'
-            },
-            {
-              offset: 1,
-              color: '#fff'
-            }
-          ])
+      axisLabel: {
+        color: '#1F2733',
+      },
+    },
+  ],
+  yAxis: [
+    {
+      type: 'value',
+      axisLine: {
+        lineStyle: {
+          color: '#1F2733',
         },
-        symbol: 'none',
-        smooth: true,
-        emphasis: {
-          focus: 'series'
+      },
+      offset: 12,
+      splitLine: {
+        lineStyle: {
+          color: '#EBEDF0',
         },
-        data: data.map(item => item.view)
       },
-    ]
-  }
-)
+    },
+  ],
+  series: [
+    {
+      name: '用户量',
+      type: 'line',
+      areaStyle: {
+        opacity: 0.8,
+        color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: '#BDE2EF',
+          },
+          {
+            offset: 1,
+            color: '#fff',
+          },
+        ]),
+      },
+      smooth: true,
+      symbol: 'none',
+      emphasis: {
+        focus: 'series',
+      },
+      stack: 'Total',
+      data: data.map((item) => item.user),
+    },
+    {
+      name: '访问量',
+      type: 'line',
+      stack: 'Total',
+      areaStyle: {
+        opacity: 0.8,
+        color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: '#B3F2C6',
+          },
+          {
+            offset: 1,
+            color: '#fff',
+          },
+        ]),
+      },
+      symbol: 'none',
+      smooth: true,
+      emphasis: {
+        focus: 'series',
+      },
+      data: data.map((item) => item.view),
+    },
+  ],
+})
 export const ViewTrend = (props: { style?: React.CSSProperties }) => {
   const [container, setContainer] = useState<HTMLDivElement | null>(null)
   const chartRef = useRef<Echarts.EChartsType | undefined>()
@@ -129,7 +132,7 @@ export const ViewTrend = (props: { style?: React.CSSProperties }) => {
 
   useEffect(() => {
     setIsFetching(true)
-    fetchViewTrend(viewRange).then(result => {
+    fetchViewTrend(viewRange).then((result) => {
       setData(result.data)
       setIsFetching(false)
     })
@@ -161,13 +164,19 @@ export const ViewTrend = (props: { style?: React.CSSProperties }) => {
   return (
     <React.Fragment>
       <Loading visible={isFetching}>
-        <div style={{...props.style, position: 'relative'}}>
-          <div ref={e => setContainer(e)} style={{width: '100%', height: '100%'}}/>
-          <RadioGroup style={{
-            position: 'absolute',
-            left: 0,
-            top: '-2px'
-          }} type={'button'} data={ViewRangeRadioData} value={viewRange} onChange={e => setViewRange(e as ViewRange)}/>
+        <div style={{ ...props.style, position: 'relative' }}>
+          <div ref={(e) => setContainer(e)} style={{ width: '100%', height: '100%' }} />
+          <RadioGroup
+            style={{
+              position: 'absolute',
+              left: 0,
+              top: '-2px',
+            }}
+            type={'button'}
+            data={ViewRangeRadioData}
+            value={viewRange}
+            onChange={(e) => setViewRange(e as ViewRange)}
+          />
         </div>
       </Loading>
     </React.Fragment>
diff --git a/yarn.lock b/yarn.lock
index e891cc6..cb770c3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1803,7 +1803,7 @@
     "@hi-ui/locale-context" "^4.0.0-beta.10"
     "@hi-ui/pagination" "^4.0.0-beta.18"
 
-"@hi-ui/loading@^4.0.0-beta.9":
+"@hi-ui/loading@^4.0.0-beta.7", "@hi-ui/loading@^4.0.0-beta.9":
   version "4.0.0-beta.9"
   resolved "https://pkgs.d.xiaomi.net:443/artifactory/api/npm/mi-npm/@hi-ui/loading/-/loading-4.0.0-beta.9.tgz#a97e9b86a5e5d63332fef0bb9f606139f599da4a"
   integrity sha1-qX6bhqXl1jMy/vC7n2BhOfWZ2ko=
@@ -2048,7 +2048,7 @@
     "@hi-ui/core-css" "^4.0.0-beta.3"
     "@hi-ui/env" "^4.0.0-beta.0"
 
-"@hi-ui/radio@^4.0.0-beta.7":
+"@hi-ui/radio@^4.0.0-beta.5", "@hi-ui/radio@^4.0.0-beta.7":
   version "4.0.0-beta.7"
   resolved "https://pkgs.d.xiaomi.net:443/artifactory/api/npm/mi-npm/@hi-ui/radio/-/radio-4.0.0-beta.7.tgz#91e838b77bfff867f427bbb3890169cba8308fe5"
   integrity sha1-keg4t3v/+Gf0J7uziQFpy6gwj+U=
@@ -2204,7 +2204,7 @@
     "@hi-ui/env" "^4.0.0-beta.0"
     "@hi-ui/use-uncontrolled-state" "^4.0.0-beta.2"
 
-"@hi-ui/table@^4.0.0-beta.29":
+"@hi-ui/table@^4.0.0-beta.27", "@hi-ui/table@^4.0.0-beta.29":
   version "4.0.0-beta.29"
   resolved "https://pkgs.d.xiaomi.net:443/artifactory/api/npm/mi-npm/@hi-ui/table/-/table-4.0.0-beta.29.tgz#4c59a17b27fb3e93d1942991d616073ff547dedd"
   integrity sha1-TFmheyf7PpPRlCmR1hYHP/VH3t0=
@@ -2967,6 +2967,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/echarts@^4.9.13":
+  version "4.9.13"
+  resolved "https://registry.yarnpkg.com/@types/echarts/-/echarts-4.9.13.tgz#b4a56f8ff471af65dd54b196af6972629d6745d4"
+  integrity sha512-xqZ21MXOBU5i+BywnxAi0He+M6lsRtANBvbqJHmqM8T64Lx7azHJWbv/vSKVJfEbv3XyYpxeDhpV7gFi5mfgeA==
+  dependencies:
+    "@types/zrender" "*"
+
 "@types/eslint-scope@^3.7.3":
   version "3.7.3"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.3.tgz#125b88504b61e3c8bc6f870882003253005c3224"
@@ -3240,6 +3247,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/zrender@*":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@types/zrender/-/zrender-4.0.1.tgz#6280c40207927ce086be24b4391d668cd330e956"
+  integrity sha512-IyTRf30jPOXK1+1RChI/78U6aV9hyWYf/vhL96Vt66oDz9es/BDjeKpvbNZSOHVA7zAReOwJcmdZS5AGAqhygw==
+
 "@typescript-eslint/eslint-plugin@^5.5.0":
   version "5.12.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.12.1.tgz#b2cd3e288f250ce8332d5035a2ff65aba3374ac4"
@@ -4982,6 +4994,14 @@ duplexer@^0.1.2:
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
   integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
 
+echarts@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.3.1.tgz#709e03aaf8c7a4439788272ee5c500cf0dce7e5b"
+  integrity sha512-nWdlbgX3OVY0hpqncSvp0gDt1FRSKWn7lsWEH+PHmfCuvE0QmSw17pczQvm8AvawnLEkmf1Cts7YwQJZNC0AEQ==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.3.1"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -9631,6 +9651,11 @@ tsconfig-paths@^3.12.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -10344,6 +10369,13 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
+zrender@5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.3.1.tgz#fa8e63ac7e719cfd563831fe8c42a9756c5af384"
+  integrity sha512-7olqIjy0gWfznKr6vgfnGBk7y4UtdMvdwFmK92vVQsQeDPyzkHW1OlrLEKg6GHz1W5ePf0FeN1q2vkl/HFqhXw==
+  dependencies:
+    tslib "2.3.0"
+
 zwitch@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"