基于Echarts如何實現(xiàn)餅圖效果

發(fā)布時間：2022-05-23 09:17:04 來源：億速云閱讀：175 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要講解了“基于Echarts如何實現(xiàn)餅圖效果”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“基于Echarts如何實現(xiàn)餅圖效果”吧！

1 顯示數(shù)值效果 series 下的label 餅圖的文字顯示
2 半徑圓環(huán) radius
3 南丁格爾圖 roseType: 'radius' 數(shù)值越大半徑越大
4 選中效果 selectedMode

注意點:

1 不需要設(shè)置 x軸和y軸

2 餅圖的所需要的數(shù)據(jù) 是個數(shù)組數(shù)組里面放對象對象則必須包含name和value，

<!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>
  <script src="lib/echarts.min.js"></script>
</head>
 
<body>
  <div ></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var pieData = [
      {
        name: '伙食費',
        value: 11231
      },
      {
        name: '房貸',
        value: 22673
      },
      {
        name: '交通費',
        value: 6123
      },
      {
        name: '車輛保養(yǎng)費',
        value: 8989
      },
      {
        name: '網(wǎng)購',
        value: 6700
      }
    ]
    var option = {
      legend:{
        show: true,
        icon:'circle',
      },
      color: [
      '#5470c6',
      '#91cc75',
      '#fac858',
      '#ee6666',
      '#73c0de',
      '#3ba272',
      '#fc8452',
      '#9a60b4',
      '#ea7ccc',
    ],
      series: [
        {
          type: 'pie',
          data: pieData,
          label: { 
            show: true, 
            // formatter: 'test' 
            formatter: function(arg){
              console.log(arg)
              return arg.name + '平臺' + arg.value + '元\n' + arg.percent + '%'
            }
          },
          
          // radius: 20, // 餅圖的半徑
          // radius: '20%', 
          // radius: ['50%', '75%'], // 第0個元素代表的是內(nèi)圓的半徑 第1個元素外圓的半徑
          radius: [60, 140],
          // roseType: 'radius', 
          // selectedMode: 'single', // 選中的效果,能夠?qū)⑦x中的區(qū)域偏離圓點一小段距離(單個)
          selectedMode: 'multiple', // 多個可以選中
          // selectedOffset: 0
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>
 
</html>

感謝各位的閱讀，以上就是“基于Echarts如何實現(xiàn)餅圖效果”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對基于Echarts如何實現(xiàn)餅圖效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

向AI問一下細節(jié)

基于Echarts如何實現(xiàn)餅圖效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽