React中的ECharts

React中的ECharts

写在前面

1. ECharts是一个强大的的图表库，虽然文档写得有点糟糕，但这无法掩盖住它的强大
2. 在ECharts中你可以找到各种图表组件，包括散点图，路径图，旭日图等等，甚至3D路径图，3D散点图这些，都有
3. 这里附上一个ECharts传送门，以及一个ECharts的react封装传送门

使用方式

1. 首先，echarts-for-react 不是官方封装的，但是用起来也很顺手，使用方式见下
2. 安装依赖包

$ npm install --save echarts-for-react

3. 看一看模板，然后将官网具体示例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'}}/>
  )
}

4. 要注意的一点：
   a. 当需要实现实时渲染数据的时候（就是需要获取一次的数据要分批进行渲染好多遍），echarts默认是会对新的数据节点进行合并的
   b. 说是这么说的，但实际上我在做实时渲染的时候是报错了，报错内容是设置数据无效
   c. 因此我们需要将< EChartsReact >组件的notMerge属性设置为true
   d. 关于这一点我是想说在你的控制台报错的时候可以换一下notMerge的配置试一试，因为一开始的时候我的控制台是报错了，我将notMerge设置为true之后就好了，但在后面我又遇到了不需要设置notMerge为true的奇怪情况，这一点暂时没有弄清楚

5. 合并规则：ECharts根据notMerge和replaceMerge进行合并，合并方式分两种：普通合并与替换合并，替换合并可能会删除数据，但是普通合并不会，普通合并只会更新数据会增加数据

6. 具体案例：

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>
  )
}