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