百度指数-需求图谱echarts #666配置项内容和展示
https://index.baidu.com/v2/main/index.html#/demand/%E6%99%BA%E8%83%BD%E5%AE%B6%E5%B1%85?words=%E6%99%BA%E8%83%BD%E5%AE%B6%E5%B1%85
配置项如下
let data = {
"status": 0,
"data": {
"period": "20190630|20200621",
"wordlist": [{
"keyword": "\u667a\u80fd\u5bb6\u5c45",
"wordGraph": [{
"word": "\u667a\u80fd\u5bb6\u5c45\u54c1\u724c\u6392\u884c",
"pv": 7590,
"ratio": 86,
"sim": 3448
}, {
"word": "\u667a\u80fd\u5bb6\u5c45\u7cfb\u7edf",
"pv": 1842,
"ratio": 110,
"sim": 2208
}, {
"word": "\u667a\u80fd\u5bb6\u5177",
"pv": 1140,
"ratio": 91,
"sim": 2107
}, {
"word": "\u667a\u80fd\u5bb6\u5c45\u63a7\u5236\u7cfb\u7edf",
"pv": 7486,
"ratio": 94,
"sim": 1982
}, {
"word": "\u5c0f\u7c73\u667a\u80fd\u5bb6\u5c45",
"pv": 5842,
"ratio": 93,
"sim": 1716
}, {
"word": "\u667a\u80fd\u5bb6\u5c45\u54c1\u724c",
"pv": 962,
"ratio": 97,
"sim": 1715
}, {
"word": "\u667a\u80fd\u5bb6\u5c45\u4ea7\u54c1",
"pv": 562,
"ratio": 91,
"sim": 1665
}, {
"word": "\u667a\u80fd\u5bb6\u5c45\u65b9\u6848",
"pv": 418,
"ratio": 108,
"sim": 1331
}, {
"word": "\u667a\u80fd\u5bb6\u5c45\u516c\u53f8",
"pv": 500,
"ratio": 115,
"sim": 1126
}, {
"word": "\u667a\u80fd\u5bb6\u5c45\u8bba\u6587",
"pv": 350,
"ratio": 121,
"sim": 1051
}, {
"word": "\u667a\u80fd\u5bb6\u5c45\u8bbe\u5907",
"pv": 364,
"ratio": 88,
"sim": 1035
}, {
"word": "\u6d77\u5c14\u667a\u80fd\u5bb6\u5c45",
"pv": 2374,
"ratio": 107,
"sim": 1014
}, {
"word": "\u676d\u5dde\u667a\u80fd\u5bb6\u5c45",
"pv": 372,
"ratio": 101,
"sim": 899
}, {
"word": "\u667a\u80fd\u5316\u5bb6\u5c45\u7cfb\u7edf",
"pv": 50,
"ratio": 156,
"sim": 847
}, {
"word": "\u667a\u5bb6\u7f51",
"pv": 388,
"ratio": 101,
"sim": 818
}, {
"word": "\u534e\u4e3a\u667a\u80fd\u5bb6\u5c45",
"pv": 4908,
"ratio": 99,
"sim": 802
}, {
"word": "\u667a\u80fd\u5bb6\u5c45\u529f\u80fd",
"pv": 64,
"ratio": 89,
"sim": 774
}, {
"word": "\u798f\u5bb6\u667a\u80fd",
"pv": 14,
"ratio": 88,
"sim": 774
}, {
"word": "\u667a\u80fd\u5bb6\u5c45\u5382\u5bb6",
"pv": 206,
"ratio": 100,
"sim": 759
}, {
"word": "\u667a\u6167\u5bb6\u5c45",
"pv": 1028,
"ratio": 98,
"sim": 732
}, {
"word": "\u4ec0\u4e48\u662f\u667a\u80fd\u5bb6\u5c45",
"pv": 698,
"ratio": 78,
"sim": 720
}, {
"word": "\u667a\u80fd\u5bb6\u5c45\u884c\u4e1a",
"pv": 140,
"ratio": 106,
"sim": 676
}, {
"word": "\u6b27\u745e\u535a",
"pv": 5236,
"ratio": 101,
"sim": 666
}, {
"word": "\u667a\u80fd\u6307\u5957",
"pv": 56,
"ratio": 187,
"sim": 638
}, {
"word": "\u667a\u80fd\u5bb6\u5c45\u8bba\u575b",
"pv": 156,
"ratio": 116,
"sim": 611
}, {
"word": "\u667a\u80fd\u5bb6\u5c45\u52a0\u76df",
"pv": 552,
"ratio": 71,
"sim": 599
}, {
"word": "\u745e\u8baf\u667a\u80fd\u5bb6\u5c45",
"pv": 8,
"ratio": 100,
"sim": 599
}, {
"word": "\u70df\u53f0\u667a\u80fd\u5bb6\u5c45",
"pv": 348,
"ratio": 109,
"sim": 599
}, {
"word": "\u90d1\u5dde\u667a\u80fd\u5bb6\u5c45",
"pv": 18,
"ratio": 39,
"sim": 599
}, {
"word": "\u505c\u8f66\u573a\u4e00\u6c27\u5316\u78b3",
"pv": 4,
"ratio": 200,
"sim": 599
}, {
"word": "THINKHOME\u667a\u8f69",
"pv": 4,
"ratio": 100,
"sim": 599
}, {
"word": "\u7535\u52a8\u7a97\u5e18\u7cfb\u7edf",
"pv": 44,
"ratio": 169,
"sim": 599
}, {
"word": "\u957f\u6c99\u667a\u80fd\u5bb6\u5c45",
"pv": 54,
"ratio": 90,
"sim": 599
}]
}]
},
"logid": 3679053901,
"message": null
}
data = data.data.wordlist[0].wordGraph
console.log(data)
const color_center = '#73afff'
const color_up = '#FF8985'
const color_down = '#08D0A3'
const getNumWidthRange = (originalRange, resultRange) => {
console.log(originalRange, resultRange)
let scale = (originalRange[1] - originalRange[0]) / (resultRange[1] - resultRange[0])
return (num) => (num - originalRange[0]) / scale + resultRange[0]
}
let getSymbolSizeRange = (() => {
const pv = data.map(i => i.pv)
return getNumWidthRange([Math.min(...pv), Math.max(...pv)], [16, 32])
})()
let getAngleIndexRange = getNumWidthRange([0, 1], [0, 35])
let getRadiusRange = (() => {
let distance = data.map(i => i.sim)
return getNumWidthRange([Math.min(...distance), Math.max(...distance)], [0, 35])
})()
option = {
"color": [
"#c23531",
"#2f4554",
"#61a0a8",
"#d48265",
"#91c7ae",
"#749f83",
"#ca8622",
"#bda29a",
"#6e7074",
"#546570",
"#c4ccd3"
],
"gradientColor": [
"#f6efa6",
"#d88273",
"#bf444c"
],
"textStyle": {
"fontFamily": "sans-serif",
"fontSize": 12,
"fontStyle": "normal",
"fontWeight": "normal"
},
"animation": "auto",
"animationDuration": 1000,
"animationDurationUpdate": 300,
"animationEasing": "exponentialOut",
"animationEasingUpdate": "cubicOut",
"animationThreshold": 2000,
"progressiveThreshold": 3000,
"progressive": 400,
"hoverLayerThreshold": 3000,
"useUTC": false,
"radiusAxis": [{
"type": "value",
"splitNumber": 3,
"minInterval": 5,
"maxInterval": 10,
"min": 0,
"max": 35,
"splitLine": {
"show": false,
"lineStyle": {
"color": [
"#ccc"
],
"width": 1,
"type": "solid"
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"#E9F1FE",
"#E9F1FE",
"#F7FAFE",
"#FFFFFF"
]
}
},
"axisLine": {
"show": false,
"onZero": true,
"onZeroAxisIndex": null,
"lineStyle": {
"color": "#333",
"width": 1,
"type": "solid"
},
"symbol": [
"none",
"none"
],
"symbolSize": [
10,
15
]
},
"axisTick": {
"show": false,
"inside": false,
"length": 5,
"lineStyle": {
"width": 1
}
},
"axisLabel": {
"show": false,
"inside": false,
"rotate": 0,
"showMinLabel": null,
"showMaxLabel": null,
"margin": 8,
"fontSize": 12
},
"boundaryGap": [
0,
0
],
"show": true,
"zlevel": 0,
"z": 0,
"inverse": false,
"name": "",
"nameLocation": "end",
"nameRotate": null,
"nameTruncate": {
"maxWidth": null,
"ellipsis": "...",
"placeholder": "."
},
"nameTextStyle": {},
"nameGap": 15,
"silent": false,
"triggerEvent": false,
"tooltip": {
"show": false
},
"axisPointer": {}
}],
"angleAxis": [{
"type": "value",
"boundaryGap": false,
"interval": 1,
"min": 0,
"max": 36,
"splitLine": {
"show": false,
"lineStyle": {
"color": [
"#ccc"
],
"width": 1,
"type": "solid"
}
},
"axisLine": {
"show": false,
"onZero": true,
"onZeroAxisIndex": null,
"lineStyle": {
"color": "#333",
"width": 1,
"type": "solid"
},
"symbol": [
"none",
"none"
],
"symbolSize": [
10,
15
]
},
"axisTick": {
"show": false,
"inside": false,
"length": 5,
"lineStyle": {
"width": 1
}
},
"axisLabel": {
"show": false,
"inside": false,
"rotate": false,
"showMinLabel": null,
"showMaxLabel": null,
"margin": 8,
"fontSize": 12
},
"splitNumber": 12,
"show": true,
"zlevel": 0,
"z": 0,
"inverse": false,
"name": "",
"nameLocation": "end",
"nameRotate": null,
"nameTruncate": {
"maxWidth": null,
"ellipsis": "...",
"placeholder": "."
},
"nameTextStyle": {},
"nameGap": 15,
"silent": false,
"triggerEvent": false,
"tooltip": {
"show": false
},
"axisPointer": {},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
},
"startAngle": 90,
"clockwise": true
}],
"polar": [{
"radius": 460,
"center": [
"50%",
"46%"
],
"zlevel": 0,
"z": 0
}],
"series": [{
"type": "scatter",
"coordinateSystem": "polar",
label: {
show: true,
color: '#666',
position: 'bottom',
formatter: (params) => {
return params.value[2].word
}
},
emphasis: {
label: {
show: true
}
},
symbol: 'circle',
symbolSize: (value) => {
return getSymbolSizeRange(value[2].pv)
},
data: data.map((item, iIndex) => {
return {
value: [getRadiusRange(item.sim), getAngleIndexRange(Math.random()), item]
}
}),
"animation": true,
"name": "智能家居",
itemStyle: {
color: (params) => {
return params.value[2].ratio > 100 ? color_up : color_down
}
},
"zlevel": 0,
"z": 2,
"legendHoverLink": true,
"hoverAnimation": true,
"large": false,
"largeThreshold": 2000,
}],
}
截图如下
