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

一、gauge

  • radius & startAngle & endAngle
    radius为仪表盘半径,可以是相对于容器高宽中较小的一项的一半的百分比,也可以是绝对的数值。
    startAngle和饼图类似,同为开始时的角度,默认为225°
  • min & max
    minmax分别为最小和最大的数据值。具体在gauge的表现如下:
  • echarts series 鼠标划入tooltip 只显示部分内容_分割线

  • splitNumber
    splitNumber为仪表盘刻度的分割段数。默认为10。
  • echarts series 鼠标划入tooltip 只显示部分内容_分割线_02

  • axisLine
    axisLine是仪表盘轴线相关配置。
  • echarts series 鼠标划入tooltip 只显示部分内容_最大最小值_03

  • splitLine
    splitLine是分隔线样式:
  • echarts series 鼠标划入tooltip 只显示部分内容_饼图_04

  • 可以修改分割线长度、具体分割线的颜色、类型、宽度等。
  • echarts series 鼠标划入tooltip 只显示部分内容_分割线_05

  • 若想在color中修改透明度,需要换成rgba(a,b,c,d)
  • pointer
    pointer是仪表盘指针,类似于时钟里面的那个指针。可以修改宽度、长度。
    width是指针宽度。默认为8。
    length是指针长度,可以是绝对数值,也可以是相对于半径的半分比。默认为80%
  • echarts series 鼠标划入tooltip 只显示部分内容_饼图_06

  • title & detail

(1)title是仪表盘标题。具体有以下参数:

echarts series 鼠标划入tooltip 只显示部分内容_最大最小值_07


主要介绍下offsetCenter。其余的或多或少之前都提过,大体原理都是一致的。

offsetCenter是相对于仪表盘中心的偏移位置,有两个参数,分别为水平方向的偏移和垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。若为负,则分别向左和上,反之分别为右和下。

echarts series 鼠标划入tooltip 只显示部分内容_最大最小值_08


还值得一提的是backgroundColor支持使用图片:

backgroundColor: {
    image: 'xxx/xxx.png'
    // 这里可以是图片的 URL,
    // 或者图片的 dataURI,
    // 或者 HTMLImageElement 对象,
    // 或者 HTMLCanvasElement 对象。
}

(2)detail是仪表盘详情,用于显示数据。

echarts series 鼠标划入tooltip 只显示部分内容_分割线_09


在deatil中,通常用formatter将value返回。其中发现color默认为autoauto是指颜色和axisLine的颜色是一致的。

二、funnel

  • label

此处提到的label是位于itemStyle.normal中的,

(1)position

funnelposition只支持左中右,且在左右时,字体颜色会和各阶段颜色相同。

(2)length

length是引导线的长度

echarts series 鼠标划入tooltip 只显示部分内容_饼图_10

  • min & max & minSize & maxSize

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

  • funnelAlign

funnelAlign是水平方向对齐布局类型,默认居中对齐。还可以左对齐和右对齐。

echarts series 鼠标划入tooltip 只显示部分内容_最大最小值_11

  • sort

sort是数据排序, 可以取ascendingdescendingnone。当为none时,默认按data的顺序来。

echarts series 鼠标划入tooltip 只显示部分内容_最大最小值_12


echarts series 鼠标划入tooltip 只显示部分内容_最大最小值_13