echarts modify the ring width and size of the ring chart

The size of the ring of the donut chart needs series-pie. radiusto be modified by attributes

radius

The radius of the pie chart.

Array.<number|string>: The first item of the array is the inner radius, and the second item is the outer radius. Each item complies with the description of the number string above.

• Set the first item of the array, that is, the inner radius to 0, and the chart is a pie chart, as follows:
  
• If the inner radius is set to a value greater than 0, the chart will be displayed as a donut chart. as follows:
  
• Of course, if you modify the size of the outer radius, such as less than 100%, the chart will appear much smaller, that is, much narrower, as follows.
  
  Therefore, if you want to modify the ring width of the histogram, you can modify the size of the inner radius and the outer radius. achieve.

Code:

option = {
    
    
  legend: {
    
    
    orient: "vertical",
    left: "left",
    data: ["Apple", "Grapes", "Pineapples", "Oranges", "Bananas"]
  },
  series: [{
    
    
    type: "pie",
    data: [{
    
    
      value: 335,
      name: "Apple"
    }, {
    
    
      value: 310,
      name: "Grapes"
    }, {
    
    
      value: 234,
      name: "Pineapples"
    }, {
    
    
      value: 135,
      name: "Oranges"
    }, {
    
    
      value: 1548,
      name: "Bananas"
    }],
    radius: ["35%", "45%"] // 这个属性修改圆环宽度
  }]
}

If you want to facilitate the layout, you can set the outer margin to 100%, and modify the ring width by adjusting the inner margin.

Note: It radiusis the radius of the pie chart. Assuming that the height of the div is 100px , if we set the radius to 100%, then the diameter of the entire pie chart, which is the length and height, is 200px . This must be paid attention to when laying out.

Based on this, we can set the outer radius of the radius to 50%, so that the height of the entire pie chart is the height of the div.