社区
Java
帖子详情
用echars做折线图,怎么在x轴显示到年月日 ,而每个坐标可以显示到年月日时分呢
WangBrendan
2018-07-03 01:59:58
...全文
5567
2
打赏
收藏
用echars做折线图,怎么在x轴显示到年月日 ,而每个坐标可以显示到年月日时分呢
[图片]
复制链接
扫一扫
分享
转发到动态
举报
AI
作业
写回复
配置赞助广告
用AI写文章
2 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
scaling_heights
2018-08-06
打赏
举报
回复
var option1 = {
title: {
text: '带宽',
show: true
},
tooltip: {
trigger: 'axis',
formatter:function(params){
var relVal = moment(Number(params[0].name)).format("YYYY-MM-DD HH:mm:ss")+"<br/>";
relVal += params[0].seriesName+ ' : ' + params[0].value+"<br/>";
return relVal;
}
},
legend: {
show: true
},
toolbox: {
show: false
},
color: this.color,
calculable: true,
xAxis: [{
name: '',
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
nameTextStyle: {
color: 'rgba(0, 0, 0, 0.69)'
},
axisLabel: {
textStyle: {
color: 'black'
}
},
axisLabel : {
formatter : function(params,index){
var currentYear = moment().format("YYYY");
var currentMonth = moment().format("MM");
var currentDay = moment().format("DD");
var thisYear = moment(Number(params)).format("YYYY");
var thisMonth = moment(Number(params)).format("MM");
var thisDay = moment(Number(params)).format("DD");
var hourAndMinite = moment(Number(params)).format("HH:mm");
if(currentYear == thisYear){
return hourAndMinite + "\n" + moment(Number(params)).format("MM-DD");
}else{
return hourAndMinite + "\n" + moment(Number(params)).format("YYYY-MM-DD");
}
}
},
data: this.bandwidthX
}],
yAxis: [{
axisLine: {
show: false
},
nameLocation: 'end',
nameGap: 20,
nameRotate: 0,
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: ['rgba(0, 0, 0, 0.2)']
}
},
axisLabel: {
textStyle: {
color: 'black',
fontSize: 14
}
},
name: '',
type: 'value',
nameTextStyle: {
color: 'rgba(0, 0, 0, 0.69)'
}
}],
series: [{
name: '带宽',
type: 'line',
stack: '总量',
data: this.bandwidthY,
markPoint : {
data : [
{type : 'max', name: '最大值'}
]
},
markLine : {
data : [
{type : 'max', name: '最大值'}
]
}
}]
}
爬着也要前进
2018-07-24
打赏
举报
回复
这个都在option 里面设置,横坐标和纵坐标值都是自己绑定上去的额,可以去官方看看配置
echarts自定义x
轴
-分时天月年自定义
完全小白就不要看了,容易看迷,涉及到公司的一些东西,里面代码有删减,但是整理一下肯定是能用的,方法抽出来了,可以借鉴一下适当修改应该都能用。这个实现的功能就是echarts x
轴
自定义时间段
显示
,自适应分时天月年
显示
,其他类似根据时间合并也可以用
折线图
的实现
一个简单的
折线图
,可扩展性十分强。希望大家喜欢
python画图把时间作为横
坐标
的方法
今天小编就为大家分享一篇python画图把时间作为横
坐标
的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
echarts
折线图
时间
轴
展示
[javascript] view plain copy echarts
折线图
,我们平时在使用的时候,x
轴
上面的数据通常会有很多很多,使得x
轴
上面的数据通常
显示
不完整 解决方案一:对x
轴
坐标
添加时间间隔 //添加x
轴
时间间隔(js) xAxis : [ { a
echarts x
轴
的日期
显示
为
年月日
xAxis: { type: "time", //min: new Date("开始时间"), //max: new Date("结束时间"), axisLabel: { interale: 0, rotate: -40, //设置日期
显示
样式(倾斜度) formatter: function (value) {//在这里写你需要
Java
51,397
社区成员
85,845
社区内容
发帖
与我相关
我的任务
Java
Java相关技术讨论
复制链接
扫一扫
分享
社区描述
Java相关技术讨论
java
spring boot
spring cloud
技术论坛(原bbs)
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章