一个 mixin 工具(需要注意的是调用 ecahrts api 方法的变量叫 chart)
需要使用这个 chart 变量来调用提示方法, 下面代码里面有这个变量, 如果不熟悉mixin 就先自己看看, 也不要因为不会用 mixin 就感觉 mixin 不好, 人云亦云, 存在就有存在的意义
支持多系列(series)
seriesLength 如果不传默认为0
/*
* @Description: 图标自动展示的工具
* @Author:
* @LastEditors: chengchongzhen
* @Date: 2021-12-22 15:23:51
* @LastEditTime: 2021-12-27 14:27:07
*/
export default {
data() {
return {
dataIndex: 0,
seriesLength: 0,
seriesIndex: 0,
dataLength: 0,
hideTimer: null
}
},
beforeDestroy() {
if (this.hideTimer) {
clearInterval(this.hideTimer)
this.hideTimer = null
}
},
methods: {
/**
* @description: 自动展示提示
* @param {*} dataLength 数据长度
* @param {*} time 循环时长
* @return {*}
*/
showTip(dataLength = 6, time = 1500, seriesLength = 0) {
if (!this.dataLength) {
this.dataLength = dataLength
}
if (!this.seriesLength) {
this.seriesLength = seriesLength
}
if (this.chart) {
// 多个系列的情况, 一个 dataindex 回合等于一个系列, 所有系列走完就要从第一个系列重新开始
// 如果是一个系列, 则不考虑多系列的情况, 直接默认为第一项系列就好
// dataindex 和 seriesindex 不会互相干扰
if (this.dataIndex >= this.dataLength) {
this.dataIndex = 0
if (this.seriesLength > 0) {
this.seriesIndex++
}
if (this.seriesIndex >= seriesLength) {
this.seriesIndex = 0
}
}
this.chart.dispatchAction({
type: 'showTip',
seriesIndex: this.seriesIndex,
dataIndex: this.dataIndex++
})
this.hideTimer = setTimeout(() => {
this.chart.dispatchAction({
type: 'hideTip'
})
}, time / 1.5)
}
},
/**
* @description: 修改当前使用的数据长度
* @param {*} length 数据长度
* @return {*}
*/
setDataLength(length) {
console.log('setLength===>', length)
this.dataLength = length
}
/**
* @description: 手动点击触发(暂时不需要使用)
* @param {*}
* @return {*}
*/
// handleShowTip(params) {
// this.dataIndex = params.dataIndex
// this.chart.dispatchAction({
// type: 'showTip',
// seriesIndex: 0,
// dataIndex: this.dataIndex
// })
// }
}
}
使用方法
引入你需要展示的组件即可
import showTip from '@/mixins/showTip-optimize.js'
export default {
mixins: [showTip],
}
在父级组件中使用
<template>
<div id="app">
<div style="display: flex">
<HelloWorld ref="chart" :chartData="chartData" />
<HelloWorld ref="chart1" :chartData="chartData1" />
<HelloWorld ref="chart2" :chartData="chartData2" />
<HelloWorld ref="chart3" :chartData="chartData3" />
</div>
</div>
</template>
mounted() {
setTimeout(() => {
// 你需要使用 refs 来调用子组件方法, 在这里先收集起来所有子组件
const refs = [this.$refs.chart, this.$refs.chart1, this.$refs.chart2]
// 数据长度, 因为自动展示方法需要在内部计算自己展示的当前下标(自己计算自己不影响他人)
const dataLength = [
this.chartData.length - 1,
this.chartData1.length - 1,
this.chartData2.length - 1
]
const loopTime = 3000
let refIndex = 0 //当前调用的子组件下标
// 循环调用方法, 一个循环调度所有子组件自动展示逻辑
setInterval(() => {
// 如果调用了一圈子组件就要归零
if (refIndex >= refs.length) {
refIndex = 0
}
refs[refIndex].showTip(dataLength[refIndex], loopTime)
refIndex++
}, loopTime )
}, 500)
}
首次实现用的是作者的思想, 但是发现图表数量多了之后, 首次展示的等待时间就会很长, 做了自己的优化, 实现思想就是每个图表组件都要有自己的展示逻辑, 自己判断下标是否大于了自己数据的长度, 自己做处理来重置下标
参考此文档