echarts

config/config.js

 
   proxy: {
     '/api/': {
-      target: 'http://localhost:8080/',
+      target: 'http://192.168.0.84:8080/',
       changeOrigin: true,
       // pathRewrite: { '^/server': '' },
     },

package.json

     "antd": "^3.20.0",
     "classnames": "^2.2.6",
     "dva": "^2.4.1",
+    "echarts": "^4.3.0",
     "lodash": "^4.17.11",
     "md5": "^2.2.1",
     "moment": "^2.24.0",

src/components/EchartsTest/EChart.jsx

+import React, { Component } from 'react';
+
+// 引入 ECharts 主模块
+import echarts from 'echarts/lib/echarts';
+// 引入柱状图
+import  'echarts/lib/chart/bar';
+// 引入提示框和标题组件
+import 'echarts/lib/component/tooltip';
+import 'echarts/lib/component/title';
+
+class EchartsTest extends Component {
+    chartRef = undefined
+    chart = undefined
+    defaultChartOption = {}
+
+    componentDidMount() {
+        this.chart = echarts.init(this.chartRef.current)
+
+        // 绘制图表
+        this.chart.setOption({
+            ...this.defaultChartOption,
+            ...this.props.options || {},
+        });
+    }
+
+    componentDidUpdate(preProps) {
+        if (preProps.options != this.props.options) {
+            this.chart.setOption({
+                ...this.defaultChartOption,
+                ...this.props.options || {},
+            });
+        }
+    }
+
+    handleDom = ref => this.chartRef = ref
+
+    render() {
+        const style = {
+            width: '600px',
+            ...this.props.style || {}
+        }
+
+        return (
+            <div ref={this.handleDom} style={style}></div>
+        );
+    }
+}
+
+export default EchartsTest;

src/components/EchartsTest/Line.jsx

+import React, { useEffect } from 'react';
+import EChart from './EChart';
+
+
+const Line = (props) => {
+
+  const {person_realty_consultant, person_estate_agent, person_null} = xxx
+
+  const options = {
+    xAxis: {},
+    legend: {
+      left: '70%',
+      data: ['来源置业顾问', '来源全民经纪人', '自主进入'],
+    },
+    series: [
+      {
+        type: 'pie',
+        datasetIndex: 1,
+        center: ['75%', '50%'],
+        radius: [0, '50%'],
+      },
+    ],
+    dataset: {
+      id: 'pie',
+      source: [
+        { form: '来源置业顾问', value: person_realty_consultant },
+        { form: '来源全民经纪人', value: person_estate_agent },
+        { form: '自主进入', value: person_null },
+      ]
+    },
+  }
+
+  return (
+    <EChart options={options} />
+  )
+
+}

src/components/EchartsTest/index.jsx

+import React, { Component } from 'react';
+
+// 引入 ECharts 主模块
+import echarts from 'echarts/lib/echarts';
+// 引入柱状图
+import  'echarts/lib/chart/bar';
+// 引入提示框和标题组件
+import 'echarts/lib/component/tooltip';
+import 'echarts/lib/component/title';
+class Chart extends Component {
+
+  render() { 
+    return ( <div></div> );
+  }
+}
+ 
+export default Chart;

src/pages/Welcome.jsx

 import React from 'react';
 import { Card, Typography, Alert, Row, Col } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
-
-// const CodePreview = ({ children }) => (
-//   <pre
-//     style={{
-//       background: '#f2f4f5',
-//       padding: '12px 20px',
-//       margin: '12px 0',
-//     }}
-//   >
-//     <code>
-//       <Typography.Text copyable>{children}</Typography.Text>
-//     </code>
-//   </pre>
-// );
-
+import EchartsTest from '../components/EchartsTest'
+const option = {
+  xAxis: {
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [{
+    data: [820, 932, 901, 934, 1290, 1330, 1320],
+    type: 'line'
+  }]
+};
 export default () => (
   <>
     <div style={{ display: 'flex' }}>
         <span style={{ fontSize: '52px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy' }}>91</span>
       </div>
     </div>
-    <div>11111111111111</div>
+    <EchartsTest style={{width: 500, height:500}}></EchartsTest>
+
   </>
 );
+

src/pages/customer/report/index.jsx

           </Button>
         </Form.Item>
       </Form>
-
       <Table dataSource={dataSource.records} columns={columns} pagination={{ total: dataSource.total, onChange }} />
     </>
   );