React中的ECharts
公冶昆杰
React中的ECharts
写在前面
- ECharts是一个强大的的图表库，虽然文档写得有点糟糕，但这无法掩盖住它的强大
- 在ECharts中你可以找到各种图表组件，包括散点图，路径图，旭日图等等，甚至3D路径图，3D散点图这些，都有
- 这里附上一个ECharts传送门，以及一个ECharts的react封装传送门
使用方式
- 首先，echarts-for-react 不是官方封装的，但是用起来也很顺手，使用方式见下
- 安装依赖包
$ npm install --save echarts-for-react
- 看一看模板，然后将官网具体示例option的那一部分抄下来就可以运行了
import React from 'react'
import EChartsReact from 'echarts-for-react'
export default function LesMiserable() {
// 数据配置
const getOption=()=>{
// console.log(links);
const option = {
// 这中间就是官网上面对应的option的内容
// ...
}；
return option;
}
return (
<EChartsReact option={getOption()} style={{height:'400px'}}/>
)
}
-
要注意的一点：
a. 当需要实现实时渲染数据的时候（就是需要获取一次的数据要分批进行渲染好多遍），echarts默认是会对新的数据节点进行合并的
b. 说是这么说的，但实际上我在做实时渲染的时候是报错了，报错内容是设置数据无效
c. 因此我们需要将< EChartsReact >组件的notMerge属性设置为true
d. 关于这一点我是想说在你的控制台报错的时候可以换一下notMerge的配置试一试，因为一开始的时候我的控制台是报错了，我将notMerge设置为true之后就好了，但在后面我又遇到了不需要设置notMerge为true的奇怪情况，这一点暂时没有弄清楚 -
合并规则：ECharts根据notMerge和replaceMerge进行合并，合并方式分两种：普通合并与替换合并，替换合并可能会删除数据，但是普通合并不会，普通合并只会更新数据会增加数据
-
具体案例：
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>
)
}
类似资料：