起步
安装
创建第一个JavaScript图表
图表要点
Series [处理数据]
响应式
动画
注释
数据标签
事件
交互性
格式化
格式化轴标签
日期时间
本地化
工具提示
网格
图例
图表类型
折线图(Line Chart)
面积图(Area Chart)
条形图(Bar Chart)
柱形图(Column Chart)
箱形图(BoxPlot)
烛台图(Candlestick)
范围条形图(Range Bar Chart)
热图图表(Heat Map Chart)
矩形树图(Treemap Chart)
多轴图表(Multi-Axis Chart)
饼图 / 圆环图(Pie / Donut)
雷达图(Radar)
径向条形图 / 仪表图(RadialBar / Circular Gauge)
同步图表(Synchronized charts)
设计
颜色
主题
渐变
图像填充
模式
滤镜
集成
Angular Charts
React Charts
Vue Charts
如何
放大类别 X 轴
自动换行和多行文本
从 JSON API 更新图表 & AJAX
选项(参考)
annotations
chart
animations
background
brush
defaultLocale
dropShadow
fontFamily
foreColor
group
events
height
id
locales
offsetX
offsetY
parentHeightOffset
redrawOnParentResize
redrawOnWindowResize
selection
sparkline
stacked
stackType
toolbar
type
width
zoom
colors
dataLabels
fill
forecastDataPoints
grid
labels
legend
markers
noData
plotOptions
area
bar
bubble
candlestick
boxPlot
heatmap
treemap
pie
polarArea
radar
radialBar
responsive
series
states
stroke
subtitle
theme
title
tooltip
xaxis
yaxis
方法
render
exec
updateOptions
updateSeries
appendSeries
toggleSeries
showSeries
hideSeries
zoomX
resetSeries
appendData
toggleDataPointSelection
addXaxisAnnotation
addYaxisAnnotation
addPointAnnotation
removeAnnotation
clearAnnotations
dataURI
destroy
setLocale
pie - Apexcharts中文手册 - 笔下光年
网站首页
pie
[TOC] - # plotOptions - ## pie - ### ~~size: Number~~ 已弃用:此属性不再可用。 - ### startAngle: Number 饼图/圆环图 slices 应从中开始的自定义角度。 - ### endAngle: Number 饼图/圆环图 slices 结束的自定义角度。 - ### expandOnClick: Boolean 单击 饼图/圆环图 slices 时,展开切片以使其在视觉上有所区别。 - ### offsetX: Number 设置整个饼图区域的左偏移量 - ### offsetY: Number 设置整个饼图区域的顶部偏移量 - ### customScale: Number 转换整个 饼图/圆环图 的比例以覆盖默认计算。尝试像 0.5 和 1.5 这样的变化,看看它是如何根据饼图的默认宽度/高度进行缩放的 - ### dataLabels: ![](/uploads/images/20221226/bdb2bf97d316347bd2f3a1c0abbc168e.png) - #### offset: Number 标签将在 圆环图 区域外/内移动的偏移量 - #### minAngleToShowLabel: Number 允许显示数据标签的最小角度。如果切片角度小于此数字,则不会显示标签以防止出现重叠问题。 `dataLabels` 的所有其他格式/样式设置都必须在 [dataLabels](http://www.bixiaguangnian.com/manual/apexcharts/305.html "dataLabels") 配置中完成。 - ### donut: - #### size: String 圆环图 / 圆形 尺寸相对于饼图总面积的百分比。 - #### background: Color 饼图的背景颜色 - #### labels: ![](/uploads/images/20221226/f60436f7a4700e84541fded12c594ab1.png) - ##### show: Boolean 是否显示内部标签。 - ##### name - ###### show: Boolean 显示与其值关联的相应柱的名称 - ###### fontSize: String 圆环图标签中名称的字体大小 - ###### fontFamily: String 圆环图标签中名称的字体 - ###### fontWeight: String | Number 数据标签中名称的字体粗细 - ###### color: Color 圆环图标签中名称的颜色 - ###### offsetY: Number 设置名称的顶部偏移量 - ###### formatter: function 应用于 dataLabel 中的名称文本的自定义格式化程序函数 - ##### value - ###### show: Boolean 显示与名称标签关联的值标签 - ###### fontSize: String 值标签的字体大小 - ###### fontFamily: String 值标签的字体 - ###### fontWeight: String | Number dataLabel 中值标签的字体粗细 - ###### color: Color dataLabel 中值标签的颜色 - ###### offsetY: Number 设置值标签的顶部偏移量 - ###### formatter: function 应用于 dataLabel 中的值标签的自定义格式化程序函数 - ##### total - ###### show: Boolean 在 radialBar 的内部区域显示所有系列的总数 - ###### showAlways: Boolean 始终显示总标签,即使用户单击/悬停在切片上也不要将其删除。 - ###### label: String “总计”的标签。默认为“总计” - ###### fontSize: String 总标签的字体大小 - ###### fontFamily: String 总标签的字体 - ###### fontWeight: String | Number dataLabel 中总标签的字体粗细 - ###### color: Color 总标签颜色 - ###### formatter: function 应用于总值的自定义格式化程序函数。它接受一个参数 `w`,其中包含图表的配置和全局对象。 默认为所有系列百分比的总和除以系列长度。 ```javascript plotOptions: { pie: { startAngle: 0, endAngle: 360, expandOnClick: true, offsetX: 0, offsetY: 0, customScale: 1, dataLabels: { offset: 0, minAngleToShowLabel: 10 }, donut: { size: '65%', background: 'transparent', labels: { show: false, name: { show: true, fontSize: '22px', fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 600, color: undefined, offsetY: -10, formatter: function (val) { return val } }, value: { show: true, fontSize: '16px', fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400, color: undefined, offsetY: 16, formatter: function (val) { return val } }, total: { show: false, showAlways: false, label: 'Total', fontSize: '22px', fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 600, color: '#373d3f', formatter: function (w) { return w.globals.seriesTotals.reduce((a, b) => { return a + b }, 0) } } } }, } } ```
上一篇:
treemap
下一篇:
polarArea