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

我想在eCharts画布上显示两个数据集，作为两个单独的折线图：

季度收入表，以及

每日股价图 使用下面的代码，两个折线图都会显示出来，但由于数据集的数组长度不同，收入折线图会被压缩到画布的左侧，而股票价格图则会正确地全宽显示。此外，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

    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);

第二个很短的数据集包含季度收入，如下所示：

    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

    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);

eCharts代码如下所示：

    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

    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);

下面是一个简化的JSFIDLE示例：

---

如何在两个x轴对齐的情况下，使两个折线图正确显示在同一画布上，即全宽？

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

有关如何格式化数据的进一步说明，请参见以下eCharts文档：

摘录：

当标注对应于时间轴（类型为“时间”）时，该值可以是：

• 时间戳，如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/12 2:05:08.123'.
• 用户创建的JavaScript日期实例：注意， 使用数据字符串创建日期实例时，应考虑浏览器差异和不一致

例如：在chrome中，新日期（“2012-01-01”）在UTC中被视为2012年1月1日，而新日期（“2012-1-1”）和新日期（“2012/01/01”）在本地时区中被视为2012年1月1日。在safari中，不支持新日期（'2012-1-1'）

---

因此，如果您打算执行新的日期（dateString），强烈建议使用时间解析库（例如，矩），或使用echarts.number.parseDate。

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

有关如何格式化数据的进一步说明，请参见以下eCharts文档：

摘录：

当标注对应于时间轴（类型为“时间”）时，该值可以是：

• 时间戳，如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/12 2:05:08.123'.
• 用户创建的JavaScript日期实例：注意， 使用数据字符串创建日期实例时，应考虑浏览器差异和不一致

例如：在chrome中，新日期（“2012-01-01”）在UTC中被视为2012年1月1日，而新日期（“2012-1-1”）和新日期（“2012/01/01”）在本地时区中被视为2012年1月1日。在safari中，不支持新日期（'2012-1-1'）

因此，如果您打算执行新的日期（dateString），强烈建议使用时间解析库（例如，矩），或使用echart.number.parseDate