echarts - echarts 中的圆角条

Question

有没有办法使 ECharts 图表中的条形变圆，例如此处的示例？

Answer 1

利用roundCap:true

例子

series: [{
        type: 'bar',
        data: [4, 3, 2, 1, 0],
        coordinateSystem: 'polar',
        name: 'Without Round Cap',
        color: 'rgba(200, 0, 0, 0.5)',
        itemStyle: {
            borderColor: 'red',
            borderWidth: 1
        }
    }, {
        type: 'bar',
        data: [4, 3, 2, 1, 0],
        coordinateSystem: 'polar',
        name: 'With Round Cap',
        roundCap: true,
        color: 'rgba(0, 200, 0, 0.5)',
        itemStyle: {
            borderColor: 'green',
            borderWidth: 1
        }
    }],

Answer 2

添加它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);

这是一个工作示例：https ://stackblitz.com/edit/js-7rkahr?file=index.js

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

Answer 3

您需要在该代码中添加 css。

如何在css中使进度条的角落变圆

我在这里找到了解决方案，它会为你工作。