踩坑 : 为什么加上了轮播图之后我的echarts不显示
通用问题:宽高太小不显示
-
未指定宽度或者宽高为百分比写法
在Echarts的组件中,为了让echarts能够自适应宽高,采用了百分比的写法,但是最后检查发现height继承了父类的100%,而父类的高度只有100px ,并且很难找到并修改父类的高度。
解决办法:采用粗暴的直接写定死的宽高,能够跨越父类直接显示。
缺点:无法再自适应了,需要根据部署环境手动调节,不知道有没有其他更好的解决办法。
同组件问题:一个轮播图里面用了多个相同echarts组件,但只显示了一个。
2、id重复导致渲染冲突
原因:echarts 的id重复导致相同组件只显示了一个echarts。
问题出现在引用同一个echarts组件,但是echarts组件的id完全相同,所以只会渲染最后一个。
解决办法:动态赋值echarts组件的id,用后缀123区分开来。如果个数有限很少直接复制三个不同组件,改成不同名字就可以了。
未知个数就用数组的形式,分别注入id 和对应的数字。
同时下面mounted()中初始化echarts的id也要做对应的更改,否则也不显示。