脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue ECharts饼图

Vue ECharts饼图实现方法详解

 更新时间：2022年12月15日 14:07:55   作者：爱学习de测试小白  
这篇文章主要介绍了在vue.js中，使用echarts组件，创建一个饼图，并且获取饼图的数据和属性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧

前言

本篇来学习饼图的实现

饼图的特点

饼图可以很好地帮助用户快速了解不同分类的数据的占比情况

饼图的基本实现

  • ECharts 最基本的代码结构
  • 准备数据
  • 准备配置项 在 series 下设置 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>饼图的实现</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最基本的代码结构
    //2. 准备数据[{name:xxx, value:xxx },{}]
    //3. 将type的值设置为pie
    var mCharts = echarts.init(document.getElementById("app"))
    // pieData就是需要设置给饼图的数据, 数组,数组中包含一个又一个的对象, 每一个对象中, 需要有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>

效果

饼图的常见效果

显示数值

  • 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>饼图的实现</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最基本的代码结构
    //2. 准备数据[{name:xxx, value:xxx },{}]
    //3. 将type的值设置为pie
    var mCharts = echarts.init(document.getElementById("app"))
    // pieData就是需要设置给饼图的数据, 数组,数组中包含一个又一个的对象, 每一个对象中, 需要有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>

效果

南丁格尔图

南丁格尔图 : 是每一个扇形的半径随着数据的大小而不同, 数值占比越大, 扇形的半径也就越大

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>饼图的实现</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最基本的代码结构
    //2. 准备数据[{name:xxx, value:xxx },{}]
    //3. 将type的值设置为pie
    var mCharts = echarts.init(document.getElementById("app"))
    // pieData就是需要设置给饼图的数据, 数组,数组中包含一个又一个的对象, 每一个对象中, 需要有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：选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可

选 ‘single’ ， ‘multiple’ ，分别表示单选还是多选

selectedOffset：扇区的偏移距离

完整代码

<!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>饼图的实现</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最基本的代码结构
    //2. 准备数据[{name:xxx, value:xxx },{}]
    //3. 将type的值设置为pie
    var mCharts = echarts.init(document.getElementById("app"))
    // pieData就是需要设置给饼图的数据, 数组,数组中包含一个又一个的对象, 每一个对象中, 需要有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>

效果

圆环

radius：直接指定外半径值。 string ：例如， ‘20%’ ，表示外半径为可视区尺寸（容器高宽中

较小一项）的 20% 长度。 Array. ：数组的第一项是内半径，第二项是外半径, 通过 Array , 可以

将饼图设置为圆环图

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>饼图的实现</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最基本的代码结构
    //2. 准备数据[{name:xxx, value:xxx },{}]
    //3. 将type的值设置为pie
    var mCharts = echarts.init(document.getElementById("app"))
    // pieData就是需要设置给饼图的数据, 数组,数组中包含一个又一个的对象, 每一个对象中, 需要有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>

效果

到此这篇关于Vue ECharts饼图实现方法详解的文章就介绍到这了,更多相关Vue ECharts饼图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue github用户搜索案例分享

    Vue github用户搜索案例分享

    这篇文章主要介绍了Vue github用户搜索案例分享，文章基于Vue的相关资料展开对主题的详细介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-04-04
  • vue.js使用watch监听路由变化的方法

    vue.js使用watch监听路由变化的方法

    这篇文章主要介绍了vue.js使用watch监听路由变化的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-07-07
  • 基于vue3.0.1beta搭建仿京东的电商H5项目

    基于vue3.0.1beta搭建仿京东的电商H5项目

    这篇文章主要介绍了基于vue3.0.1beta搭建仿京东的电商H5项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • vue和H5 draggable实现拖拽并替换效果

    vue和H5 draggable实现拖拽并替换效果

    这篇文章主要为大家详细介绍了vue和H5 draggable实现拖拽并替换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-07-07
  • Vue项目打包编译优化方案

    Vue项目打包编译优化方案

    当一个较复杂的vue项目打包后，文件会非常大，而且访问时资源加载速度很慢，本文介绍了几种措施来优化。
    2020-09-09
  • Vue Mixins混入介绍与使用

    Vue Mixins混入介绍与使用

    如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方提供了Mixins特性，这时使用Vue mixins混入有很大好处，下面就介绍下Vue mixins混入使用方法，需要的朋友参考下吧
    2023-02-02
  • Vue3 源码解读之副作用函数与依赖收集

    Vue3 源码解读之副作用函数与依赖收集

    本文深入分析了副作用的实现以及执行时机，并详细分析了用于存储副作用函数的targetMap的数据结构及其实现原理，还深入分析了依赖收集track函数以及派发更新 trigger 函数的实现,需要的朋友可以参考下
    2022-08-08
  • 10个Vue3中常用的组合式 API用法详解

    10个Vue3中常用的组合式 API用法详解

    通过Vue 3,组合式API增强了我们利用Vue的能力,使我们的代码更具模块性和可读性,本文主要来和大家分享10个常用的Vue3组合式API,希望对大家有所帮助
    2024-01-01
  • Vue前端导出Excel文件的详细实现方案

    Vue前端导出Excel文件的详细实现方案

    在开发后台管理系统的时候,很多地方都要用到导出excel表格,比如将table中的数据导出到本地,下面这篇文章主要给大家介绍了关于Vue导出Excel文件的相关资料,需要的朋友可以参考下
    2021-09-09
  • Vant中List组件immediate-check=false无效的解决

    Vant中List组件immediate-check=false无效的解决

    这篇文章主要介绍了Vant中List组件immediate-check=false无效的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-01-01

最新评论