如何使用encode在eCharts中显示多行？

Question

在eCharts中，如何修改以下

option

以在图表中显示多条线？我想要的是一条生产“抹茶拿铁”的生产线和一条生产“奶酪可可”的生产线？如果可能的话，我想保持数据集不变。

option = {
    legend: {},
    tooltip: {},
    dataset: {
        dimensions: [{name:'product', type:'ordinal'}, {name:'date'}, 
        {name:'value'}],
        source: [
            {product: 'Matcha Latte', 'date': 2016, 'value': 85.8},
            {product: 'Matcha Latte', 'date': 2017, 'value': 73.4},
            {product: 'Cheese Cocoa', 'date': 2016, 'value': 65.2},
            {product: 'Cheese Cocoa', 'date': 2017, 'value': 53.9}
        ]
    },
    xAxis: {type: 'category', name: 'date'},
    yAxis: {type: 'value', name: 'value'},
 
    series: [
        {type: 'line', encode: {x: 'date', y:'value'}},
    ]
};

Answer 1

您可以使用过滤器转换数据集：

option = {
  legend: {},
  tooltip: {},
  dataset: [
    {
      dimensions: [
        { name: 'product', type: 'ordinal' },
        { name: 'date' },
        { name: 'value' }
      ],
      source: [
        { product: 'Matcha Latte', date: 2016, value: 85.8 },
        { product: 'Matcha Latte', date: 2017, value: 73.4 },
        { product: 'Cheese Cocoa', date: 2016, value: 65.2 },
        { product: 'Cheese Cocoa', date: 2017, value: 53.9 }
      ]
    },
    {
      fromDatasetIndex: 0,

      transform: [
        {
          type: 'filter',
          config: {
            dimension: 'product',
            value: 'Matcha Latte'
          }
        }
      ]
    },
    {
      fromDatasetIndex: 0,

      transform: [
        {
          type: 'filter',
          config: {
            dimension: 'product',
            value: 'Cheese Cocoa'
          }
        }
      ]
    }
  ],
  xAxis: { type: 'category', name: 'date' },
  yAxis: { type: 'value', name: 'value' },

  series: [
    { datasetIndex: 1, type: 'line', encode: { x: 'date', y: 'value' } },
    { datasetIndex: 2, type: 'line', encode: { x: 'date', y: 'value' } }
  ]
};

Answer 2

通过更改来源（是的，抱歉），你可以这样做：

option = {
    legend: {},
    tooltip: {},
    dataset: {
        dimensions: [{name:'product', type:'ordinal'}, {name:'date'}, 
        {name:'value'}],
        source: [ // Sorry for your dataset :'(
            { 'date': 2016, 'Matcha Latte': 85.8, 'Cheese Cocoa': 65.2 },
            { 'date': 2017, 'Matcha Latte': 73.4, 'Cheese Cocoa': 53.9 },
        ]
    },
    xAxis: {type: 'category', name: 'date'},
    yAxis: {type: 'value', name: 'value'},
 
    series: [
        {type: 'line', encode: {x: 'date', y: 'Matcha Latte' }},  // First chart with Matcha Latte values as y and date as x
        {type: 'line', encode: {x: 'date', y: 'Cheese Cocoa' }},  // Second chart with date and Cheese Cocoa values
    ]
};
``