Carousel display echarts (combined with el-carousel component), data dynamic update

1. The carousel display shows more than one echarts graph, so the container for drawing echarts should be dynamically set;

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

When initializing the echarts graph, a step of judgment is added to prevent warnings from appearing in the console

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

Guess you like

Origin blog.csdn.net/song_song0927/article/details/130422835