javascript - 如何使用 eCharts 显示每日股票图表和季度收入数据图表

Question

我有两个数据集，我想将它们显示在 eCharts Canvas 上，作为两个单独的折线图:

1. 季度收入图表，以及
2. 每日股价图表。

使用下面的代码，两个折线图都会显示，但由于数据集具有不同的数组长度，收入折线图被挤到 Canvas 的左侧，而股价图表则以全 Angular 正确显示。此外，x 轴彼此不对齐，因为日期范围不完全重叠(季度数据早于价格数据开始，请参见下面的示例)。

第一个长数据集包含每日股票价格，如下所示:

    var dailyStockprices = [123,124,125, ... etc] // array length 600
    var dailyDates = ["2019-01-02","2019-01-03","2019-01-04", ... etc] // array length 600

第二个非常短的数据集，包含季度收入，如下所示:

    var quarterlyRevenues = [123,124,125, ... etc]  // array length 20
    var quarterlyDates = ["2018-09-30","2018-12-31","2019-03-31", ... etc] // array length 20

eCharts 代码如下所示:

    var myChart = echarts.init(document.getElementById('mainchart1'));

    option = {
      xAxis: [{
        type: 'category',
        data: dailyDates
      }, {
        type: 'category',
        data: quarterlyDates
      }],
      yAxis: [{
        type: 'value'
      }, {
        type: 'value'
      }],
      series: [{
        data: dailyStockprices,
        type: 'line',
        yAxisIndex: 0
      }, {
        data: quarterlyRevenues,
        type: 'line',
        yAxisIndex: 1
      }]
    };
    myChart.setOption(option);

这是一个简化的 JSFiddle 示例:https://jsfiddle.net/frankmarks/szm1f20j/9/

如何使两个折线图在同一 Canvas 上正确显示(即全宽)，并且两个 x 轴对齐？

Answer 1

经过一番研究，我找到了解决方案，即将轴类型设置为“时间”而不是“类别”，它会自动对齐轴对齐方式并完全回答了我的问题。

有关如何格式化数据的进一步说明在 eCharts 文档中给出:https://ecomfe.github.io/echarts-doc/public/en/option.html#series.data

摘录:

当维度对应时间轴(类型为'time')时，取值可以是:

• 时间戳，例如 1484141700832，代表 UTC 时间。
• 日期字符串，采用以下格式之一:仅 ISO 8601 的子集包括(所有这些都被视为本地时间，除非时区是指定，与时刻一致):仅部分指定年/月/日期/时间: '2012-03', '2012-03-01','2012-03-01 05', '2012-03-01 05:06'.用“T”或空格分隔:'2012-03-01T12:22:33.123', '2012-03-01 12:22:33.123'。
• 指定时区:'2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000','2012-03-01T12:22:33-05:00'。
• 其他日期字符串格式(所有这些被视为本地时间): '2012', '2012-3-1', '2012/3/1','2012/03/01', '2009/6/12 2:00', '2009/6/12 2:05:08', '2009/6/122:05:08.123'。
• 用户创建的 JavaScript Date 实例:警告，使用数据字符串创建 Date 实例时，应考虑浏览器差异和不一致。

例如:在 Chrome 中，new Date('2012-01-01') 被视为 UTC 的 2012 年 1 月 1 日，而 new Date('2012-1-1') 和 new Date('2012/01)/01') 被视为本地时区的 2012 年 1 月 1 日。在 safari 中，不支持 new Date('2012-1-1')。

所以如果你打算执行new Date(dateString)，强烈建议使用时间解析库(例如moment)，或者使用echarts.number.parseDate。