Question

我有两个数据集，希望以两个单独的折线图形式显示在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

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/

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

Answer 1

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

有关如何格式化数据的更多说明，请参见此处的eCharts文档：https://ecomfe.github.io/echarts-doc/public/en/option.html#series.data

摘录：

当维度对应于时间轴（类型为“时间”）时，值可以为：

时间戳，例如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日期实例：注意，使用数据字符串创建Date实例时，应考虑浏览器的差异和不一致之处。

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

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

如何使用eCharts来显示每日库存图表和季度收入数据图表

1 个答案: