这篇博文介绍仪表盘(gauge)和漏斗图(funnel)
一、gauge
- radius & startAngle & endAngle
radius
为仪表盘半径,可以是相对于容器高宽中较小的一项的一半的百分比,也可以是绝对的数值。startAngle
和饼图类似,同为开始时的角度,默认为225° - min & max
min
和max
分别为最小和最大的数据值。具体在gauge的表现如下: - splitNumber
splitNumber
为仪表盘刻度的分割段数。默认为10。 - axisLine
axisLine
是仪表盘轴线相关配置。 - splitLine
splitLine
是分隔线样式: - 可以修改分割线长度、具体分割线的颜色、类型、宽度等。
- 若想在color中修改透明度,需要换成
rgba(a,b,c,d)
- pointer
pointer
是仪表盘指针,类似于时钟里面的那个指针。可以修改宽度、长度。
width是指针宽度。默认为8。
length是指针长度,可以是绝对数值,也可以是相对于半径的半分比。默认为80% - title & detail
(1)title
是仪表盘标题。具体有以下参数:
主要介绍下offsetCenter
。其余的或多或少之前都提过,大体原理都是一致的。
offsetCenter
是相对于仪表盘中心的偏移位置,有两个参数,分别为水平方向的偏移和垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。若为负,则分别向左和上,反之分别为右和下。
还值得一提的是backgroundColor
支持使用图片:
backgroundColor: {
image: 'xxx/xxx.png'
// 这里可以是图片的 URL,
// 或者图片的 dataURI,
// 或者 HTMLImageElement 对象,
// 或者 HTMLCanvasElement 对象。
}
(2)detail
是仪表盘详情,用于显示数据。
在deatil中,通常用formatter将value返回。其中发现color
默认为auto
,auto
是指颜色和axisLine
的颜色是一致的。
二、funnel
- label
此处提到的label
是位于itemStyle.normal
中的,
(1)position
funnel
的position
只支持左中右,且在左右时,字体颜色会和各阶段颜色相同。
(2)length
length是引导线的长度
- min & max & minSize & maxSize
minSize和maxSize是用来控制漏斗图最大最小值占总宽度的比例,min和max控制最大最小值,具体可参考ECharts2FAQ,虽然是ECharts2,但也可以起到一定的参考作用。
- funnelAlign
funnelAlign
是水平方向对齐布局类型,默认居中对齐。还可以左对齐和右对齐。
- sort
sort
是数据排序, 可以取ascending
,descending
,none
。当为none
时,默认按data
的顺序来。