前言
因为领导要求最近要实现一个echarts配合轮播图的效果，做出一个简单的记录。话不多说直接上代码.
配置要求
echarts@5.4.0
vant@2.12.38
vue2
代码部分(html)
<van-swipe :loop="false" :width="360" @change="onChange"><van-swipe-item style="background-color: #fff;" v-for="(item, index) in echartsData" :key="index"><div class="echarts" :id="'echarts' + index"></div></van-swipe-item></van-swipe>简单分析: 首先要关闭自动轮播 :loop="false" 需要有一个@change时间监听轮播图到哪一页了,id后面要添加index或者是id等信息,为了保证多个id用的不是一样的dom元素.
代码部分(js)
initChart(index) {const myChart = echarts.init(document.getElementById('echarts' + index));const option = {legend: {data: [{name: this.NameTitle[index],//类目的名称},],},xAxis: {data: this.xEcahrtsMonthData, //x轴的数据axisLabel: {rotate: 45,margin: 20, //类目名称与x轴的距离},},yAxis: {// splitNumber: 10,// interval: 10,},series: [{name: this.NameTitle[index], //类目名称type: "line",smooth: true,// data: [5, 20, 36, 10, 10, 50],data: this.echartsData[index], //数据},],};myChart.setOption(option);this.myChart = myChart;},简单分析:这段代码中的第二行事非常重要的关键!为了选中相关的dom元素,
效果图(其实是可以滑动的)
