1. 程式人生 > >活用echarts關係圖formatter方法,實現同名節點的渲染

活用echarts關係圖formatter方法,實現同名節點的渲染

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轉換
         }
     }
},

效果如下: