文档章节

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

tianyawhl
 tianyawhl
发布于 2017/04/12 10:16
字数 967
阅读 56
收藏 0

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

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)
    }
}

 

© 著作权归作者所有

共有 人打赏支持
tianyawhl
粉丝 5
博文 239
码字总数 122945
作品 0
常州
前端工程师
私信 提问
echart 极坐标怎么显示label 设置show属性不起作用

echart 极坐标怎么显示label 设置show属性不起作用

易言PK
2018/07/27
870
0
javaweb项目获取echart图的一个方法上面加了@Cacheable注解,Echart图显示速度没有发生变化,感觉注解没用啊

javaweb 项目的一个Echart图因为后台数据处理量比较大,显示有点慢,于是我在获取echart图数据的方法上面加了@Cacheable注解,讲道理第二次由于缓存数据后echart图显示应该比较快一点,但实际...

Jordan裔
2018/03/20
63
0
javaweb项目获取echart图的一个方法上面加了@Cacheable注解,Echart图显示速度没有发生变化,感觉注解没用啊

javaweb 项目的一个Echart图因为后台数据处理量比较大,显示有点慢,于是我在获取echart图数据的方法上面加了@Cacheable注解,讲道理第二次由于缓存数据后echart图显示应该比较快一点,但实际...

Jordan裔
2018/03/21
204
2
Echart怎么和mysql连接,进行数据展示,使用php+mysql +Echart

最近在学习Echart,怎么将Echart和Mysql连接,不把数据写死在Echart中,显示在网页上?

图图0317
2015/04/23
425
0
如何让单文件引入后的图表能够在浏览器调整窗口大小时图表也刷新宽度?

@Kener-林峰 你好,想跟你请教个问题: 我根据echart提供的demo,在我的工程中加入了echart(echarts-all.js),但是如何让图表的宽度自动那? echart提供的例子都支持,可是单文件引入后就不...

宋万龙
2014/12/12
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

搜索引擎(Elasticsearch搜索详解)

学完本课题,你应达成如下目标: 掌握ES搜索API的规则、用法。 掌握各种查询用法 搜索API 搜索API 端点地址 GET /twitter/_search?q=user:kimchy GET /twitter/tweet,user/_search?q=user:...

这很耳东先生
37分钟前
6
0
浅谈如何减少GC的次数

GC会stop the world。会暂停程序的执行,带来延迟的代价。所以在开发中,我们不希望GC的次数过多。 本文将讨论如何在开发中改善各种细节,从而减少GC的次数。 (1)对象不用时最好显式置为 Nu...

浮躁的码农
39分钟前
0
0
jpa 自定义返回对象

任何ORM框架都少不了开放自定义sql的问题。jpa自然也不例外,很多场景需要写复杂sql的。 首先定义一个方法签名,然后打上@Query注解。像下面这样,需要注意nativeQuery,这个表示query中的字...

朝如青丝暮成雪
今天
2
0
驰骋工作流引擎-批量审批设置

批量审批设置 关键词: 工作流引擎批量审批 Java工作流批量审批设计 应用场景 批量审批最多应用于代办中有很多相同的流程需要审批,若是把一些不是特别重要的审批做批量处理这样就可以提高很...

孟娟
今天
2
0
springmvc源码解析之DispatcherServlet四

说在前面 本次主要介绍DispatcherServlet,关注”天河聊架构“更多精彩。 springmvc配置解析 进入方法org.springframework.web.bind.annotation.support.HandlerMethodInvoker#resolveHttpE...

天河2018
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部