Apache Echarts常用图表之饼状图
Echarts常用图表
每个图表均配有对应的源代码以及知识点~~~~ 详情可点开对应的图表学习！ 各类常用图表总结在此！配合使用更方便~ 官方对应文件工具，有更详细的工具使用方法：
饼图
饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。
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 + 元
+ arg.percent + % } } } ] } 南丁格尔图 南丁格尔图指的是每一个扇形的半径随之额数据的大小而不同，数值占比越大，扇形的半径就越大 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 + 元
+ 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%] } ] }
声明：学习内容来自黑马程序员，为学习笔记。仅供学习交流。