数据可视化之饼图：特点，应用场景，以及效果展示与代码绘制
数据可视化之饼图：特点，应用场景，以及效果展示与代码绘制
- 学习：知识的初次邂逅
- 复习：知识的温故知新
- 练习：知识的实践应用
目录
一,饼图的来历
饼图的起源可以追溯到 1801 年。
其发明者是苏格兰人威廉・普莱费尔（William Playfair），他是一位商人、工程师、经济学家。威廉・普莱费尔创造了世界上第一张有意义的线图、柱状图和饼图。
世界上第一张饼图出现在他的《统计摘要》中，主要展现了当时土耳其帝国占有的领土面积情况，比如在亚洲、欧洲、非洲等不同地区的占比。最初，这种图表形式并没有得到广泛应用。后来经过不断的发展和改进，饼图逐渐成为了一种常用的数据可视化图表。
二,饼图的特点
-
直观展示占比关系：
-
饼图最突出的特点是能够直观地显示各部分数据在总体中所占的比例。人们通过观察扇形的大小，就能快速理解不同类别数据的相对重要性或占比情况。例如，在一个公司的销售数据中，可以用饼图清晰地展示不同产品的销售额占总销售额的比例。
-
整体与部分的呈现：
-
整个圆形代表数据的整体，而每个扇形代表一个分类，这种图形结构能够让用户清晰地看到各部分与整体的关系。
-
简洁明了：
-
相比于一些复杂的图表，饼图的结构简单，易于理解。不需要过多的解释和说明，观众就能快速获取主要信息。
-
色彩辅助表达：
-
可以通过不同的颜色来区分不同的扇形，增强了数据的可视化效果和分类的区分度，帮助观众更快地理解数据的含义。
三,饼图的应用场景
-
市场调研与销售分析：
-
在市场调研中，可用于展示消费者对不同品牌的喜好度占比、对产品不同功能的需求占比等。例如，调查消费者对各类电子产品品牌的喜爱程度，用饼图可以直观地看出每个品牌在消费者心中的受欢迎程度。
-
在销售领域，能够呈现不同产品的销售业绩占总销售额的比例，帮助企业了解哪些产品是销售的重点，哪些产品需要进一步推广或改进。比如，一家超市可以用饼图分析各类商品的销售额占比，以便调整商品的采购和陈列策略。
-
-
人口统计与社会学研究：
-
可以展示人口的性别比例、年龄分布、种族构成等信息。例如，用饼图呈现一个城市或国家的男女比例，或者不同年龄段人口在总人口中的占比，帮助政府和相关部门制定人口政策和社会发展规划。
-
财务分析：
-
在企业的财务报表中，饼图可用于展示各项费用支出在总费用中的占比，如生产成本、销售费用、管理费用等各占多少比例，以便企业管理者进行成本控制和预算管理。
-
选举与投票结果展示：
-
在选举活动中，用饼图展示不同候选人的得票率，让选民和公众快速了解选举的结果和各候选人的支持情况。
-
网站或 APP 数据分析：
-
对于网站或 APP 的用户行为数据，如不同页面的访问量占比、不同功能的使用频率占比等，可以使用饼图进行可视化展示，帮助开发者了解用户的行为习惯和需求，优化网站或 APP 的设计和功能。
四,饼图的代码绘制以及效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
<title>基础饼图</title>
<script src="../echarts.js"></script>
</head>
<body>
<div id="root" style="width: 1200px; height: 500px;"></div>
<script>
var my_charts = echarts.init(document.getElementById('root'));
var option = {
title: {
text: "基础饼图"
},
// xAxis:{}, //饼图x轴
// yAxis:{}, //饼图也不需要y轴
grid: {},
tooltip: {},
legend: {
data: ["饼图数据"]
},
series: [
{
//本章知识点 饼图是pie
type: "pie",
radius:"50%", //调整饼图的半径 饼图的默认半径是跟随当前容器的大小 最大化的
// colorBy:"series", //默认是data 这搞的一样的就没啥必要了
colorBy:"data", //默认是data 这搞的一样的就没啥必要了
legendHoverLink :true,//是否启用图例 hover 时的联动高亮。
// stillShowZeroSum:false, //当所有数据都是0的时候 让其不显示
stillShowZeroSum:true, //默认显示
label:{ //饼图元素的文本
show:true,//是否显示文本
// position:"outside" //默认在外
position:"inside" ,// 显示在内
// position:"center" // 显示在圆心
// rotate:60, //文本旋转的角度
// rotate:true, //分布往圆心旋转 竖着
rotate:'tangential', //分布往圆心旋转 横着
// color:'pink', //修改颜色
fontStyle:"normal", //字体风格
fontWeight:"bold",//字体粗细
fontsize:100,
//等等 css样式
},
data: [
{
name:"陈陈的武力值",
value:400,
},
{
name:"田田的武力值",
value: 400,
},
{
name:"辉辉的武力值",
value: 400,
}
]
}
],
};
my_charts.setOption(option);
</script>
</body>
</html>
- 学习：知识的初次邂逅
- 复习：知识的温故知新
- 练习：知识的实践应用
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
20
0- 0
已为社区贡献9条内容
所有评论(0)