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

DeronTan發表於2019-03-03
Echarts流程圖

一、引入 ECharts

  1. 從官網下載介面選擇你需要的版本下載，根據開發者功能和體積上的需求，我們提供了不同打包的下載，如果你在體積上沒有要求，可以直接下載完整版本。開發環境建議下載原始碼版本，包含了常見的錯誤提示和警告。
  2. 在 ECharts 的 GitHub 上下載最新的 release 版本，解壓出來的資料夾裡的 dist 目錄裡可以找到最新版本的 echarts 庫。
  3. 通過 npm 獲取 echarts，npm install echarts --save，詳見“在 webpack 中使用 echarts”
  4. 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。

let _this = this;
複製程式碼

成品就是這個樣子的

blockchain

完事兒，筆芯！敬禮！！！

相關文章