用echarts写的转换率图表（漏斗图 + 象形柱图）

平常用图表可能都是常规的折线图，柱状图，饼图这些基本的。
下面的是一个漏斗图 + 象形柱图写出来的图表。

完成后的图表

漏斗图很简单，只讲下象形柱图里的几个关键点（由于这里的用法有点特别，不是文档里的常规操作）。

• 第一点：把图形换成图片
  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宽高了）