前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Echart极坐标间隔显示-单类目轴 原

Echart极坐标间隔显示-单类目轴 原

作者头像
tianyawhl
发布2019-04-04 16:01:41
9790
发布2019-04-04 16:01:41
举报
文章被收录于专栏:前端之攻略前端之攻略

最近需要做很多点的极坐标图,如果每个点的label都显示,会叠加在一起,视觉效果很差,查看echart的文档,可以设置interval ,但是 设置的时候没有效果,只能间接实现间隔显示label

代码语言:javascript
复制
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({});

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017/04/12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档