vue中,swiper(vue-awesome-swiper)与echarts结合使用,echarts有些图不显示问题
echarts绘制的图不显示是因为,swiper的loop设置为true了。因为swiper的loop模式:会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,让Swiper看起来是循环的。所以复制出来的slide导致原本设置的echarts的id不在是唯一的,echarts绘制的图也就显示不出来了。
解决方案:
let myEchart = document.getElementsByClassName('myEchart');
myEchart.map((item, index) => {
let chart = echarts.init(myEchart[index]);
chart.setOption(option);
})
如果你的echarts图是写在组件里的那么你可以这样做:
html部分:
<swiper :options="swiperOption">
<swiper-slide v-for="(item, index) in dataList" :key="index">
<meterChart :divId="'meterChart' + index" :ref="'meterChart' + index" :data="item.value"></meterChart>
</swiper-slide>
</swiper>
js部分:
watch: {
/*
这么做是因为,swiper结合echarts使用时,echarts有的图片不显示。
echarts图不显示的原因是,swiper的loop设为了true。
swiper的loop模式:会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,
让Swiper看起来是循环的。
复制导致echarts的ID不再是唯一的了,
正是因为这个原因echarts图才不显示的。
*/
dataList(val) {
this.$nextTick(() => {
let meterChart = document.getElementsByClassName('meterChart');
/*
num为中间值,用于判断哪些echarts图是复制的。
对于复制来的echarts,使用其所复制的那个echarts来执行其setOption方法。
对于非复制的echarts,直接用其自身来调用setOption方法。
因为echarts图我是写在组件(meterChart组件)里的,所以执行setOption方法时传入的option,
其实也是写在组件(meterChart组件)里的,
所以要使用$refs来调用子组件(meterChart组件)内部的option方法。
*/
let num = meterChart.length / 2;
meterChart.forEach((item, index) => {
// 复制得来的echarts
if (index > num) {
/*
使用其所复制的那个echarts来执行其setOption方法。
*/
let dom = this.$refs[`meterChart${index - num}`];
var myChart = echarts.init(meterChart[index]);
myChart.setOption(dom[0].option());
}
// 非复制的echarts
else {
let dom = this.$refs[`meterChart${index}`];
var myChart = echarts.init(meterChart[index]);
myChart.setOption(dom[0].option());
}
})
});
}
}