radar-map

雷达图组件

使用说明

代码示例

页面容器

<div class="search-word-wrapper"></div>

创建组件

import RadarMap from 'radar-map'
 
const data = {
  "secondaryKeywords": [
    {
      "thirdKeywords": [
        {
          "subKeywords": [
            "纽约",
            "底特律"
          ],
          "word": "加州"
        },
        {
          "subKeywords": [
            "洛杉矶",
            "华盛顿"
          ],
          "word": "德州"
        }
      ],
      "word": "美国"
    },
    {
      "thirdKeywords": [
        {
          "subKeywords": [
            "南京",
            "苏州"
          ],
          "word": "江苏"
        },
        {
          "subKeywords": [
            "合肥",
            "巢湖"
          ],
          "word": "安徽"
        }
      ],
      "word": "中国"
    }
  ],
  "word": "国家"
}
 
new RadarMap ({
  container: document.querySelector('.search-word-wrapper'),
  data,
  clickCallback: function ({ curLevel, secondaryKeywordsIndex, thirdKeywordsIndex, fourthKeywordsIndex, isBack, isCenter, curWords }) {
    console.log("TCL: curLevel, secondaryKeywordsIndex, thirdKeywordsIndex, fourthKeywordsIndex, isBack, isCenter, curWords", curLevel, secondaryKeywordsIndex, thirdKeywordsIndex, fourthKeywordsIndex, isBack, isCenter, curWords)
  },
  exposureCallback: function ({ curLevel, secondaryKeywordsIndex, thirdKeywordsIndex, isBack, isCenter, curWords }) {
    console.log("TCL: curLevel, secondaryKeywordsIndex, thirdKeywordsIndex, isBack, isCenter, curWords", curLevel, secondaryKeywordsIndex, thirdKeywordsIndex, isBack, isCenter, curWords)
  }
})

参数说明：

• container：页面容器dom

• data：要渲染的数据，属性要与示例中保持一致

• clickCallback：节点的点击回调

• exposureCallback：节点的曝光回调

  点击和曝光回调的参数说明：

  • curLevel: 当前渲染的层级
  • secondaryKeywordsIndex：如果显示的是第二级图谱，显示的中心词在数组的索引
  • thirdKeywordsIndex：如果显示的是第三级图谱，显示的中心词在数组的索引
  • fourthKeywordsIndex: 如果显示的是第三级图谱，点击的子搜索词索引
  • isBack：是否是返回按钮
  • isCenter: 是否是中心词
  • curWords: 当前点击的词