这篇博文介绍仪表盘(gauge)和漏斗图(funnel)

一、gauge

  • radius & startAngle & endAngle
    radius为仪表盘半径,可以是相对于容器高宽中较小的一项的一半的百分比,也可以是绝对的数值。
    startAngle和饼图类似,同为开始时的角度,默认为225°

  • min & max
    minmax分别为最小和最大的数据值。具体在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默认为autoauto是指颜色和axisLine的颜色是一致的。

二、funnel

  • label

此处提到的label是位于itemStyle.normal中的,
(1)position
funnelposition只支持左中右,且在左右时,字体颜色会和各阶段颜色相同。
(2)length
length是引导线的长度
在这里插入图片描述

  • min & max & minSize & maxSize

minSize和maxSize是用来控制漏斗图最大最小值占总宽度的比例,min和max控制最大最小值,具体可参考ECharts2FAQ,虽然是ECharts2,但也可以起到一定的参考作用。

  • funnelAlign

funnelAlign是水平方向对齐布局类型,默认居中对齐。还可以左对齐和右对齐。
在这里插入图片描述

  • sort

sort是数据排序, 可以取ascendingdescendingnone。当为none时,默认按data的顺序来。
在这里插入图片描述
在这里插入图片描述

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐