vue中完成echarts轮播

前言

因为领导要求最近要实现一个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元素,

效果图(其实是可以滑动的)