Apache Echarts常用图表之饼状图 | 您所在的位置:网站首页 › 如何用两种不同的方法动态绘制饼状图形图 › Apache Echarts常用图表之饼状图 |
文章目录
Echarts常用图表饼图1. 饼图的实现步骤2. 饼图的常见效果
Echarts常用图表
饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。 1. 饼图的实现步骤1.先上Echarts经典基本代码框架~~ var mCharts = echarts.init(document.querySelector("div")) var option = {} mCharts.setOption(option)此时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 } ] }最终效果图如下: 注意: 饼图的数据是由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/area radius扇区圆心角展现数据的百分比,半径展现数据的大小。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%'] } ] }声明:学习内容来自黑马程序员,为学习笔记。仅供学习交流。 |
CopyRight 2018-2019 实验室设备网 版权所有 |