最近须要作不少点的极坐标图,若是每一个点的label都显示,会叠加在一块儿,视觉效果不好,查看echart的文档,能够设置interval ,可是 设置的时候没有效果,只能间接实现间隔显示labeljavascript
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) } }