How to display multiple lines in eCharts using encode?

Question

In eCharts, how do I modify the following option to show multiple lines in the chart? What I want is one line for product "Matcha Latte" and one line for "Cheese Cocao"? I would like to keep the dataset unchanged if possible.

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

you can you transform the dataset by using a filter:

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' } }
  ]
};