前言
本篇来学习饼图的实现
饼图的特点
饼图的基本实现
- ECharts 最基本的代码结构
- 准备数据
- 准备配置项 在 series 下设置 type:pie
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>饼图的实现</title>
<!-- cdn方式 引入echarts.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height:400px"></div>
<script>
//1. ECharts最基本的代码结构
//2. 准备数据[{name:xxx,value:xxx },{}]
//3. 将type的值设置为pie
var mCharts = echarts.init(document.getElementById("app"))
// pieData就是需要设置给饼图的数据,数组,数组中包含一个又一个的对象,每一个对象中,需要有name和value
var pieData = [
{
name: 'pass',value: 80
},{
name: 'fail',value: 15
},{
name: 'skip',value: 5
},{
name: 'error',value: 5
}
]
var option = {
series: [
{
type: 'pie',data: pieData
}
]
}
mCharts.setoption(option)
</script>
</body>
</html>
饼图的常见效果
显示数值
var option = {
series: [
{
type: 'pie',data: pieData,label: {
show: true,formatter: function (arg) {
console.log(arg)
return arg.data.name + '\n' + arg.percent + '%'
}
}
}
]
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>饼图的实现</title>
<!-- cdn方式 引入echarts.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height:400px"></div>
<script>
//1. ECharts最基本的代码结构
//2. 准备数据[{name:xxx,需要有name和value
var pieData = [
{
name: 'pass',value: 80
},{
name: 'fail',value: 10
},{
name: 'skip',value: 5
},{
name: 'error',value: 5
}
]
var option = {
series: [
{
type: 'pie',formatter: function (arg) {
console.log(arg)
return arg.data.name + '\n' + arg.percent + '%'
}
}
}
]
}
mCharts.setoption(option)
</script>
</body>
</html>
南丁格尔图
南丁格尔图 : 是每一个扇形的半径随着数据的大小而不同,数值占比越大,扇形的半径也就越大
roseType: ‘radius’
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,value: 100
},value: 50
},value: 50
}
]
var option = {
series: [
{
type: 'pie',formatter: function (arg) {
console.log(arg)
return arg.data.name + '\n' + arg.percent + '%'
}
},roseType: 'radius'
}
]
}
mCharts.setoption(option)
</script>
</body>
</html>
选中效果
selectedMode:选中模式,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可
选 ‘single’ , ‘multiple’ ,分别表示单选还是多选
selectedOffset:扇区的偏移距离
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,selectedMode: 'multiple',// multiple 多选 single 单选
selectedOffset: 30 // 偏移距离
// roseType: 'radius'
}
]
}
mCharts.setoption(option)
</script>
</body>
</html>
圆环
radius:直接指定外半径值。 string :例如, ‘20%’ ,表示外半径为可视区尺寸(容器高宽中
较小一项)的 20% 长度。 Array. :数组的第一项是内半径,第二项是外半径,通过 Array,可以
将饼图设置为圆环图
var option = {
series: [
{
type: 'pie',radius: ['50%','80%']
}
]
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,// multiple 多选 single 单选
selectedOffset: 30,// 偏移距离
radius: ['50%','80%']
// roseType: 'radius'
}
]
}
mCharts.setoption(option)
</script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。