在公司的上一个项目中我有负责做一个主页的页面,其中遇到一个漏斗图不自适应屏幕大小的问题,查了文档上的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: '展现' }
]
}
]
})
}
好啦!这回关于漏斗图的自适应解说五脏俱全了!
温馨提示:
我,作为一个神奇的喵系女孩,虽然反射弧稍微迟缓的长那么一点点,但,我必定是一只不容置疑的程序媛大佬!
你可以嘲笑我技术菜,但,你必须告诉我哪里错了,为什么错?
安静的等待本媛的下一篇实习总结吧!