使用echarts的Simple Graph 来画任务流程图

栏目: 数据库 · 发布时间: 5年前

内容简介：我是在react项目中直接npm了echarts，所以在入口文件直接按需加载需要使用的Graph图1.为画布准备一个dom元素设置宽高2.在js中获取dom元素，初始化画布

从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。
在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。
通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”
cdn 引入，你可以在 cdnjs，npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>
复制代码

我是在react项目中直接npm了echarts，所以在入口文件直接按需加载需要使用的Graph图

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入思维图
import  'echarts/lib/chart/graph';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
复制代码

二、设置基础画布

1.为画布准备一个dom元素设置宽高

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
复制代码

2.在js中获取dom元素，初始化画布

var myChart = echarts.init(document.getElementById('main'));
复制代码

之后再通过echarts的setOpton填入数据即可。

三、数据分析

需要倒入的数据为两部分：

node节点数据
link路经数据

后端传来的link值按格式引入，官方例子如下：

links: [{
            source: '节点1',
            target: '节点3'
        }, {
            source: '节点2',
            target: '节点3'
        }, {
            source: '节点2',
            target: '节点4'
        }, {
            source: '节点1',
            target: '节点4'
        }]
复制代码

将后端数据push进link集：

let links = [];
                for(var i in data.relation){
                  links.push({
                    source : data.relation[i].source,
                    target : data.relation[i].target
                  });
                }
复制代码

节点数据是需要给出节点的坐标来形成最后的画布的，这个坐标需要我们根据自己的实际的数据层级以及每个层级的来计算。

四、计算节点坐标

首先画布的大小是固定的，在这里我用的是宽600px，高400px。画布的是以坐上角为坐标原点。假设数据是层级是5层，从1到第5层级的数量以此为2，3，4，1，1 计算过程如下：

首先计算每个层级的宽度，即用600/层级数量（level），那我们这里就是600px/5 = 120px
节点的横坐标通过单位乘以120px来得到，level1到5的横坐标则依次为，120，240，360，480，600
其次计算每个层级的纵坐标基本单元格，比如level为3的这一层级有4个节点，则纵坐标的基本单元格n为400/(4 * 2) = 50
如果该层级只用一个节点则该节点的纵坐标即为n，否则节点的纵坐标计算公式为n * (2 * j - 1)，其中n为纵坐标基础单元格，j为节点在level为3的数组里的index索引
得到节点的横坐标数组和纵坐标数组后，push进节点集

data2.push({
        name : data.tasks[i].alias,
        value : data.tasks[i].task_name,
        y: 0,
        x: 600-(120 * data.tasks[i].level),
        itemStyle:{
          normal:{color: color}
        }
      })
    }
复制代码

五、绘制图标

使用echarts的setOption方法绘制图标：

myChart.setOption({
                    title: {
                        text: ''
                    },
                    tooltip: {},
                    nodeScaleRatio: 0,
                    animationDurationUpdate: 1500,
                    animationEasingUpdate: 'quinticInOut',
                    series : [
                        {
                            type: 'graph',
                            layout: 'none',
                            symbolSize: 30,
                            roam: false,
                            label: {
                                normal: {
                                    show: true
                                }
                            },
                            edgeSymbol: ['circle', 'arrow'],
                            edgeSymbolSize: [4, 10],
                            edgeLabel: {
                                normal: {
                                    textStyle: {
                                        fontSize: 20
                                    }
                                }
                            },
                            data: data2,
                            // links: [],
                            links: links,
                            lineStyle: {
                                normal: {
                                    opacity: 0.9,
                                    width: 1,
                                    curveness: 0
                                }
                            }
                        }
                    ]
                });
复制代码

还可以给节点添加事件这里选择点击事件来展示节点详情信息，代码如下：

myChart.on("click", function (param){ 
                  if(param.dataType == "node"){
                    _this.setState({visible: true, param: param.data.value});
                  }
                });
复制代码

如果你要在这里使用react的this.setState({});方法来更新组件状态的话别忘记在setOption之前，提前将this赋值给一个变量，因为在这里的点击方法里this指向的是myChart。