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:"聚美优品",
},
]
- 准备配置项在
series下设置type:pie
var option = {
series:[
{
type: 'pie', //类型为饼图
data: pieData
}
]
}
最终效果图如下：
<!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>
注意：
- 饼图的数据是由
name和value组成的字典所形成的数组 - 饼图无需配置
xAxis和yAxis
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 + '%' } } } ] }
-
-
南丁格尔图
南丁格尔图指的是每一个扇形的半径随之额数据的大小而不同，数值占比越大，扇形的半径就越大roseType
是否展示成南丁格尔图，通过半径区分数据大小，可选择两种模式：radius/arearadius扇区圆心角展现数据的百分比，半径展现数据的大小。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' } ] }
选中效果
-
selectedMode:'multiple'
选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'，'multiple'，分别表示单选还是多选。 -
selectedoffset:30
选中扇区的偏移距离var option = { series:[ { type:'pie', data:pieData, selectedMode:'multiple', selectedOffset:50 } ] }
-
圆环
-
radius
饼图的半径。可以为如下类型：
number：直接指定外半径值。string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。Array：数组的第一项是内半径，第二项是外半径, 通过Array, 可以将饼图设置为圆环图var option = { series:[ { type:'pie', data:pieData, radius:['25%','50%'] } ] }
-
声明：学习内容来自黑马程序员，为学习笔记。仅供学习交流。