使用echarts的Simple Graph 來畫任務流程圖

時間 2019-12-05

標籤使用 echarts simple graph 任務流程圖欄目系統架構简体版

原文原文鏈接

1、引入 ECharts

從官網下載界面選擇你須要的版本下載，根據開發者功能和體積上的需求，咱們提供了不一樣打包的下載，若是你在體積上沒有要求，能夠直接下載完整版本。開發環境建議下載源代碼版本，包含了常見的錯誤提示和警告。
在 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圖html

// 引入 ECharts 主模塊
import echarts from 'echarts/lib/echarts';
// 引入思惟圖
import  'echarts/lib/chart/graph';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
複製代碼

2、設置基礎畫布

1.爲畫布準備一個dom元素設置寬高node

<body>
    <!-- 爲 ECharts 準備一個具有大小（寬高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
複製代碼

2.在js中獲取dom元素，初始化畫布react

var myChart = echarts.init(document.getElementById('main'));
複製代碼

以後再經過echarts的setOpton填入數據便可。webpack

3、數據分析

須要倒入的數據爲兩部分：web

node節點數據
link路經數據

後端傳來的link值按格式引入，官方例子以下：npm

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
                  });
                }
複製代碼

節點數據是須要給出節點的座標來造成最後的畫布的，這個座標須要咱們根據本身的實際的數據層級以及每一個層級的個數來計算。數組

4、計算節點座標

首先畫布的大小是固定的，在這裏我用的是寬600px，高400px。畫布的是以坐上角爲座標原點。假設數據是層級是5層，從1到第5層級的數量以此爲2，3，4，1，1 計算過程以下：bash

首先計算每一個層級的寬度，即用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}
        }
      })
    }
複製代碼

5、繪製圖標

使用echarts的setOption方法繪製圖標：echarts

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。