1.0.3 • Published 4 years ago
radar-map v1.0.3
雷达图组件
使用说明
代码示例
页面容器
<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: 当前点击的词