最近需要做很多点的极坐标图,如果每个点的label都显示,会叠加在一起,视觉效果很差,查看echart的文档,可以设置interval ,但是 设置的时候没有效果,只能间接实现间隔显示label
var hours = [
'3/20 8时', '3/20 9时', '3/20 10时', '3/20 11时', '3/20 12时', '3/20 13时', '3/20 14时',
'3/20 15时', '3/20 16时', '3/20 17时', '3/20 18时', '3/20 19时',
'3/20 20时', '3/20 21时', '3/20 22时', '3/20 23时', '3/20 0时',
'3/20 1时', '3/20 2时', '3/20 3时', '3/20 4时', '3/20 5时', '3/20 6时', '3/20 7时',
'3/21 8时', '3/21 9时', '3/21 10时', '3/21 11时', '3/21 12时', '3/21 13时', '3/21 14时',
'3/21 15时', '3/21 16时', '3/21 17时', '3/21 18时', '3/21 19时',
'3/21 20时', '3/21 21时', '3/21 22时', '3/21 23时', '3/21 0时',
'3/21 1时', '3/21 2时', '3/21 3时', '3/21 4时', '3/21 5时', '3/21 6时', '3/21 7时',
'3/22 8时', '3/22 9时', '3/22 10时', '3/22 11时', '3/22 12时', '3/22 13时', '3/22 14时',
'3/22 15时', '3/22 16时', '3/22 17时', '3/22 18时', '3/22 19时',
'3/22 20时', '3/22 21时', '3/22 22时', '3/22 23时', '3/22 0时',
'3/22 1时', '3/22 2时', '3/22 3时', '3/22 4时', '3/22 5时', '3/22 6时', '3/22 7时',
'3/23 8时', '3/23 9时', '3/23 10时', '3/23 11时', '3/23 12时', '3/23 13时', '3/23 14时',
'3/23 15时', '3/23 16时', '3/23 17时', '3/23 18时', '3/23 19时',
'3/23 20时', '3/23 21时', '3/23 22时', '3/23 23时', '3/23 0时',
'3/23 1时', '3/23 2时', '3/23 3时', '3/23 4时', '3/23 5时', '3/23 6时', '3/23 7时',
'3/24 8时', '3/24 9时', '3/24 10时', '3/24 11时', '3/24 12时', '3/24 13时', '3/24 14时',
'3/24 15时', '3/24 16时', '3/24 17时', '3/24 18时', '3/24 19时',
'3/24 20时', '3/24 21时', '3/24 22时', '3/24 23时', '3/24 0时',
'3/24 1时', '3/24 2时', '3/24 3时', '3/24 4时', '3/24 5时', '3/24 6时', '3/24 7时',
'3/25 8时', '3/25 9时', '3/25 10时', '3/25 11时', '3/25 12时', '3/25 13时', '3/25 14时',
'3/25 15时', '3/25 16时', '3/25 17时', '3/25 18时', '3/25 19时',
'3/25 20时', '3/25 21时', '3/25 22时', '3/25 23时', '3/25 0时',
'3/25 1时', '3/25 2时', '3/25 3时', '3/25 4时', '3/25 5时', '3/25 6时', '3/25 7时',
'3/26 8时', '3/26 9时', '3/26 10时', '3/26 11时', '3/26 12时', '3/26 13时', '3/26 14时',
'3/26 15时', '3/26 16时', '3/26 17时', '3/26 18时', '3/26 19时',
'3/26 20时', '3/26 21时', '3/26 22时', '3/26 23时', '3/26 0时',
'3/26 1时', '3/26 2时', '3/26 3时', '3/26 4时', '3/26 5时', '3/26 6时', '3/26 7时'
];
var labelIndex = 0;
var labelInterval;
var splitLineColor = ['#999'];
//随机生成168个数据
var data = [];
for (i = 0; i < 168; i++) {
var num = Math.floor(Math.random() * 50 + 50);
data.push(num);
}
//设置间隔数
if (data.length < 24) {
labelInterval = 1
} else {
labelInterval = data.length / 24;
}
//设置分隔线的颜色
for (i = 1; i <= data.length / 24; i++) {
if (i > 1) {
splitLineColor.push("transparent");
}
}
var option1 = {
title: {
// text: 'Punch Card of Github',
},
legend: {
data: ['第1周压力(bar)'],
//left: 'right'
},
polar: {
center: ['50%', '46%'],
radius: "78%"
},
tooltip: {
trigger: 'axis',
},
angleAxis: {
type: 'category',
data: hours,
boundaryGap: false,
startAngle: 0,
axisLabel: {
formatter: function(value, index) {
console.log(value, index);//显示所有的value与index值
if (index % labelInterval === 0) {
return value //显示此index的label的值
} else {
return ""
}
}
},
axisTick: {
show: false
},
splitArea: {
//show:true,
areaStyle: {
//color: "gray",
//opacity:0.6,
}
},
splitLine: {
show: true,
interval: 5,
zlevel: 50,
lineStyle: {
color: splitLineColor,
type: 'dashed'
}
},
axisLine: {
show: true
}
},
radiusAxis: {
min: 10,
axisLine: {
show: true
},
axisLabel: {
rotate: 0
}
},
series: [{
name: '第1周压力(bar)',
type: 'line',
coordinateSystem: 'polar',
showSymbol: false,
data: data,
itemStyle: {
normal: {
color: "#fb920b"
}
},
}, ]
};
var myChart = echarts.init(document.getElementById('polar'), theme);
myChart.setOption(option1);
ObjectResize(myChart.resize)
function ObjectResize(fn) {
if (window.addEventListener) {
window.addEventListener("resize", fn, false);
} else {
window.attachEvent("onresize", fn)
}
}
(adsbygoogle = window.adsbygoogle || []).push({});