# 09 - echart图表无缝滚动
<template>
<vue-seamless-scroll
:data="listData"
:class-option="classOption"
class="warp"
>
<ul class="ul-item">
<li class="li-item" v-for="(item, index) in listData" :key="index"></li>
</ul>
</vue-seamless-scroll>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import echarts from 'echarts'
export default {
name: 'Example09Basic',
components: {
vueSeamlessScroll
},
data () {
return {
listData: [1, 2, 3, 4, 5, 6],
classOption: {
limitMoveNum: 2,
direction: 3,
}
}
},
methods: {
drawChart (dom) {
const myChart = echarts.init(dom)
myChart.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
]
}
]
});
}
},
mounted () {
// echart渲染放到setTimeout宏任务,这时vue-seamless-scroll组件内部复制完成
setTimeout(() => {
document.querySelectorAll('.li-item').forEach(dom => {
this.drawChart(dom);
});
}, 0);
},
}
</script>
<style lang="scss" scoped>
.warp {
width: 240px * 3;
height: 210px;
margin: 0 auto;
overflow: hidden;
ul {
list-style: none;
padding: 0;
margin: 0 auto;
&.ul-item {
display: flex;
.li-item {
width: 240px;
height: 200px;
margin-right: 10px;
border: 1px solid #000;
}
}
}
}
</style>