Rounded bars in echarts

Question

Is there are way to make the bars rounded in an ECharts chart such as the example here?

Answer 1

Add it with borderRadius

borderRadius: 5, // consistently set the size of 4 rounded corners
borderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)

// Initialize the echarts instance based on the prepared dom
var myChart = echarts.init(document.getElementById('main'));

// Specify the configuration items and data for the chart
var option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E'],
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [
        10,
        22,
        28,
        {
          value: 43,
          itemStyle: {
            color: '#91cc75',
            shadowColor: '#91cc75',
            borderType: 'dashed',
            opacity: 0.5,
          },
        },
        49,
      ],
      itemStyle: {
        borderRadius : [50, 50, 0, 0], // Specify the border radius
        borderType: 'solid',
        borderColor: '#73c0de',
        shadowColor: '#5470c6',
        shadowBlur: 3,
      },
    },
  ],
};

// Display the chart using the configuration items and data just specified.
myChart.setOption(option);

Here is a working example: https://stackblitz.com/edit/js-7rkahr?file=index.js

Docs: https://echarts.apache.org/en/option.html#series-bar.itemStyle.borderRadius