活用echarts關係圖formatter方法,實現同名節點的渲染
阿新 • • 發佈:2018-12-25
echarts關係圖的配置中,有兩個關鍵的資料,data與links,我們在製作關係圖的時候,data陣列中,節點名稱name必須唯一,否則echarts會丟擲 “Cannot set property 'dataIndex' of undefined”的錯誤。但有時我們偏偏需要出現兩個同名的節點,那麼如何實現。
1 data資料加工,
既然echarts要求data陣列中name屬性(預設展示的label)必須唯一,那麼我們在進行data資料組裝的時候,必須使用一個唯一欄位進行,將name與我們要顯示的 欄位進行匹配,可參照下列程式碼
let originData = { name1:'張三', name2:'張三', name3:'李四', name4:'王五', } for(var p in originData ){ data.push({ name:p, showName:originData[p], tooltip: {//此處為tootips轉換 shor:true, formatter:function(params){ return params.data.showName } } }) }
資料拼裝完成後,在series中配置,label ,程式碼如下
label: { normal: { show: true, position: ['50%', '100%'], formatter:function(params){ return params.data.showName //此處為label轉換 } } },
效果如下: