ECharts Template

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
<html>
  <head>
    <style>
      #main {
        width: 600px;
        height: 400px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="main"></div>
  </body>
</html>

JavaScript

var container = document.getElementById('main');
var chart = echarts.init(container);
chart.setOption({
  title: {
    text: 'Hello World'
  },
  xAxis: [{
    type: 'category',
    data: ['a', 'b', 'c', 'd']
  }],
  yAxis: [{
    type: 'value'
  }],
  series: [
    {
      type: 'bar',
      name: 'Case 2',
      data: [55, 25, 0, 80],
      stack: '1',
      itemStyle: {
        barBorderRadius:[10, 10, 0, 0],
        
      },
      barGap:'-2px',
      roundCap: true,
      silent:true,
      roundCap: true,

    },
    {
      type: 'bar',
      name: 'Case 3',
      data: [45, 35, 50, 0],
      stack: '1',
      itemStyle: {
        barBorderRadius: [10, 10, 0, 0]
      },
      barGap:'30%',
      roundCap: true,
    }
  ]
});