React中的ECharts
import React,{ useEffect,useState } from 'react'
import { Card } from 'antd'
import EChartsReact from 'echarts-for-react'
// 这个是我自己封装的发送post请求的函数
import { axiosJSONPost } from '../../utils/request'
export default function LesMiserable() {
// 此状态管理定时器
const [count,setCount]=useState(1);
// 此状态管理用于实时渲染的数据
const [data,setData]=useState([]);
// 此状态接受请求回来的数据 后台是自己搭的 返回的是点坐标跟点关系
const [allData,setAllData]=useState({
data:null,
links:[],
});
// 请求数据
useEffect(()=>{
axiosJSONPost('http://localhost:8000/graph',{msg:'复杂关系图来了'})
.then(
response=>{
setAllData(response.data.data);
setCount(response.data.data.data.length-1);
},
error=>{
console.log(error);
}
)
},[])
// 定时更新数据 这是一个回调定时器
useEffect(() => {
let timerId = null;
const run = () => {
console.log("count -> ", count);
if (count <= 0) {
return () => {
timerId && clearTimeout(timerId);
};
}
setCount(count - 1);
timerId = setTimeout(run, 1000);
// 这下面为相关的业务代码
// 我这里的逻辑是每隔一段时间将data的数据换一次
// 若data中点的id相同 那么每换一次数据之后在展现出来的图表上面是点的移动
// 我这里的点关系是没有改变的 若点的关系需要改变的也可以在这里进行变化
// 但是我在实现点关系改变的过程中出了bug 尚无法解决
setData(allData.data[count-1]);
// 上面为 相关业务代码
};
timerId = setTimeout(run, 1000);
return () => {
timerId && clearTimeout(timerId);
};
}, [count]);
// 数据配置
const getOption=()=>{
const option = {
title: {
text: '复杂关系图',
},
// 数据更新动画的时长 只要有返回值就好 因此可以是一个函数
animationDurationUpdate: 1500,
// 数据更新动画的缓动效果 quinticInOut???
animationEasingUpdate: 'quinticInOut',
tooltip: {},
series: [
{
name: '复杂关系图',
// 类型 graph关系图
type: 'graph',
// 布局 none无 circular环形布局 force力引导布局
layout: 'none',
symbolSize: 50,
// 开启缩放和平移
roam: true,
// 是否显示标签
label: {
show: true
},
// 边两端标记类型 此处设置为一端圆点一端箭头
edgeSymbol: ['circle', 'arrow'],
// 边两端标记大小
edgeSymbolSize: [4, 10],
// 图形上的文本标签
edgeLabel: {
// 字体大小
fontSize: 20,
},
// 动态载入节点 关系 类目名称
data: data,
links: allData.links,
// 点关系样式
lineStyle: {
opacity: 0.9,
width: 2,
// 边的曲度 0~1
curveness: 0,
},
}
]
};
return option;
}
return (
<Card title='关系图'>
{/* notMerge 参数 更新数据时不合并 */}
<EChartsReact option={getOption()} style={{height:'400px'}} notMerge={true}/>
</Card>
)
}