饼状图

src/pages/PurchaseAdmin/PurchaseList/Report/Demo.js

@@ -1,10 +1,13 @@
-import React, { useState } from 'react';
-import { Table, Modal } from 'antd';
+import React, { useState, useEffect, useRef } from 'react';
+import { Table, Modal, Select } from 'antd';
+import * as echarts from 'echarts';
 import styles from './report.less';
 
 function Demo(props) {
   const [memberVisible, setMemberVisible] = useState(false);
 
+  var chartRef = useRef(null);
+
   const expandedRowRender = record => {
     switch (record.index) {
       case 1:
@@ -26,6 +29,83 @@ function Demo(props) {
     }
   };
 
+  const getData = value => {
+    switch (value) {
+      case 1:
+        return [
+          { value: 1048, name: '执行' },
+          { value: 735, name: '售前' },
+          { value: 580, name: '市场品牌' },
+          { value: 484, name: '日常' },
+          { value: 300, name: '标准化' },
+          { value: 520, name: '研发' },
+        ];
+      case 2:
+        return [
+          { value: 345, name: '执行' },
+          { value: 316, name: '售前' },
+          { value: 650, name: '市场品牌' },
+          { value: 484, name: '日常' },
+          { value: 981, name: '标准化' },
+          { value: 489, name: '研发' },
+        ];
+      case 3:
+        return [
+          { value: 987, name: '执行' },
+          { value: 916, name: '售前' },
+          { value: 354, name: '市场品牌' },
+          { value: 451, name: '日常' },
+          { value: 266, name: '标准化' },
+          { value: 781, name: '研发' },
+        ];
+      case 4:
+        return [
+          { value: 519, name: '执行' },
+          { value: 313, name: '售前' },
+          { value: 974, name: '市场品牌' },
+          { value: 597, name: '日常' },
+          { value: 351, name: '标准化' },
+          { value: 259, name: '研发' },
+        ];
+      case 5:
+        return [
+          { value: 149, name: '执行' },
+          { value: 159, name: '售前' },
+          { value: 245, name: '市场品牌' },
+          { value: 518, name: '日常' },
+          { value: 259, name: '标准化' },
+          { value: 678, name: '研发' },
+        ];
+    }
+  };
+
+  const onSelect = value => {
+    chartRef.current.setOption({ series: [{ data: getData(value) }] });
+  };
+
+  useEffect(() => {
+    chartRef.current = echarts.init(document.getElementById('chart'));
+    chartRef.current.setOption({
+      tooltip: {
+        trigger: 'item',
+      },
+      series: [
+        {
+          type: 'pie',
+          radius: '70%',
+          data: getData(1),
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)',
+            },
+          },
+        },
+      ],
+    });
+  }, []);
+
   const temp = [
     { index: 1, type: '售前项目' },
     { index: 2, type: '执行项目' },
@@ -100,6 +180,13 @@ function Demo(props) {
     { title: '累计人日数', render: () => 0 },
     { title: '项目预算人日数', render: () => <a>设置</a> },
   ];
+  const select = [
+    { value: 1, key: '部门A' },
+    { value: 2, key: '部门B' },
+    { value: 3, key: '部门C' },
+    { value: 4, key: '部门D' },
+    { value: 5, key: '部门E' },
+  ];
   return (
     <>
       <Table
@@ -111,6 +198,14 @@ function Demo(props) {
         rowKey="index"
         pagination={false}
       />
+      <Select style={{ width: '100px' }} defaultValue={1} onChange={onSelect}>
+        {select.map(item => (
+          <Select.Option value={item.value} key={item.value}>
+            {item.key}
+          </Select.Option>
+        ))}
+      </Select>
+      <div id="chart" style={{ width: '600px', height: '600px' }}></div>
       <Modal visible={memberVisible} onCancel={() => setMemberVisible(false)} width="80%">
         <Table columns={column3} dataSource={temp2} pagination={false} />
       </Modal>