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)
    }
}
相关文章
相关标签/搜索