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

Question

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

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

使用下面的代码，显示了两个折线图，但是由于数据集的数组长度不同，收入折线图被挤到了 canvas 的左侧，而股价图以全宽正确显示。此外，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

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

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

摘录：

当一个维度对应一个时间轴（类型为'time'）时，取值可以为：

一个时间戳，比如1484141700832，代表一个UTC时间。
日期字符串，采用以下格式之一：仅 ISO 8601 的子集包括（所有这些都被视为当地时间，除非时区是 specified, 与moment一致): only part of year/month/date/time 指定：'2012-03'、'2012-03-01'、 '2012-03-01 05', '2012-03-01 05:06'。由 "T" 或 space 分隔： '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'。
a JavaScript 用户创建的日期实例：注意，使用数据字符串创建 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 中不支持新日期（'2012-1-1'）。

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

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

How to use eCharts to display a daily stock chart combined with a quarterly revenue data chart

javascript

echarts