前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ECharts x轴设置成时间间隔

ECharts x轴设置成时间间隔

作者头像
kirin
发布2021-03-15 10:47:54
3.9K0
发布2021-03-15 10:47:54
举报
文章被收录于专栏:Kirin博客

问题:

代码语言:javascript
复制
data=[
 {
 value: [
 “1997-10-1”,
 684
 ]
 },
 {
value: [
 “1997-10-2”,
 200
 ]
 },
 {
value: [
 “1997-10-15”,
 300
 ]
 }]
option = {
 xAxis: {
 type: ‘time’
 },
 yAxis: {
 type: ‘value’
 },
 series: [{
 data: data,
 type: ‘line’
 }]
 };

现在x轴是根据数据为三个平均分的,我现在怎么让它以时间间隔大小分配宽度?

解决:查看Echarts文档

xAxis.type string [ default: ‘category’ ] 坐标轴类型。

可选:

‘value’ 数值轴,适用于连续数据。

‘category’ 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。

‘time’ 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。

‘log’ 对数轴。适用于对数数据。 将 xAxis.type设置为 time

代码语言:javascript
复制
data=[
 {
 value: [
 “1997-10-1”,
 684
 ]
 },
 {
value: [
 “1997-10-2”,
 200
 ]
 },
 {
value: [
 “1997-10-15”,
 300
 ]
 }]
option = {
 xAxis: {
 type: ‘time’
 },
 yAxis: {
 type: ‘value’
 },
 series: [{
 data: data,
 type: ‘line’
 }]
 };

完成。。。

虽然比较简单,但是为了实现这样的效果,从网上找了很多博客都说的很含糊,不直接。

这是从Echarts 实例精简而来:http://www.echartsjs.com/examples/editor.html?c=dynamic-data2 ———————————————— 版权声明:本文为CSDN博主「Gabrielzzz」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/qq_36778532/article/details/83617628

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/03/12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档