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