饼图的数据是由 name 和 value 组成的字典所形成的数组 饼图无须配置 xAxis 和 yAxis 饼图可以很好地帮助用户快速了解不同分类的数据的占比情况

基本使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <script src="../js/echarts.js"></script>
  10. </head>
  12. <body>
  13.     <div style="width: 600px;height:400px"></div>
  14.     <script> var mCharts = echarts.init(document.querySelector("div"))
  15.         // 准备数据
  16.         var pieData = [{ value: 11231, name: "淘宝", }, { value: 22673, name: "京东" }, { value: 6123, name: "唯品会" }, { value: 8989, name: "1号店" }, { value: 6700, name: "聚美优品" }]
  17.         // 准备配置项 在 series 下设置 type:pie
  18.         var option = { series: [ { type: 'pie', data: pieData } ] }
  19.         mCharts.setOption(option)
  20.     </script>
  21. </body>
  23. </html>

image.png

饼图的常见效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <script src="../js/echarts.js"></script>
  10. </head>
  12. <body>
  13.     <div style="width: 600px;height:400px"></div>
  14.     <script> var mCharts = echarts.init(document.querySelector("div"))
  15.         // 准备数据
  16.         var pieData = [{ value: 11231, name: "淘宝", }, { value: 22673, name: "京东" }, { value: 6123, name: "唯品会" }, { value: 8989, name: "1号店" }, { value: 6700, name: "聚美优品" }]
  17.         // 准备配置项 在 series 下设置 type:pie
  18.         var option = {
  19.             series: [{
  20.                 type: 'pie', data: pieData,
  21.                 label: {
  22.                     // label.show : 显示文字
  23.                     // label.formatter : 格式化文字
  24.                     show: true,
  25.                     formatter: function (arg) { return arg.data.name + '平台' + arg.data.value + '元\n' + arg.percent + '%' }
  26.                 }
  27.             }]
  28.         }
  29.         mCharts.setOption(option)
  30.     </script>
  31. </body>
  33. </html>

image.png

南丁格尔图

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

  1.   var option = {
  2.             series: [{
  3.                 type: 'pie', data: pieData,
  4.                 label: {
  5.                     // label.show : 显示文字
  6.                     // label.formatter : 格式化文字
  7.                     show: true,
  8.                     formatter:  (arg)=> { return arg.data.name + '平台' +                                               arg.data.value + '元\n' + arg.percent + '%'
  9.                                               }
  11.                 }
  12.                 , roseType: 'radius'
  13.             }]
  14.         }

image.png

选中效果

selectedMode: ‘multiple’ 选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可 选 ‘single’ ， ‘multiple’ ，分别表示单选还是多选 selectedOffset: 30 选中扇区的偏移距离

image.png

圆环效果

饼图的半径。可以为如下类型：number ：直接指定外半径值。 string ：例如， ‘20%’ ，表示外半径为可视区尺寸（容器高宽中 较小一项）的 20% 长度。 Array. ：数组的第一项是内半径，第二项是外半径, 通过 Array , 可以 将饼图设置为圆环图

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <script src="../js/echarts.js"></script>
  10. </head>
  12. <body>
  13.     <div style="width: 600px;height:400px"></div>
  14.     <script> var mCharts = echarts.init(document.querySelector("div"))
  15.         // 准备数据
  16.         var pieData = [{ value: 11231, name: "淘宝", }, { value: 22673, name: "京东" }, { value: 6123, name: "唯品会" }, { value: 8989, name: "1号店" }, { value: 6700, name: "聚美优品" }]
  17.         // 准备配置项 在 series 下设置 type:pie
  18.         var option = { series: [ { type: 'pie', data: pieData,
  19.                                   //设置圆环
  20.                                   radius: ['50%', '70%'],
  21.                                   selectedMode: 'multiple',  
  22.                                   //选中后的偏移量
  23.                                   selectedOffset: 30 } ] }
  24.         mCharts.setOption(option)
  25.     </script>
  26. </body>
  28. </html>

image.png