ECharts漏斗图

功能概述

漏斗图主要分析有逻辑顺序关系的数据，表现随着业务流程的推进业务目标完成的情况。

ECharts 漏斗图插件与内置的漏斗图组件不同，它可以通过开放的自定义属性定制出更丰富的视觉效果，下图是部分示例：

示例文件包：可下载后直接导入系统参考查看。

ECharts漏斗图示例.zip

添加ECharts漏斗图插件

单击可视化插件按钮展开插件列表，然后在 ECharts 插件中将漏斗图插件拖拽至编辑区，即可添加一个 ECharts 漏斗图插件。

数据绑定

添加图表后，数据绑定面板会自动打开，在数据绑定面板中选择数据集或数据模型。

示例中我们使用的是一个数据集。

将数据集或模型中的字段拖拽到组件的各个绑定区域完成数据绑定，在左侧编辑区可见组件已经按照绑定的字段进行了绘制。

数据绑定区域	说明
数值	绑定数值类字段，可绑定一个字段。
系列	绑定组件分析的系列，可绑定一个字段。
提示标签	提示标签是指当鼠标移至图形时，会出现相应的提示信息。使用方法详见鼠标提示标签。
钻取	设置组件数据钻取路径，详见数据钻取。

数据处理

ECharts 插件与内置图表类似都可一进行数据处理，如对数据进行聚合运算，修改数据的显示格式和单位等等，使其更符合使用场景的需要。

数据处理详细操作介绍请参考数据处理。

数据探索与分析

ECharts 插件同样支持丰富的数据探索分析能力，可为您的数据可视化分析过程提供强有力的支撑。

比如为组件添加过滤器、排名筛选、切换类型等。

有关具体操作的介绍，请参考数据探索与分析中对应的介绍。

基本属性外观设置

在编辑区右侧选择属性设置或者双击该图表，打开属性设置面板可进行图表外观属性的设置。

绝大部分的属性设置项目与内置图表一致，请参考单个组件外观与属性设置。本文中主要举例介绍不同的属性设置项。

图表样式

宽度范围： 调整漏斗图最宽和最窄位置的宽度。

图形排序： 将漏斗图的图形进行排序。

图形间距： 组成漏斗图的图形块之间的距离。

图形对齐： 图形块的对齐方式。

自定义属性

ECharts 插件与普通内置图表最大的不同点是可以自定义属性，使用 JS 代码进行深度定制。

自定义属性窗口编写区可直接编写JS代码，具体配置项与 ECharts 一致，请您参考 ECharts 官网 https://echarts.apache.org/zh/option.html#title。

窗口右上角的查看配置项按钮可查看产品图表中默认的配置项，当与定制内容重复时，以定制内容优先。

示例

例如使用JS 代码自定义属性修改了漏斗图的显示样式，并添加了外围的预估值。预览效果如下：

具体代码如下，供您参考。

let ldata = []
let sdata = option.series[0].data
console.log(sdata)
const handle  = (property) => {
        return function(a,b){
            const val1 = a[property];
            const val2 = b[property];
            return val1 - val2;
        }
    }
sdata.sort(handle('value'))
console.log(sdata)

let expectData = []
sdata.forEach((item,index) => {
	ldata.push(item.name)
  let tmp = {
  	name:item.name,
    value:item.value*(1*(10-index-1))
  }
  
  expectData.push(tmp)
})

option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}'
  },
  toolbox: {
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {}
    }
  },
  legend: {
    data:ldata 
  },
  series: [
    {
      name: '预估',
      type: 'funnel',
      left: '10%',
      width: '80%',
      label: {
        formatter: '{b}预估'
      },
      labelLine: {
        show: false
      },
      itemStyle: {
        opacity: 0.7
      },
      emphasis: {
        label: {
          position: 'inside',
          formatter: '{b}预估: {c}'
        }
      },
      data: expectData
    },
    {
      name: 'Actual',
      type: 'funnel',
      left: '10%',
      width: '80%',
      maxSize: '80%',
      label: {
        position: 'inside',
        formatter: '{c}',
        color: '#fff'
      },
      itemStyle: {
        opacity: 0.5,
        borderColor: '#fff',
        borderWidth: 2
      },
      emphasis: {
        label: {
          position: 'inside',
          formatter: '{b}Actual: {c}'
        }
      },
      data: sdata,
      // Ensure outer shape will not be over inner shape when hover.
      z: 100
    }
  ]
};

return option