雷达图的小知识点

option = {

title: {

// text: '浏览器占比变化',

// subtext: '纯属虚构',

top: 10,

left: 10

},

tooltip: {

trigger: 'item',

formatter:function(params){

console.log("当期hover值",params)

console.log("xdata：",xdata)

// console.log("打印hover值",xdata[0].text,params.value[0],xdata[1].text,params.value[1],xdata[2].text,params.value[2],xdata[3].text,params.value[3],xdata[4].text,params.value[4])

var res=""

for(var index in xdata){

res=res+xdata[index].text+' '+params.value[index]+'\n'

// this.globalData.action.push(res.data.data[index].name)

// this.globalData.time.push(res.data.data[index].value)

}

console.log("显示：",res)

// var res="<p>名称:"+params[0].seriesName+"值:"+params[0].data.value+"时间:"+params[0].data.mDate+"</p>";

// var res="liuxiaoxin"

return res;

}

},

legend: {

type: 'scroll',

bottom: 10,

data: zdata

},

visualMap: {

top: 'middle',

right: 20,

//不显示柱状图

show:false,

color: ['red', 'yellow'],

calculable: true

},

radar: {

indicator: xdata

},

series: [{

name: '浏览器（数据纯属虚构）',

type: 'radar',

symbol: 'none',

lineStyle: {

width: 1

},

emphasis: {

areaStyle: {

color: 'rgba(0,250,0,0.3)'

}

},

data: ydata

}]





};

以上，xdata为具体的数据，ydata为雷达图的各个顶点，zdata为xdata里面的name值

下面给出xdata、ydata、zdata

xdata

[

{

"name": "2021-02-04",

"value": [0,101,200,0]

},

{

"name": "2021-02-03",

"value": [0,0,0,0]

},

{

"name": "2021-02-02",

"value": [0,0,0,0]

},

{

"name": "2021-02-01",

"value": [0,10,0,0]

}

]

ydata

[

{

"text": "helloworld",

"max": 720

},

{

"text": "读书",

"max": 720

},

{

"text": "睡觉",

"max": 720

}

]

zdata

["2021-02-04","2021-02-03","2021-02-02","2021-02-01"]

如果zdata的值与xdata的name不对应，则zdata会不显示