最近須要作不少點的極座標圖,若是每一個點的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) } }