echarts 中的圆角条

Posted 2023-03-25

【中文标题】echarts 中的圆角条

【英文标题】：Rounded bars in echarts

【发布时间】：2020-01-06 07:01:23

【问题描述】：

有没有办法让 ECharts 图表中的条形变圆，例如示例 here？

【参考方案1】：

使用roundCap:true

Example

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
        
    ],

【讨论】：

谢谢，不知道我是怎么错过了文档中的那个。

【参考方案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

【参考方案3】：

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

How to make corners of progress bar round in css

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

【讨论】：

echarts 使用画布渲染。