经测试,echarts for react不支持echarts最新版本5.0.0因此引入4.9.0
npm install echarts@4.9.0
npm install echarts-for-react@2.0.16
依赖安装好即可使用:
import React, { useState, useEffect } from 'react';
import { Card } from 'antd';
import ReactEcharts from 'echarts-for-react';
const DemoColumn: React.FC<any> = () => {
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};
const click1 = (value:any) => {
console.log(value)
}
const events = {
'click':click1
}
return (
<div>
<Card title="折线图表之一">
<ReactEcharts
option={option}
onEvents={events} />
</Card>
</div>
)
};
export default DemoColumn;
运行效果: