import React , { useState } from 'react' ; import { Card , Button } from 'antd' ; import ReactEcharts from 'echarts-for-react' ; const Line = ( ) => { const [ sales , setSales ] = useState < number [ ] > ( [ 5 , 20 , 36 , 10 , 10 , 20 ] ) ; const [ stores , setStore ] = useState < number [ ] > ( [ 6 , 10 , 25 , 20 , 15 , 10 ] ) ; const update = ( ) => { setSales ( sales . map ( ( e ) => e + 1 ) ) ; setStore ( stores . map ( ( e ) => e - 1 ) ) ; } ; const getOption = ( sales , stores ) => { return { title : { text : 'ECharts 入门示例' , } , tooltip : { } , legend : { data : [ '销量' , '库存' ] , } , xAxis : { data : [ '衬衫' , '羊毛衫' , '雪纺衫' , '裤子' , '高跟鞋' , '袜子' ] , } , yAxis : { } , series : [ { name : '销量' , type : 'line' , data : sales , } , { name : '库存' , type : 'line' , data : stores , } , ] , } ; } ; return ( < div > < Card > < Button type = "primary" onClick = { update } > 更新 < /Button> < /Card> < Card title = "折线图一" > < ReactEcharts option = { getOption ( sales , stores ) } /> < /Card> < /div>); } ; export default Line ;