饼图(pie)
程序员文章站
2022-05-26 21:41:20
...
1: 饼图 (bie)
Echarts 最基本的代码结构:
2: 引入js 文件, DOM 容器, 初始化对象, 设置option
3: 数据准备: 准备一个数组 数组中包含很多对象, 每一个对象中包含两个字段: value, name 字段
4: 图标类型:
在series 下设置 type: pie (饼图)
------------------------------------------------------------------
1: 引入Echarts 文件
<script src="lib/echarts.min.js"></script>
2: 准备一个呈现图表盒子:
<div style="width: 600px; height: 400px"></div>
3: 初始化echarts 对象: 获取初始化对象
var mCharts = echarts.init(document.querySelector('div'));
4: var pieData = [
{
name: '淘宝',
value: 1000
},
{
}
]
5: var option = {
series: [
{
type: 'pie', // 饼图
data: pieData, // 饼图数据源
lable: { // 饼图文字显示
show: true, // 显示文字
// formatter: 'haha' // 决定文字显示内容
formatter: function(arg) {
console.log(arg);
return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
}
},
// radius: 20, // 饼图的半径
// radius: '20%', // 百分比参照的是宽度或者是高度中较小的那一部分的一半进行半分比设置
rsdius: ['50%', '75%'] // 第0 个元素代表的内圆的半径, 第一个元素代表的是外圆的半径。 // 可以设置为环形图
roseType: 'rsdius', // 实现男丁格尔图, 饼图的每一个区域的半径是不同的 (玫瑰图)
selectedMode: 'single', // 选中的效果, 能够将选中的区域偏离圆点一小段距离。
selectedMode: 'multiple',
selectedOffset: 30, // 设置偏移量
}
]
}
---------------------------------------------------------
饼图常见效果:
显示数值; lable: formater
圆环的设置:
设置两个半径: radius: ['50%', '75%']; // 设置两个半径
南丁格尔图:
roseType: 'rsdius', // 实现男丁格尔图, 饼图的每一个区域的半径是不同的
选中的效果:
选中的模式:
selectedMode: single/ multiple,
选中的偏移量: selectedOffset: 30,
// 饼图的特点:
饼图可以很好的帮助用户快速了解不同分类数据的占比情况。
上一篇: 双向快充+数显:紫米Aura移动电源拆解
下一篇: 小米电视6首次采用双摄像头:解锁更多玩法