Echarts 5 瞎入門指南 - 9

本章學習下Graph流程關係圖，這裏以郭寶坤身邊的關係圖爲例！！markdown

//建立郭寶坤人際圈
const GuoBaoKun = [
    { name: '郭攸之', x: 100, y: 200 },
    { name: '太子', x: 200, y: 200 },
    { name: '範閒', x: 300, y: 200 },
]

複製代碼

//封裝鏈接線label
function formatLineLabel(relation={}) { //relation：人物關係
    return {
        show: true,
        formatter: function (m) {
            return relation[m.data.target]
        }
    }
}

複製代碼

//建立optionecharts

const options = {
    tooltip: {},
    series: [
        {
            type: 'graph', //關係圖
            symbolSize: 70,
            label: {show: true}, //顯示節點文字
            edgeSymbol: ['none', 'arrow'], // 鏈接線兩端形狀，這裏設置箭頭
            data: [
                { name: '郭寶坤',  x: 200,  y: 100 },
                ...GuoBaoKun
            ],
            links: GuoBaoKun.map(item => {
                return  {
                    source: '郭寶坤', //起點
                    target: item.name,  //終點
                    symbolSize: 20,  //箭頭大小
                    label: formatLineLabel({
                        '太子': '效忠',
                        '郭攸之': '父親',
                        '範閒': '仇人',
                    })
                }
            })
        }
    ]
}

複製代碼

//渲染圖形
import * as echarts from 'echarts'

let myChart = null

myChart = echarts.init(dom)
myChart.setOption(options)

複製代碼

這樣一個簡單的郭寶坤人物關係圖就完成了dom

能夠看到默認是圓形節點，咱們能夠根據需求設置成長方形函數

設置各類形狀的節點

series: [
        {
            type: 'graph',
            symbol: 'rect',  //設置成長方形 
            //symbol: 'diamond', 設置成菱形◇
            //symbol: 'triangle', 設置成三角形
            //symbolSize: [100, 50], //設置長寬
            ...
        }
    ]
複製代碼

來看下不一樣的效果圖學習

接下來拓展下人際關係，咱們就以範閒爲例好了flex

拓展三級節點

//建立範閒人際圈
const FanXian = [
    { name: '陳萍萍', x: 100, y: 300 },
    { name: '林婉兒', x: 200, y: 300 },
    { name: '五竹', x: 300, y: 300 },
]
複製代碼

有了人際關係，接下來咱們只要在links 擴展下就能夠了ui

links: GuoBaoKun.map(item => {
    return  {
        source: '郭寶坤',  
        target: item.name, 
        symbolSize: 20,  
        label: formatLineLabel({
            '太子': '效忠',
            '郭攸之': '父親',
            '範閒': '仇人',
        })
    }
}).concat(FanXian.map(item => {   //這裏拓展下鏈接線便可
    return {
        source: '範閒',
        target: item.name,
        symbolSize: 20,
        label: formatLineLabel({
            '陳萍萍': '恩師',
            '林婉兒': '愛人',
            '五竹': '叔叔',
        })
    }
}))
複製代碼

效果圖lua

有須要能夠繼續拓展下去，這裏我就再也不寫了，不過咱們能夠修改下鏈接線樣式url

設置鏈接線

series: [
    {
        ...
        lineStyle: {
            type: 'dashed',
            color: '#201ba1',
            curveness: 0.2,  //曲線 彎曲度 0~1 固然也支持負的, 只是彎曲的方向不一樣
        },
        
        //設置 節點文字樣式
        label: {}, 
        
        //設置鏈接線上文字樣式
        edgeLabel: {
            color: 'red',
            fontSize: 16,
        },
    }
]
複製代碼

參考圖spa

接下來咱們試下讓虛線動起來，這樣從哪到哪的可視化效果就比較明顯些

動態虛線圖

所先講下原理： 經過不斷改變dashOffset 實現
    let dashOffset = 5
    
    options = {
        ...
        series: [
            {
                ...
                lineStyle: {
                    ...
                    type: [5, 10],
                    dashOffset: dashOffset,
                }  
            }
        ]
    } 
    
    
    function move() {
        dashOffset++
        if(dashOffset > 15) {
            dashOffset = 0
        }
        myChart.setOption(options)  
        setTimeout(move, 20)
    }
    
複製代碼

效果圖

比較細的人可能以爲虛線逆流了，咱們只要讓 dashOffset-- 便可

動態伸縮節點

可能這時候又來了個需求須要節點可伸縮展現，點擊一下展開子節點，再點一下關閉子節點那種，因而乎咱們又要繼續拓展了，所先點擊咱們就想到了echarts的點擊事件，可是怎麼給每一個節點綁定，而且怎麼知道點擊的是哪一個節點呢，讓咱們一塊兒來看下

這裏咱們仍是以範閒爲例

//首先建立個開關， 由於咱們只給範閒添加事件， 因此只要一個開關
//若是添加多個節點事件能夠根據需求建立對象

let showFanxianRelation = false  //默認不展現子節點

複製代碼

把上面代碼改造下，分離各個模塊

//建立郭寶坤人際圈鏈接線links

const links_gbk = GuoBaoKun.map(item => {
    return  {
        source: '郭寶坤',
        target: item.name,
        symbolSize: 20,  //箭頭大小
        label: formatLineLabel({
            '太子': '效忠',
            '郭攸之': '父親',
            '範閒': '仇人',
        })
    }
})
複製代碼

//建立範閒人際圈鏈接線links

const links_fx = FanXian.map(item => {
    return {
        source: '範閒',
        target: item.name,
        symbolSize: 20,
        label: formatLineLabel({
            '陳萍萍': '恩師',
            '林婉兒': '愛人',
            '五竹': '叔叔',
        })
    }
})
複製代碼

初始化options裏面的 links 和series的data （設置初始狀態不包含人際圈，只展現範閒我的）

let links = links_gbk
let seriesData = [
    {name: '郭寶坤', x: 200, y: 100},
    ...GuoBaoKun 
]
複製代碼

const options = {
    ...
    data: seriesData,
    links: links
}
複製代碼

接來下只要添加事件，經過點擊動態添加人際關係圈就好了

myChart && myChart.on('click', params => {
    console.log(params)  
    //這裏能夠經過params獲得每一個節點信息，而後再判斷點擊了哪一個節點
})
複製代碼

錯誤示例 - 全局更新 ❌

myChart && myChart.on('click', {name: '範閒'}, () => {
    //這裏我指定了節點，因此不用再判斷了
    
    showFanxianRelation = !showFanxianRelation
    if(showFanxianRelation) {
        links = [...links, ...links_fx]  //添加範閒關係線
        seriesData = [...seriesData, ...FanXian]
        
        //這裏有個細節， 修改了數據後該怎麼從新渲染呢
        //若是從新調用一遍渲染函數你會發現dom報錯， 已經被佔了，
        //這時候可能會調用myChart.dispose() 銷燬以前的實例，
        
        myChart.dispose()
        myChart.init() 

    } else {
        ...
        //把數據還原成初始狀態
    }
})
  // 可是這樣每次點擊節點會致使關係圖閃一下， 全局更新了，
  // 因此這裏咱們不採起這種方法， 只要更新局部options就行
複製代碼

正確示例 - 局部更新 ✔

myChart && myChart.on('click', {name: '範閒'}, () => {
    showFanxianRelation = !showFanxianRelation
    if(showFanxianRelation) {
        options.series[0].links = [...links, ...links_fx]  //添加範閒關係線
        options.series[0].data = [...seriesData, ...FanXian]
    } else {
        options.series[0].links = links_gbk
        options.series[0].data = [
            {name: '郭寶坤', x: 200, y: 100},
            ...GuoBaoKun 
        ]
    }
    
    myChart.setOptions(options)
})
複製代碼

讓咱們來看下效果圖

最後的輕語

人這一輩子到底在追尋着什麼