Vue ECharts餅圖實(shí)現(xiàn)方法詳解

更新時(shí)間：2022年12月15日 14:07:55 作者：愛(ài)學(xué)習(xí)de測(cè)試小白

這篇文章主要介紹了在vue.js中，使用echarts組件，創(chuàng)建一個(gè)餅圖，并且獲取餅圖的數(shù)據(jù)和屬性，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧

前言

本篇來(lái)學(xué)習(xí)餅圖的實(shí)現(xiàn)

餅圖的特點(diǎn)

餅圖可以很好地幫助用戶(hù)快速了解不同分類(lèi)的數(shù)據(jù)的占比情況

餅圖的基本實(shí)現(xiàn)

ECharts 最基本的代碼結(jié)構(gòu)
準(zhǔn)備數(shù)據(jù)
準(zhǔn)備配置項(xiàng) 在 series 下設(shè)置 type:pie

完整代碼

<!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>餅圖的實(shí)現(xiàn)</title>
  <!-- cdn方式 引入echarts.js文件 -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
  <div id='app' style="width: 600px;height:400px"></div>
  <script>
    //1. ECharts最基本的代碼結(jié)構(gòu)
    //2. 準(zhǔn)備數(shù)據(jù)[{name:xxx, value:xxx },{}]
    //3. 將type的值設(shè)置為pie
    var mCharts = echarts.init(document.getElementById("app"))
    // pieData就是需要設(shè)置給餅圖的數(shù)據(jù), 數(shù)組,數(shù)組中包含一個(gè)又一個(gè)的對(duì)象, 每一個(gè)對(duì)象中, 需要有name和value
    var pieData = [
      {
        name: 'pass',
        value: 80
      },
      {
        name: 'fail',
        value: 15
      },
      {
        name: 'skip',
        value: 5
      },
      {
        name: 'error',
        value: 5
      }
    ]
    var option = {
      series: [
        {
          type: 'pie',
          data: pieData
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>
</html>

效果

餅圖的常見(jiàn)效果

顯示數(shù)值

label.show : 顯示文字
label.formatter : 格式化文字

var option = {
        series: [
            {
                type: 'pie',
                data: pieData,
                label: {
                    show: true,
                    formatter: function (arg) {
                        console.log(arg)
                        return arg.data.name + '\n' + arg.percent + '%'
                    }
                }
            }
        ]
    }

完整代碼

<!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>餅圖的實(shí)現(xiàn)</title>
    <!-- cdn方式 引入echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height:400px"></div>
<script>
    //1. ECharts最基本的代碼結(jié)構(gòu)
    //2. 準(zhǔn)備數(shù)據(jù)[{name:xxx, value:xxx },{}]
    //3. 將type的值設(shè)置為pie
    var mCharts = echarts.init(document.getElementById("app"))
    // pieData就是需要設(shè)置給餅圖的數(shù)據(jù), 數(shù)組,數(shù)組中包含一個(gè)又一個(gè)的對(duì)象, 每一個(gè)對(duì)象中, 需要有name和value
    var pieData = [
        {
            name: 'pass',
            value: 80
        },
        {
            name: 'fail',
            value: 10
        },
        {
            name: 'skip',
            value: 5
        },
        {
            name: 'error',
            value: 5
        }
    ]
    var option = {
        series: [
            {
                type: 'pie',
                data: pieData,
                label: {
                    show: true,
                    formatter: function (arg) {
                        console.log(arg)
                        return arg.data.name + '\n' + arg.percent + '%'
                    }
                }
            }
        ]
    }
    mCharts.setOption(option)
</script>
</body>
</html>

效果

南丁格爾圖

南丁格爾圖 : 是每一個(gè)扇形的半徑隨著數(shù)據(jù)的大小而不同, 數(shù)值占比越大, 扇形的半徑也就越大

roseType: ‘radius’

完整代碼

<!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>餅圖的實(shí)現(xiàn)</title>
    <!-- cdn方式 引入echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height:400px"></div>
<script>
    //1. ECharts最基本的代碼結(jié)構(gòu)
    //2. 準(zhǔn)備數(shù)據(jù)[{name:xxx, value:xxx },{}]
    //3. 將type的值設(shè)置為pie
    var mCharts = echarts.init(document.getElementById("app"))
    // pieData就是需要設(shè)置給餅圖的數(shù)據(jù), 數(shù)組,數(shù)組中包含一個(gè)又一個(gè)的對(duì)象, 每一個(gè)對(duì)象中, 需要有name和value
    var pieData = [
        {
            name: 'pass',
            value: 80
        },
        {
            name: 'fail',
            value: 100
        },
        {
            name: 'skip',
            value: 50
        },
        {
            name: 'error',
            value: 50
        }
    ]
    var option = {
        series: [
            {
                type: 'pie',
                data: pieData,
                label: {
                    show: true,
                    formatter: function (arg) {
                        console.log(arg)
                        return arg.data.name + '\n' + arg.percent + '%'
                    }
                },
                roseType: 'radius'
            }
        ]
    }
    mCharts.setOption(option)
</script>
</body>
</html>

效果

選中效果

selectedMode：選中模式，表示是否支持多個(gè)選中，默認(rèn)關(guān)閉，支持布爾值和字符串，字符串取值可

選 ‘single’ ， ‘multiple’ ，分別表示單選還是多選

selectedOffset：扇區(qū)的偏移距離

完整代碼

<!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>餅圖的實(shí)現(xiàn)</title>
    <!-- cdn方式 引入echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height:400px"></div>
<script>
    //1. ECharts最基本的代碼結(jié)構(gòu)
    //2. 準(zhǔn)備數(shù)據(jù)[{name:xxx, value:xxx },{}]
    //3. 將type的值設(shè)置為pie
    var mCharts = echarts.init(document.getElementById("app"))
    // pieData就是需要設(shè)置給餅圖的數(shù)據(jù), 數(shù)組,數(shù)組中包含一個(gè)又一個(gè)的對(duì)象, 每一個(gè)對(duì)象中, 需要有name和value
    var pieData = [
        {
            name: 'pass',
            value: 80
        },
        {
            name: 'fail',
            value: 10
        },
        {
            name: 'skip',
            value: 5
        },
        {
            name: 'error',
            value: 5
        }
    ]
    var option = {
        series: [
            {
                type: 'pie',
                data: pieData,
                label: {
                    show: true,
                    formatter: function (arg) {
                        console.log(arg)
                        return arg.data.name + '\n' + arg.percent + '%'
                    }
                },
                selectedMode: 'multiple',  // multiple 多選  single 單選
                selectedOffset: 30 // 偏移距離
                // roseType: 'radius'
            }
        ]
    }
    mCharts.setOption(option)
</script>
</body>
</html>

效果

圓環(huán)

radius：直接指定外半徑值。 string ：例如， ‘20%’ ，表示外半徑為可視區(qū)尺寸（容器高寬中

較小一項(xiàng)）的 20% 長(zhǎng)度。 Array. ：數(shù)組的第一項(xiàng)是內(nèi)半徑，第二項(xiàng)是外半徑, 通過(guò) Array , 可以

將餅圖設(shè)置為圓環(huán)圖

var option = {
  series: [
   {
      type: 'pie',
      data: pieData,
      radius: ['50%', '80%']
   }
 ]
}

完整代碼

<!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>餅圖的實(shí)現(xiàn)</title>
    <!-- cdn方式 引入echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height:400px"></div>
<script>
    //1. ECharts最基本的代碼結(jié)構(gòu)
    //2. 準(zhǔn)備數(shù)據(jù)[{name:xxx, value:xxx },{}]
    //3. 將type的值設(shè)置為pie
    var mCharts = echarts.init(document.getElementById("app"))
    // pieData就是需要設(shè)置給餅圖的數(shù)據(jù), 數(shù)組,數(shù)組中包含一個(gè)又一個(gè)的對(duì)象, 每一個(gè)對(duì)象中, 需要有name和value
    var pieData = [
        {
            name: 'pass',
            value: 80
        },
        {
            name: 'fail',
            value: 10
        },
        {
            name: 'skip',
            value: 5
        },
        {
            name: 'error',
            value: 5
        }
    ]
    var option = {
        series: [
            {
                type: 'pie',
                data: pieData,
                label: {
                    show: true,
                    formatter: function (arg) {
                        console.log(arg)
                        return arg.data.name + '\n' + arg.percent + '%'
                    }
                },
                selectedMode: 'multiple',  // multiple 多選  single 單選
                selectedOffset: 30,// 偏移距離
                radius: ['50%', '80%']
                // roseType: 'radius'
            }
        ]
    }
    mCharts.setOption(option)
</script>
</body>
</html>

效果