swiper+echarts loop:true 图表不显示问题的解决办法

原创已于 2022-06-27 09:37:27 修改 · 1.5k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts

收录于

于 2021-09-01 16:42:28 首次发布

本文介绍了在使用swiper与echarts结合时遇到的loop:true图表不显示问题的原因及解决方法。关键在于swiper需确保有数据后再加载，并通过class而非id来获取div元素，以避免id不唯一导致的图表显示异常。同时，采用class获取div后，需使用循环setOption来正确显示图表。

HTML：

<div id='barChart' class="barCharts" style="width:500px;height:500px"></div>

原：（用id获取div）

var myChart = echarts.init(document.getElementById('barChart'));

var option = {.............}

myChart.setOption(option);

改：（用class获取div）

let list = document.getElementsByClassName('barCharts')
let option = {..........}
for (var i = 0; i < list.length; i++) {
    var myChart = echarts.init(list[i]);
    myChart.setOption(option);
    // 图表自适应
    window.addEventListener("resize",function() {
        myChart.resize();
    });
}

提示：swiper要确认有数据后再加载，否则首尾页面未复制，会导致 loop:true 无效

（ v-if / *ngIf = ' chartData.length ' ）

原因：swiper默认会对第一页和最后一页进行复制，这样会使div的id不唯一，getElementByID只会获取一个div，用class（getElementByClassName）即可解决该问题

PS：采用classname获取div后，需要循环setOption