import { Chart } from '@antv/f2' ; import React , { memo , useEffect , useRef } from 'react' ; import ChartImg from '@/assets/chart.png' ; import styles from './index.less' ; import { IChartConfig } from './schema' ; interface XChartProps extends IChartConfig { isTpl : boolean ; } const XChart = ( props ) => { const { isTpl , data , color , size , paddingTop , title } = props ; const chartRef = useRef ( null ) ; useEffect ( ( ) => { if ( ! isTpl ) { const chart = new Chart ( { el : chartRef . current || undefined , pixelRatio : window . devicePixelRatio , } ) ; const dataX = data . map ( item => ( { ... item , value : Number ( item . value ) } ) ) ; chart . source ( dataX ) ; chart . interval ( ) . position ( 'name*value' ) . color ( 'name' ) ; chart . render ( ) ; } } , [ data , isTpl ] ) ; return ( < div className = { styles . chartWrap } > < div className = { styles . chartTitle } style = { { color , fontSize : size , paddingTop } } > { title } < /div> { isTpl ? < img src = { ChartImg } alt = "dooring chart" / > : < canvas ref = { chartRef } > < /canvas>} < /div>); } ; export default memo ( XChart ) ;