Echart極座標間隔顯示-單類目軸

最近須要作不少點的極座標圖,若是每一個點的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)
    }
}
相關文章
相關標籤/搜索