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