社区
Java
帖子详情
用echars做折线图,怎么在x轴显示到年月日 ,而每个坐标可以显示到年月日时分呢
WangBrendan
2018-07-03 01:59:58
...全文
5579
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
轴
自定义时间段
显示
,自适应分时天月年
显示
,其他类似根据时间合并也可以用
折线图
的实现
在二维平面上,
折线图
通常用x
轴
表示时间或类别,y
轴
表示数值。 在实现
折线图
时,我们可以选择多种编程语言和库。例如,Python中的matplotlib库是一个常用的选择,它提供了丰富的图形绘制功能。以下是一个基本的...
python画图把时间作为横
坐标
的方法
对于时间序列数据而言,可以非常方便地将时间作为横
坐标
来绘制。 示例代码如下: ```python import matplotlib.pyplot as plt # 绘制时间序列数据 df['value'].plot() # 设置图表标题和
坐标
轴
标签 plt.title('...
echarts实现双重
折线图
,X
轴
为时间,精确到秒级
【代码】echarts实现双重
折线图
,X
轴
为时间,精确到秒级。
echarts
折线图
时间
轴
展示
[javascript] view ...echarts
折线图
,我们平时在使用的时候,x
轴
上面的数据通常会有很多很多,使得x
轴
上面的数据通常
显示
不完整 解决方案一:对x
轴
坐标
添加时间间隔 //添加x
轴
时间间隔(js) xAxis : [ { a
Java
51,402
社区成员
85,918
社区内容
发帖
与我相关
我的任务
Java
Java相关技术讨论
复制链接
扫一扫
分享
社区描述
Java相关技术讨论
java
spring boot
spring cloud
技术论坛(原bbs)
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章