echarts 饼状图

1,182 阅读1分钟

废话不多说,直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="main" style="width:400px;height:400px"></div>
  </div>
  <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>
  <script>
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
      color: ['#CD5C5C', '#00CED1', '#9ACD32'],
      series: [
        {
          type: 'pie',
          radius: '70%', // 设置环形饼状图, 第一个百分数设置内圈大小,第二个百分数设置外圈大小
          center: ['50%', '50%'], // 设置饼状图位置,第一个百分数调水平位置,第二个百分数调垂直位置
          data: [
            { value: 30, name: 'Dry' },
            { value: 60, name: 'Wet' },
            { value: 10, name: 'C&T' },
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(128, 128, 128, 0.5)'
            }
          }
        }
      ]
    };
    myChart.setOption(option);
  </script>
</body>

</html>

当radius为70%时:

效果图:

当radius为['50%','60%']时,饼状图就变成了饼状环形图

效果图: