Options & Series

Code

const chart = echarts.init(document.getElementById('chart'));
chart.setOption({
  color: ['#5470c6', '#91cc75', '#ee6666'],
  title: { text: 'Multi-Series Demo', left: 'center' },
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
  legend: { top: '8%' },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  dataset: {
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' }
  ]
});

Explanation

dataset.source lets you share tabular data across multiple series instead of repeating arrays; seriesLayoutBy:'row' treats each row (after the header) as a series. The grid option controls chart padding with containLabel:true reserving space for axis labels. The color array sets the per-series palette.

More ECharts Snippets