轮播展示echarts(结合el-carousel组件),数据动态更新

最新推荐文章于 2024-08-01 16:57:14 发布

怎么吃不饱捏

最新推荐文章于 2024-08-01 16:57:14 发布

阅读量1.2k

点赞数 1

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/song_song0927/article/details/130422835

版权

文章介绍了如何在Vue中使用v-for动态设置Echarts图表的容器，并避免控制台警告。通过检查实例是否存在来初始化或更新图表，并监听窗口resize事件以适应屏幕尺寸变化。同时，对走马灯组件的样式进行了调整，隐藏了底部指示器和切换按钮。

摘要由CSDN通过智能技术生成

1.轮播展示说明不止一个echarts图,所以要动态设置绘制echarts的容器;

<div v-for="(item,index) in list" :key="item.id">
   <div :id="'ec'+index"></div>
</div

在初始化echarts图的时候,加一步判断,是为了防止控制台出现警告

initEcharts(index){
const option={...};
let myChart = echarts.getInstanceByDom(document.getElementById('ec'+index));
if(myChart==null){
    myChart = echarts.init(document.getElementById('ec'+index));
  } 
myChart.setOption(option);
// 随屏幕大小调节图表
window.addEventListener("resize", () => {
    myChart.resize();
  });
}

// 设置走马灯占满div
.right-content ::v-deep .el-carousel--horizontal {
  height: 100%;
}
.right-content ::v-deep .el-carousel__container {
  height: 100%;
}
// 隐藏走马灯底部按钮
.right-content ::v-deep .el-carousel__indicators--horizontal {
  display: none;
}
// 隐藏走马灯左右切换按钮
.right-content ::v-deep .el-carousel__arrow--left,
.right-content ::v-deep .el-carousel__arrow--right {
  display: none;
}