Apache Echarts常用图表之饼状图

文章目录

  • Echarts常用图表
    • 饼图
      • 1. 饼图的实现步骤
      • 2. 饼图的常见效果

Echarts常用图表

在这里插入图片描述
每个图表均配有对应的源代码以及知识点~~~~
详情可点开对应的图表学习!
各类常用图表总结在此!配合使用更方便~
https://blog.csdn.net/diviner_s/article/details/116072584
官方对应文件工具,有更详细的工具使用方法:
https://echarts.apache.org/zh/option.html

饼图

饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。

1. 饼图的实现步骤

1.先上Echarts经典基本代码框架~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="echarts.min.js"></script> 
</head>
<body>
    <div style="width: 600px;height: 400px"></div>
    <script>
        var mCharts = echarts.init(document.querySelector("div"))
        var option = {
     }
        mCharts.setOption(option)
    </script>
</body>
</html>

此时option对象是空的。

2.准备数据:

var pieData = [
	{
     
		value:11231,
		name:"淘宝",
	},
	{
     
		value:22673,
		name:"京东",
	},
	{
     
		value:6123,
		name:"唯品会",
	},
	{
     
		value:8981,
		name:"1号店",
	},
	{
     
		value:6700,
		name:"聚美优品",
	},
]
  1. 准备配置项在series下设置type:pie
var option = {
     
	series:[
		{
     
			type: 'pie',  //类型为饼图 
			data: pieData 
		}
	]
}

最终效果图如下:
Apache Echarts常用图表之饼状图_第1张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px"></div>
<script>
    var mCharts = echarts.init(document.querySelector("div"))
    var pieData = [
        {
     
            value:11231,
            name: '淘宝'
        },
        {
     
            name: '京东',
            value: 22673
        },
        {
     
            name: '唯品会',
            value: 6123
        },
        {
     
            name: '1号店',
            value: 8989
        },
        {
     
            name: '聚美优品',
            value: 6700
        }
    ]
    var option = {
     
        series:[
            {
     
                type:'pie',
                data:pieData
            }
        ]
    }

    mCharts.setOption(option)
</script>
</body>
</html>

注意:

  • 饼图的数据是由namevalue组成的字典所形成的数组
  • 饼图无需配置xAxisyAxis

2. 饼图的常见效果

  • 显示数值

    • label.show:显示文字

    • label.formatter:格式化文字

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

    Apache Echarts常用图表之饼状图_第2张图片

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

    • roseType
      是否展示成南丁格尔图,通过半径区分数据大小,可选择两种模式:radius/area
      • radius扇区圆心角展现数据的百分比,半径展现数据的大小。
      • area所有扇区圆心角相同,仅通过半径展现数据大小。
       var option = {
               
              series:[
                  {
               
                      type:'pie',
                      data:pieData,
                      label:{
               
                          show:true,
                          formatter:function(arg){
               
                              return arg.data.name + '平台' + arg.data.value + '元\n' + arg.percent + '%'
                          }
                      },
                      roseType:'radius'
                  }
              ]
          }
      

Apache Echarts常用图表之饼状图_第3张图片
Apache Echarts常用图表之饼状图_第4张图片
选中效果

  • selectedMode:'multiple'
    选中模式,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选'single''multiple',分别表示单选还是多选。

  • selectedoffset:30
    选中扇区的偏移距离

     var option = {
           
            series:[
                {
           
                    type:'pie',
                    data:pieData,
                    selectedMode:'multiple',
                    selectedOffset:50
                }
            ]
        }
    

    Apache Echarts常用图表之饼状图_第5张图片

  • 圆环

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

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

Apache Echarts常用图表之饼状图_第6张图片


声明:学习内容来自黑马程序员,为学习笔记。仅供学习交流。

你可能感兴趣的:(数据可视化_Echarts,数据分析,数据可视化,echarts,大数据)