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

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;
}复制