社区
Java
帖子详情
用echars做折线图,怎么在x轴显示到年月日 ,而每个坐标可以显示到年月日时分呢
WangBrendan
2018-07-03 01:59:58
...全文
5652
2
打赏
收藏
用echars做折线图,怎么在x轴显示到年月日 ,而每个坐标可以显示到年月日时分呢
[图片]
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用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和y
轴
坐标
颜色修改
继续对Echarts的属性进行探索,关于如何修改Echarts的x和y
轴
坐标
颜色的问题,继续看,主要修改代码的地方: /*改变xy
轴
颜色*/ axisLine: { lineStyle: { color: '#e3...
echars
解决多条
折线图
x
轴
与数据不对应的情况
以前画单条
折线图
的时候会直接将x
轴
data,series中data分开来填充 xAxis xAxis: [{ type: 'category', boundaryGap: false, axisLabel: { color: '#30eee9' }, axisLine: { show: false, lineStyle: { color: '#397cbc' } }, axisTick: { show: fals
Echarts
折线图
x
轴
全部
显示
简介 在echarts中应用线状图时,当数据量过多的时候,X
轴
的
坐标
就会
显示
不全,因为ECharts图表组件内部有一个机制,用于统计xAxis
坐标
刻度的个数和图表宽度,从而会自动调整刻度间隔个数以此达到刻度相互之间不致于很拥挤而影响图表欣赏性。 刻度间隔的相关属性就是:interval。 interval默认为auto,自动隐藏
显示
不下的 当值为0时,则全部
显示
还有一个属性:rotate: nu...
echarts x和数据对应_
echars
折线图
如何让x
轴
的数据与series数据不对应?
x
轴
显示
7条数据,series需要
显示
100多条数据,在页面上
显示
成这样貌似是一个x数据对应一个series数据,怎样让100多条数据全部展示呢?`xAxis: [{boundaryGap: false, //
坐标
的刻度是否在中间data: this.testOpinionData, //数据axisLine: { //
坐标
轴
线条相关设置(颜色等)lineStyle: {color: '...
Java
51,408
社区成员
86,097
社区内容
发帖
与我相关
我的任务
Java
Java相关技术讨论
复制链接
扫一扫
分享
社区描述
Java相关技术讨论
java
spring boot
spring cloud
技术论坛(原bbs)
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章