2019独角兽企业重金招聘Python工程师标准>>>

最近需要做很多点的极坐标图,如果每个点的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)}
}

转载于:https://my.oschina.net/u/2612473/blog/877377

Echart极坐标间隔显示-单类目轴相关推荐

  1. 2019,淘宝无货源转型之路势在必行,单类目玩法实操案例解析

    2019年的淘宝无货源店群越来越艰难,为什么这样说呢?淘宝在2018年年底疯狂打击裂变店铺,不断面临"重复铺货/滥发信息"的违规,还有铺货店铺也遭到频繁"售假违规&quo ...

  2. echart横轴文字显示省略号_Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法...

    最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称 样例: 图二是鼠标移动到名称显示的,怎 ...

  3. echart移上去显示内容_Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法...

    最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称 样例: 图二是鼠标移动到名称显示的,怎 ...

  4. echart横轴文字显示省略号_echarts X轴显示不全 有省略

    代码如下: xAxis: [ { type: 'category', data: result.weekListAndYear,//result.weekList, axisLabel:{ // in ...

  5. 成都百知教育:Shopee虾皮单店铺单类目垂直和多类目垂直有什么区别?

    (成都百知教育)我们都知道shopee,所以我们在运营shopee的时候,是选择多货还是单品配送,这都是很多新卖家都在考虑的问题.今天我们就来说说shopee在运营shopee的时候是选择单品配送还是 ...

  6. echart 反向 极坐标轴_ECharts极坐标系角度轴刻度的属性

    当您想要对 ECharts 极坐标系中的角度轴进行刻度的设置的时候,你必然会考虑如何显示角度轴的刻度,如何合理的设置角度轴刻度的显示间隔,对于角度轴刻度线与标签的对齐要怎么设置等等的一些问题,而解决了 ...

  7. Echarts 折线图间隔显示数据

    var option = {// 主要用来控制图表四周留白grid: {left: '15%',top: '20%',right: '5%'},// 提示框组件tooltip: {trigger: ' ...

  8. 2.JAVAEE-电子商城-类目管理模块

    文章目录 一.实现步骤: 1.后端(6步骤):ItemCategory实体类-->ItemCategory接口-->ItemCategory接口配置文件-->ItemCategory ...

  9. 淘淘商城第三天—完成商品添加功能 商品类目选择 图片上传 图片服务器搭建 kindEditor富文本编辑器的使用 商品添加功能

    1.实现商品类目选择功能 1.1需求 在商品添加页面,点击"选择类目"显示商品类目列表: 请求初始化树形控件的url:/item/cat/list 1.2 EasyUI tree数 ...

最新文章

  1. 大竹中学2021高考成绩查询,2021年大竹中学升学率高不高?
  2. git 可视化工具_版本控制可视化神器Gource:简单易上手,效果恰似烟花秀
  3. 关于图片延迟加载的解决方案(针对移动端)
  4. C#中发送消息给指定的窗口到消息循环
  5. [蓝桥杯][基础练习VIP]完美的代价(贪心)
  6. JAX-RS和JSON-P集成
  7. Javascript二进制运算符的一些运用场景
  8. go 遍历二维数组json_for-range造就循环永动机?快来看看go中for-range的那些事!
  9. Oracle SUn
  10. ubuntu 串口调试工具_开源软件分享基于WPF的串口调试工具
  11. 查计算机硬盘序列号6,Win7电脑查看硬盘序列号的方法
  12. USB 协议分析(含基本协议和 USB 请求和设备枚举)
  13. 不再因BT吃官司 Magnet能否将BT漂白?
  14. seo具体是怎么操作的(seo网站优化如何做)
  15. c++读取倍福PLC中轴状态
  16. 南怀瑾:“心静出贵人”,中年后这三个地方静,一切都会越来越顺!
  17. java植物僵尸_Java小项目之:植物大战僵尸,这个僵尸不太冷!内附素材
  18. 青少年CTF - Crypto - 一起下棋 Wp WriteUp
  19. 面试题:垃圾回收机制(GC)
  20. 【JZOJ 4821】 打膈膜

热门文章

  1. 认真学习系列:《计算机网络自顶向下方法》笔记
  2. 亲密关系沟通-【认识需求2】-建立良好沟通环境
  3. C语言将结点s赋给表L,数据结构-单链表
  4. a点到b点最短路线有多少条_8下数学培优:几何体上最短路径问题,总结与提升,不一样的感受...
  5. 大连交通大学计算机网络作业,计算机网络题库(大连交通大学)chapter4
  6. java 获取下拉框的值_java中怎么获取下拉框的值
  7. java 解锁关闭文件占用_程序员:Java文件锁定、解锁和其它NIO操作
  8. 鸟哥Linux计算退伍时间,发现《鸟哥的Linux基础篇》中有个脚本还能再完善点。...
  9. android app报错log,Android studio 解决logcat无过滤工具栏的操作
  10. eja智能压力变送器工作原理_电量变送器是什么?电量变送器工作原理解析