饼图的实现步骤

Echarts最基本的代码结构:

引入js文件，DOM容器，初始化对象，设置option

数据准备

绘制饼图的数据是一个个的对象
{name:“淘宝”，value:11231}，{name:”京东”,value:22673}，{ 。。。}

图表类型

series中设置的type为pie

  1.    <script src="lib/echarts.min.js"></script>
  2. </head>
  3. <body>
  4.     <div style="width:600px;height:400px"></div>
  5.     <script>
  6.         var mCharts = echarts.init(document.querySelector("div"))
  7.         // 需要设置给饼图的数据，是一个数组，每个数组元素是一个对象
  8.         var pieData=[
  9.             {
  10.                 name:"淘宝",
  11.                 value:11231
  12.             },
  13.             {
  14.                 name:"京东",
  15.                 value:22673
  16.             },
  17.             {
  18.                 name:"唯品会",
  19.                 value:6123
  20.             },
  21.             {
  22.                 name:"一号店",
  23.                 value:8989
  24.             },
  25.             {
  26.                 name:'聚美优品',
  27.                 value:6700
  28.             }
  29.         ]
  30.         var option = {
  31.             // 没有坐标系了
  32.             series:[
  33.                 {
  34.                     type:"pie",
  35.                     data:pieData
  36.                 }
  37.             ]
  38.         }
  39.         mCharts.setOption(option)
  40.     </script>
  42. </body>

饼图常见的效果

不同公司显示自己对应的属性

使用formatter来控制饼图上显示什么
给formatter一个回调函数，然后返回对应参数的内容

  1.  var option = {
  2.    // 没有坐标系了
  3.    series:[
  4.      {
  5.        type:"pie",
  6.        data:pieData,
  7.        // 饼图文字的显示
  8.        label:{
  9.          // 默认文字就是显示出来的
  10.          show:true,
  11.          // 觉得文字显示的内容
  12.          // formatter:'hehe'
  13.          // 不同的内容在饼图上显示出不同的数据,借助formatter中的回调函数
  14.          formatter:function(arg){
  15.            console.log(arg);
  16.            return arg.name + '平台'+arg.value+'元\n'+arg.percent+'%'
  17.          }
  18.        }
  19.      }
  20.    ]
  21.  }

image.png

圆环

设置radius的值

  1.   // 将饼图的半径设置为20像素
  2.                     // radius:20
  3.                     // 这个百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置 
  4.                     // radius:'20%'
  5.                     // 圆环
  6.                     // 将radius设置为数组，第0个元素代表内圆的半径，第1个元素为外圆的半径
  7.                     radius:['50%','75%']

image.png

南丁格尔图

饼图的每一部分的半径都是不一样的
image.png
image.png
image.png