在本项目中, echarts是引入的一个子组件,在父组件中配置好chartOptions和automove后传给子组件。
判断传入的automove为true时,则进行轮播。
<template>
<div class="w-full h-full">
<div ref="barChart" class="chart w-full h-full"></div>
</div>
</template>
props: {
chartOptions: {
type: Object,
default () {
return {}
}
},
automove: {
type: Boolean
}
},
data () {
return {
chart: null,
dataLength: null, // x轴项数
timer: null,
count: 0
}
},
watch: {
chartOptions: {
deep: true,
handler (data) {
this.$nextTick(() => {
this.chart.resize()
this.chart.clear()
this.chart.showLoading({
text: '数据加载中 ...',
color: '#0696e1', // 加载动画颜色
textColor: '#fff',
maskColor: 'rgba(0, 0, 0, 0.2)' // 遮罩层
});
this.initEcharts(data)
})
}
},
},
mounted () {
this.chart = echarts.init(this.$refs.barChart)
this.chart.showLoading({
text: '数据加载中 ...',
color: '#0696e1', // 加载动画颜色
textColor: '#fff',
maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
});
this.chart.on('click', (param) => {
this.$emit('emitData', param)
})
this.chart.on('click', (params) => {
this.$emit('select', params)
})
// 图像随屏幕大小改变而改变
window.addEventListener('resize', this._debounce(() => {
if (this.chart) {
this.$nextTick(() => {
this.chart.resize()
})
}
}))
},
methods: {
initEcharts (data) {
this.chart.clear()
this.chart.showLoading({
text: '数据加载中 ...',
color: '#0696e1', // 加载动画颜色
textColor: '#fff',
maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
});
const baseOptions = cloneDeep(echartsOptions.baseOptions)
const options = merge(baseOptions, data)
this.chart.setOption(options)
if (this.automove) {
this.dataLength = data.xAxis.data.length
this._debounce(this.autoMove())
}
this.chart.hideLoading()
},
// 自动轮播
autoMove (param) {
let count = 0;
let timer = this.timer;
const dataLength = this.dataLength; // x轴项数
if (timer) {
clearInterval(timer);
timer = null
}
const mychart = this.chart
// 启动定时器开始轮播
timer = setInterval(() => {
// 清除之前的高亮
mychart.dispatchAction({
type: 'downplay',
seriesIndex: 0
});
// 当前下标高亮
mychart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: count
});
mychart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: count
});
count++;
if (count >= dataLength) {
count = 0;
}
}, 5000);
// 鼠标移入停止轮播
this.chart.on('mouseover', function (params) {
clearInterval(timer);
mychart.dispatchAction({
type: 'downplay',
seriesIndex: 0
});
mychart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: params.dataIndex
});
mychart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: params.dataIndex
});
});
// 鼠标移出 在上一次count的位置后继续轮播
this.chart.on('mouseout', function () {
timer && clearInterval(timer);
timer = setInterval(function () {
mychart.dispatchAction({
type: 'downplay',
seriesIndex: 0
});
mychart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: count
});
mychart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: count
});
count++;
if (count >= dataLength) {
count = 0;
}
}, 5000);
});
},
// 防抖
_debounce (fn, delay = 300) {
let timer = null;
return function () {
const _this = this;
const args = arguments;
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(_this, args);
}, delay);
};
}
}