用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宽高了）
发表评论 (审核通过后显示评论)：