chart

Author: xpioneer

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "antd": "^3.10.4",
     "axios": "^0.18.0",
+    "echarts": "^4.2.0-rc.2",
     "mobx": "^5.6.0",
     "mobx-react": "^5.3.6",
     "quill": "^1.3.6",
@@ -28,6 +29,7 @@
     "@babel/preset-env": "^7.2.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.1.0",
+    "@types/echarts": "^4.1.3",
     "@types/quill": "^2.0.1",
     "@types/react": "^16.7.7",
     "@types/react-dom": "^16.0.10",

src/assets/scss/app.scss

@@ -157,4 +157,10 @@
   .blue{
     background-color: #3399ff
   }
+}
+
+/* chart-w */
+.chart-w{
+  height: 400px;
+  border: 1px solid #eee;
 }

src/components/shared/sider.tsx

@@ -41,6 +41,8 @@ const MenuList = [{
     key: '5-0', title: '双色球', path: '/home/lottery-balls', icon: 'dollar'
   },{
     key: '5-1', title: '趋势图', path: '/home/lottery-trend', icon: 'fund'
+  },{
+    key: '5-2', title: '统计图', path: '/home/lottery-chart', icon: 'bar-chart'
   }]
 },{
   key:'99', title:'Demo', path: '/home/demos', icon:'bulb'

src/pages/lottery/ballChart.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react'
+import {inject, observer} from 'mobx-react'
+import { Row, Col, Form, Button } from 'antd';
+import { IBall } from '@models/ball'
+import * as Echart from 'echarts'
+// const Echart = require('echarts/lib/echarts')
+// 引入柱状图
+require('echarts/lib/chart/bar');
+// 引入提示框和标题组件
+require('echarts/lib/component/tooltip');
+require('echarts/lib/component/title');
+
+@inject('ballChartStore')
+@observer
+export default class BallChart extends React.Component<IProps> {
+
+  chartRef: any = React.createRef()
+  ballCountChart: Echart.ECharts
+  
+  state = {
+    visible: false
+  }
+  
+  redBalls: number[] = [
+    1,2,3,4,5,6,7,8,9,10,
+    11,12,13,14,15,16,17,18,19,20,
+    21,22,23,24,25,26,27,28,29,30,
+    31,32,33
+  ]
+  blueBalls: number[] = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
+
+  setBall = (data: IBall, num: number, type: 'red'|'blue') => {
+    const color =  type === 'red' ? '#f54646' : '#3399ff'
+  }
+
+  setColor = (num: number, type: string) => {
+    return <div style={{textAlign: 'center', color: type}}>{num}</div>
+  }
+
+  showRule = () => {
+    this.setState({visible: !this.state.visible})
+  }
+  
+  componentDidMount() {
+    this.ballCountChart = Echart.init(this.chartRef.current)
+    const { fetchChartData } = this.props.ballChartStore
+    
+    fetchChartData((reds:[any], blues:[any]) => {
+      let list = [...reds, ...blues]
+      let xData = list.map((v:any, i:number) => {
+          return v.name
+      })
+      let yData = list.map((v:any, i:number) => {
+        return v.value
+      })
+      this.ballCountChart.setOption({
+        title: {
+            text: '历史出现次数'
+        },
+        tooltip: {},
+        xAxis: {
+            data: xData
+        },
+        yAxis: {},
+        series: [{
+            name: '次数',
+            type: 'bar',
+            data: yData
+        }]
+      })
+    })
+  }
+
+  render(){
+    return <React.Fragment>
+      <div className="search-form">
+        <h3>红蓝球历史出现次数</h3>
+        <Row gutter={24}>
+          <Col span={24}>
+            <div className='chart-w' ref={this.chartRef}>
+            </div>
+          </Col>
+        </Row>
+      </div>
+    </React.Fragment>
+    
+  }
+}

src/pages/lottery/ballChartStore.ts

@@ -0,0 +1,52 @@
+import { observable, action, autorun, runInAction, computed } from 'mobx';
+import { GRAPHQL_API } from '@constants/index';
+
+const queryChart = `
+fragment common on ballChartType { name value }
+query ball{
+  ballCount{reds{...common},blues{...common}}
+}`
+
+
+class ballChartStore {
+  @observable loading: boolean = false
+  redBalls: number[] = [
+    1,2,3,4,5,6,7,8,9,10,
+    11,12,13,14,15,16,17,18,19,20,
+    21,22,23,24,25,26,27,28,29,30,
+    31,32,33
+  ]
+  blueBalls: number[] = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
+  @observable reds: number[] = []
+  @observable blues: number[] = []
+
+  chart: HTMLElement = null
+
+  setChart = (ref: HTMLElement) => {
+    this.chart = ref
+  }
+
+  @action fetchChartData = (cb: Function) => {
+    this.loading = true
+    $http.post(GRAPHQL_API, {
+      query: queryChart,
+      variables: {}
+    }).then((res: any) => {
+      const {ballCount} = res.data
+      runInAction(() => {
+        this.loading = false
+        // this.reds = ballCount.reds
+        // this.blues = ballCount.blues
+        console.log(ballCount)
+        cb && cb(ballCount.reds, ballCount.blues)
+      })
+    }, err => {
+      runInAction(() => {
+        this.loading = false
+      })
+    })
+  }
+
+}
+
+export default new ballChartStore()

src/routes/index.tsx

@@ -29,6 +29,7 @@ const BallList = lazy(() => import( /* webpackChunkName:"ballList" */ '@pages/lo
 const BallCreate = lazy(() => import( /* webpackChunkName:"ballCreate" */ '@pages/lottery/ballCreate'))
 const BallEdit = lazy(() => import( /* webpackChunkName:"ballEdit" */ '@pages/lottery/ballEdit'))
 const BallTrend = lazy(() => import( /* webpackChunkName:"ballTrend" */ '@pages/lottery/ballTrend'))
+const BallChart = lazy(() => import( /* webpackChunkName:"ballChart" */ '@pages/lottery/ballChart'))
 
 const Demo = lazy(() => import( /* webpackChunkName:"demo" */ '@pages/demo/demo'))
 
@@ -154,6 +155,11 @@ export const routes: RouteProps[] = [
     exact: true,
     component: BallTrend
   },
+  {
+    path: '/home/lottery-chart',
+    exact: true,
+    component: BallChart
+  },
   {
     path: '/home/demos',
     exact: true,

src/stores/index.ts

@@ -22,6 +22,7 @@ import ballListStore from '@pages/lottery/ballListStore';
 import ballCreateStore from '@pages/lottery/ballCreateStore';
 import ballEditStore from '@pages/lottery/ballEditStore';
 import ballTrendStore from '@pages/lottery/ballTrendStore';
+import ballChartStore from '@pages/lottery/ballChartStore';
 
 import demoStore from '../pages/demo/store';
 
@@ -52,6 +53,7 @@ export default {
   ballCreateStore,
   ballEditStore,
   ballTrendStore,
+  ballChartStore,
 
   demoStore
 }

yarn.lock

@@ -720,6 +720,13 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
+"@types/echarts@^4.1.3":
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/@types/echarts/-/echarts-4.1.3.tgz#dd8be2f197ac9778175cddbdc2228ada8f304b66"
+  integrity sha512-1w4s4MisDNz8RlznvxHHiJ1eAE5sLQrbf+D5A27rECku4VH/LqDzMFk9Svd16VJI6yag5Zz2ROy12e6R3kC18g==
+  dependencies:
+    "@types/zrender" "*"
+
 "@types/history@*":
   version "4.7.2"
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.2.tgz#0e670ea254d559241b6eeb3894f8754991e73220"
@@ -776,6 +783,11 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/zrender@*":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/zrender/-/zrender-4.0.0.tgz#a6806f12ec4eccaaebd9b0d816f049aca6188fbd"
+  integrity sha512-s89GOIeKFiod2KSqHkfd2rzx+T2DVu7ihZCBEBnhFrzvQPUmzvDSBot9Fi1DfMQm9Odg+rTqoMGC38RvrwJK2w==
+
 "@webassemblyjs/[email protected]":
   version "1.7.11"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.7.11.tgz#b988582cafbb2b095e8b556526f30c90d057cace"
@@ -2648,6 +2660,13 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+echarts@^4.2.0-rc.2:
+  version "4.2.0-rc.2"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-4.2.0-rc.2.tgz#6a98397aafa81b65cbf0bc15d9afdbfb244df91e"
+  integrity sha512-5Y4Kyi4eNsRM9Cnl7Q8C6PFVjznBJv1VIiMm/VSQ9zyqeo+ce1695GqUd9v4zfVx+Ow1gnwMJX67h0FNvarScw==
+  dependencies:
+    zrender "4.0.5"
+
 [email protected]:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -8053,3 +8072,8 @@ yargs@^7.0.0:
     which-module "^1.0.0"
     y18n "^3.2.1"
     yargs-parser "^5.0.0"
+
+[email protected]:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-4.0.5.tgz#6e8f738971ce2cd624aac82b2156729b1c0e5a82"
+  integrity sha512-SintgipGEJPT9Sz2ABRoE4ZD7Yzy7oR7j7KP6H+C9FlbHWnLUfGVK7E8UV27pGwlxAMB0EsnrqhXx5XjAfv/KA==