import React , { FC } from 'react' ; import { render } from 'react-dom' ; import { Chart , Builder , useChart } from './Index' ; import { use } from 'echarts/core' ; import { BarChart } from 'echarts/charts' ; import { TitleComponent , GridComponent } from 'echarts/components' ; import { CanvasRenderer } from 'echarts/renderers' ; use ( [ TitleComponent , GridComponent , BarChart , CanvasRenderer ] ) ; function randomChart ( ) { return ( builder ) : Builder => builder . title ( 'Hello World' ) . labels ( [ 'a' , 'b' , 'c' , 'd' ] ) . dataset ( { name : 'Example' , type : 'bar' , data : [ Math . floor ( Math . random ( ) * 10 ) , Math . floor ( Math . random ( ) * 10 ) , Math . floor ( Math . random ( ) * 10 ) , Math . floor ( Math . random ( ) * 10 ) , ] , } ) ; } const attributes = { style : { height : 300 } } ; const App = ( ) => { const { controller , chartisan : _chartisan } = useChart ( ) ; return ( < > < button onClick = { ( ) => controller . create ( { chart : randomChart ( ) } ) } > Create < /button> < button onClick = { ( ) => controller . update ( { chart : randomChart ( ) } ) } > Update < /button> < button onClick = { ( ) => controller . delete ( ) } > Delete < /button> < Chart attributes = { attributes } name = "my-chart" initiate = { false } controller = { controller } / > < />); } ; render ( < App />, document.getElementById('app'));