在公司的上一个项目中我有负责做一个主页的页面，其中遇到一个漏斗图不自适应屏幕大小的问题，查了文档上的onresize（）方法但在vue中并没有生效，这使我研究了好一会才找到问题所在并得以解决，考虑到上一个系统也是公司内部使用的，还没上线，保密协议啥的毕竟签了，也不知道我直接把项目的代码和页面拉出来行不行，所以我单拉出漏斗图来发博客啦！
1.先看效果吧：
2.然后上屏幕自适应的函数代码和解说：
3.解释：
这是我之前错误的写法：
window.onresize = function () {
console.log(window)
console.log(this)
this.chart4.resize()
}
错误用法：window.onresize方法里面的this都是指向的window，
而我的chart4图表是引用的vueComponnent组件里的插件，所以找不到chart4的resize方法；
在方法window.resize之外定义一个中间变量后将当前的this赋值给that，此时this指向的还是vue组件，
所以将中间变量放进window方法里后依然是指向vue组件，所以可以获取到chart4的resize() 属性方法实现自适应调图表大小；
4.最后把漏斗图的代码也扔上来吧：
// 添加漏斗图方法
initChart4 () {
this.chart4 = echarts.init(this.$refs.myEchart4)
// 把配置和数据放这里
this.chart4.setOption({
// resize = this.$refs.myEchart4.resize,
title: {
text: '漏斗图',
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%"
},
legend: {
data: ['展现', '点击', '访问', '咨询', '订单']
},
calculable: true,
series: [
{
name: '漏斗图',
type: 'funnel',
left: '10%',
top: 60,
bottom: 60,
width: '80%',
min: 0,
max: 100,
minSize: '20%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
normal: {
show: true,
position: 'inside'
},
emphasis: {
textStyle: {
fontSize: 20
}
}
},
labelLine: {
normal: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
}
},
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 1
}
},
data: [
{ value: 60, name: '访问' },
{ value: 40, name: '咨询' },
{ value: 20, name: '订单' },
{ value: 80, name: '点击' },
{ value: 100, name: '展现' }
]
}
]
})
}
好啦！这回关于漏斗图的自适应解说五脏俱全了！
温馨提示：
我，作为一个神奇的喵系女孩，虽然反射弧稍微迟缓的长那么一点点，但，我必定是一只不容置疑的程序媛大佬！
你可以嘲笑我技术菜，但，你必须告诉我哪里错了，为什么错？
安静的等待本媛的下一篇实习总结吧！
589
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
