Skip to content
ECharts

Options & Series

Dataset-driven multi-series chart with grid and legend config.

#echarts#options#dataset

Code

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