/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2023-04-01 14:42:46
|
* @LastEditTime: 2023-04-01 16:43:21
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description:
|
*/
|
import React, { useEffect, useMemo, useState, useRef } from 'react';
|
import { useHistory } from 'react-router-dom';
|
import { Space, Swiper, Toast } from 'dingtalk-design-mobile';
|
import { AnnouncementOutlined, RightArrow2Outlined } from 'dd-icons';
|
import { Canvas, Chart, Interval } from '@antv/f2';
|
|
|
|
// 统计图表
|
const ChartDom = ({ data }) => {
|
const newdata = [{ name: '0-6岁', color: '#A3DDFF', value: 13, center: '1', percent: 0.2 },
|
{ name: '7-15岁', color: '#52B4FF', value: 13, center: '1', percent: 0.1 },
|
{ name: '16-59岁', color: '#007FFF', value: 13, center: '1', percent: 0.1 },
|
{ name: '60-79岁', color: '#004DB3', value: 13, center: '1', percent: 0.1 },
|
{ name: '80岁+', color: '#002566', value: 13, center: '1', percent: 0.5 }]
|
|
// const countActive = useMemo(() => {
|
// let color = ['#6665FF', '#F57F20', '#77DA82'];
|
// let obj = data.countData ? data.countData[tabActive.count].data : {};
|
// let num = 0;
|
// let count = 0;
|
// obj.annular?.forEach((x) => (count += x.value));
|
// obj.annular?.forEach((x, t) => {
|
// let percent = Number((x.value / count).toFixed(2));
|
// x.color = color[t];
|
// x.center = '1';
|
// x.percent = t === obj.annular.length - 1 ? 1 - num : percent;
|
// num = num + percent;
|
// });
|
// return obj;
|
// });
|
|
useEffect(() => {
|
const context = document.getElementById('myChart').getContext('2d');
|
const { props } = (
|
<Canvas context={context} pixelRatio={window.devicePixelRatio}>
|
<Chart data={newdata} coord={{ radius: 1, innerRadius: 0.7, transposed: true, type: 'polar' }}>
|
<Interval
|
x="center"
|
y="percent"
|
adjust="stack"
|
color={{
|
field: 'color',
|
callback: (value) => value,
|
}}
|
selection={{
|
selectedStyle: (record) => {
|
const { yMax, yMin } = record;
|
return { r: (yMax - yMin) * 1.1 };
|
},
|
}}
|
/>
|
</Chart>
|
</Canvas>
|
);
|
const chart = new Canvas(props);
|
chart.render();
|
}, [data]);
|
|
return <canvas id="myChart" width="200" height="200"></canvas>;
|
};
|
|
export default ChartDom;
|
