Bar Chart

Below is the basic bar chart example.

Source Code

var chartdata = [ { name: 'Oranges', type: 'bar', data: [20, 20, 36, 12, 15] }, { name: 'Apples', type: 'bar', data: [8, 5, 25, 10, 10] } ]; var chart = document.getElementById('chartBar1'); var barChart = echarts.init(chart); var option = { grid: { top: '6', right: '0', bottom: '17', left: '25', }, xAxis: { data: [ '2006', '2008', '2010', '2012', '2014'], axisLine: { lineStyle: { color: '#ccc' } }, axisLabel: { fontSize: 10, color: '#666' } }, yAxis: { splitLine: { lineStyle: { color: '#ddd' } }, axisLine: { lineStyle: { color: '#ccc' } }, axisLabel: { fontSize: 10, color: '#666' } }, series: chartdata }; barChart.setOption(option);

Horizontal Bar Chart

Below is the basic horizontal bar chart example.

Source Code

{ xAxis: { type: 'value', }, yAxis: { type: 'category', data: [ '2006', '2008', '2010', '2012', '2014'], } }

Stacked Bar Chart

Below are stacked bar chart example for both horizontal and vertical bar.

Source Code

data = [ { name: 'Oranges', type: 'bar', stack: 'Stack', // set your own name data: [20, 20, 36, 12, 15] }, { name: 'Apples', type: 'bar', stack: 'Stack', data: [8, 5, 25, 10, 10] } ];

Line Chart

Below are line chart examples.

Source Code

type: 'line'

Area Chart

Below are area chart examples.

Source Code

{ name: 'Oranges', type: 'line', data: [20, 20, 36, 12, 15,25], lineStyle: { normal: { width: 1 } }, itemStyle: { normal: { areaStyle: { type: 'default' } } } }

Pie Chart

Below are an example of donut charts.

Source Code

var pieData = [{ name: 'Fruits', type: 'pie', radius: '80%', center: ['50%', '57.5%'], data: [ {value: 335, name: 'Apple'}, {value: 310, name: 'Orange'}, {value: 234, name: 'Grapes'}, {value: 135, name: 'Lemon'}, {value: 154, name: 'Banana'} ] }];