平常用图表可能都是常规的折线图，柱状图，饼图这些基本的。

下面的是一个漏斗图 + 象形柱图写出来的图表。

完成后的图表

漏斗图很简单，只讲下象形柱图里的几个关键点(由于这里的用法有点特别，不是文档里的常规操作)。第一点：把图形换成图片

symbol属性里，前面记得加 image: ，不然图片出不来。(文档看清楚一点再下手)

第二点：上图可以看到，我们需要只有一列且纵向排列的图形

假如用 symbolRepeat 中的 fixed 指定图形重复，那旁边的转化率数字就没法根据 data 写入了。

要在 yAxis 中的 type 要改成 category，顺便写入 inverse : true(不然的话，图形从上到下对应的data是从末尾到开头的顺序)，旁边的转换率即可以对应data里的值，通过 label 去做了。

第三点：调整图形在x轴方向的位置。

可以在 xAxis 中写入min : 0，max : 100，通过 data 里的 value 去调整图形在x轴上的相对位置(也可以不写入min 和 max，区别就是 data 中 value 的值控制图形 x 轴移动的距离大小)，而后通过symbolOffset去微调。

第四点：调整图形之间的间隔与顶部的距离

由于不是 symbolRepeat 出来的重复图形，所以没法通过 symbolMargin 属性去调整。那么要如何调整呢？

在yAxis中通过min 和 max 去调整图形之间的大概间隔。

最后通过 symbolOffset 调整图形与顶部的距离。

最后直接上代码echarts.init(document.getElementById('photoConversion')).setOption({ title: { text: `拍照全流程转化率`, top: 26, left: 33, textStyle: { fontFamily: 'MicrosoftYaHei', color: '#252525', fontSize: 16, fontWeight: 400 } }, color: ['#1481E2', '#1F88E5', '#3594E8', '#4CA0EA', '#62ABED', '#79B8EF', '#8FC3F2'], xAxis: { show: false, }, yAxis: { show: false, type: 'category', inverse: true, min: 0, max: 6, }, series: [{ type: 'funnel', minSize: 90, maxSize: '70%', left: '4%', top: 100, bottom: 50, gap: 2, label: { position: 'inside', fontFamily: 'Microsoft YaHei', fontSize: 16, color: '#fff', formatter: '{b}{xx|}\n{c}', rich: { xx: { padding: [6, 0] } } }, data: [ { value: 2033, name: '整页拍照' }, { value: 2000, name: '收集错题' }, { value: 1820, name: '确认提交' }, { value: 1680, name: '错题本' }, { value: 800, name: '打印错题' }, { value: 500, name: '预览' }, { value: 100, name: '下载文件' }, ] }, { type: 'funnel', minSize: 80, maxSize: 80, top: 100, bottom: 50, left: '-68%', gap: 2, label: { position: 'insideLeft', fontFamily: 'Microsoft YaHei', fontSize: 14, color: '#545454', formatter: function (d) { console.log(d) if (d.data.name === '整页拍照') { return ' ' } var ins = `{s|${d.data.name}}\n` + `{x|${d.data.percent}}`; return ins }, rich: { s: { fontSize: 14, color: '#545454', padding: [5, 0, 12, 0] }, x: { fontSize: 16, color: '#545454', fontWeight: 'bold' } } }, itemStyle: { color: 'transparent', borderWidth: 0, }, data: [ { value: 2030, name: '整页拍照', percent: '90%' }, { value: 2000, name: '收集错题', percent: '70%' }, { value: 1820, name: '确认提交', percent: '60%' }, { value: 1680, name: '错题本', percent: '50%' }, { value: 800, name: '打印错题', percent: '30%' }, { value: 500, name: '预览', percent: '20%' }, { value: 100, name: '下载文件', percent: '40%' }, ] }, { type: 'pictorialBar', symbol: 'image://http://homework.mizholdings.com/kacha/kcsj/8351c72ed86c1a0c/.png', symbolSize: ['45%', 58], z: 1, symbolOffset: ['110%', 60], label: { show: true, position: 'right', offset: [15, 60], align: 'center', backgroundColor: 'rgba(249,249,249,1)', width: 106, height: 60, fontStyle: 'Microsoft YaHei', formatter: function (d) { var ins = '{s|转换率}\n' + `{x|${d.data.percent}}`; return ins }, rich: { s: { fontSize: 14, color: '#545454', padding: [5, 0, 12, 0] }, x: { fontSize: 16, color: '#121212' } } }, data: [{ value: 140, percent: '70%', }, { value: 140, percent: '60%', }, { value: 140, percent: '50%', }, { value: 140, percent: '40%', }, { value: 140, percent: '30%', }, { value: 140, percent: '10%', }] }] })

可以把 setOption 中的配置复制到 echarts 实例中，即可以看到图表了。但是由于容器的宽高有不同，所以会有点偏差，调整下浏览器的宽高即可以了。(浏览器宽高调整到1380*730差不多就是我图表放到的div宽高了)