stock chart

Author: xpioneer

src/pages/stocks/components/stockChart.tsx

@@ -0,0 +1,82 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { Row, Col, Form, Spin } from 'antd'
+import * as Echart from 'echarts/core'
+import {
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  TitleComponentOption,
+  TooltipComponentOption,
+  LegendComponentOption
+} from 'echarts/components'
+import { PieChart, PieSeriesOption } from 'echarts/charts'
+import { CanvasRenderer } from 'echarts/renderers';
+import { LabelLayout } from 'echarts/features'
+import { getStockChartCount } from '../../../services/stock'
+import { EBlock } from 'types/stock'
+
+Echart.use([
+  PieChart,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  CanvasRenderer,
+  LabelLayout
+])
+
+type EchartsOption = Echart.ComposeOption<
+  TitleComponentOption |
+  TooltipComponentOption |
+  LegendComponentOption |
+  PieSeriesOption>
+
+export const StockChart: React.FC = () => {
+
+  const chartRef = useRef<HTMLDivElement>()
+
+  useEffect(() => {
+    const stockChart = Echart.init(chartRef.current)
+    let options: EchartsOption;
+    getStockChartCount().then(res => {
+      options = {
+        title: {
+          text: 'Stock Blocks',
+          subtext: 'China A-Share Market',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left'
+        },
+        series: [
+          {
+            name: 'Block',
+            type: 'pie',
+            radius: '50%',
+            data: res.map(i => ({name: EBlock[i.block], value: i.total}))
+          },
+          {
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0,0,0,0.5)'
+              }
+            }
+          }
+        ]
+      }
+      stockChart.setOption(options)
+    })
+  }, [])
+
+
+  return <Row className="mgb8">
+    <Col span={24}>
+      <div className='chart-w' ref={chartRef}></div>
+    </Col>
+  </Row>
+}

src/pages/stocks/index.tsx

@@ -5,6 +5,7 @@ import { stockPageList, StockQuery } from '../../services/stock'
 import { data2PageData, pageData2Params } from '../../utils/tools'
 import { Stock, EMarket, EBlock } from '../../types/stock'
 import { object2Options } from '@utils/tools'
+import { StockChart } from './components/stockChart'
 
 const StockList: React.FC<ICommonProps> = ({history}) => {
 
@@ -34,6 +35,7 @@ const StockList: React.FC<ICommonProps> = ({history}) => {
 
 
   return <Spin spinning={loading}>
+    <StockChart/>
     <Form className="mgb16" form={form}>
       <Row gutter={16}>
         <Col span={6}>

src/services/stock.ts

@@ -1,6 +1,6 @@
 import $http from '@utils/http'
 import { pageData2Params } from '@utils/tools'
-import { Stock } from 'types/stock'
+import { EBlock, Stock } from 'types/stock'
 
 
 export type StockQuery = Omit<Stock & IPageParams, 'id' | 'amount'> & { noPage: boolean }
@@ -11,4 +11,9 @@ export const stockPageList = (params: Partial<StockQuery> = pageData2Params()) =
 
 export const getStockDetail = (id: number) => {
   return $http.get<any, IResponseData<Stock>>(`/api/stocks/${id}`).then(res => res.data)
+}
+
+
+export const getStockChartCount = () => {
+  return $http.get<{total: number, block: EBlock}[]>(`/api/stock/chartCount`).then(res => res.data)
 }