ECharts从零开始（八）—— gauge & funnel

这篇博文介绍仪表盘（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的顺序来。