js处理echarts tooltip定时轮播

echarts tooltip定时轮播

/*** echarts tooltip轮播* @param chart ECharts实例* @param chartOption echarts的配置信息* @param options object 选项* {*  interval    轮播时间间隔，单位毫秒，默认为3000*              true表示循环所有series的tooltip，false则显示指定seriesIndex的tooltip*  seriesIndex 默认为0，指定某个系列（option中的series索引）循环显示tooltip，*              当loopSeries为true时，从seriesIndex系列开始执行。* }* @returns {{clearLoop: clearLoop}|undefined}*/export function loopShowTooltip(myChart, option, num, time) {var defaultData = {// 设置默认值time: 3000,num: 14,}if (!time) {time = defaultData.time}if (!num) {num = defaultData.num}var count = 0var timeTicket = 0// 清除定时器function clearLoop() {if (timeTicket) {clearInterval(timeTicket)timeTicket = 0}myChart.off('mousemove', stopAutoShow)myChart.getZr().off('mousemove', zRenderMouseMove)// myChart.getZr().off('globalout', zRenderGlobalOut);}// 关闭轮播function stopAutoShow() {if (timeTicket) {clearInterval(timeTicket)timeTicket = 0}}function zRenderMouseMove(param) {if (param.event) {// 阻止canvas上的鼠标移动事件冒泡// param.event.cancelBubble = true;}stopAutoShow()}timeTicket && clearInterval(timeTicket)timeTicket = setInterval(function () {myChart.dispatchAction({type: 'downplay',seriesIndex: 0, // serieIndex的索引值   可以触发多个})myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: count,})myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: count,})count++if (count >= num) {count = 0}}, time)myChart.on('mouseover', function (params) {clearInterval(timeTicket)myChart.dispatchAction({type: 'downplay',seriesIndex: 0,})myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: params.dataIndex,})myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: params.dataIndex,})})myChart.on('mouseout', function () {timeTicket && clearInterval(timeTicket)timeTicket = setInterval(function () {myChart.dispatchAction({type: 'downplay',seriesIndex: 0, // serieIndex的索引值   可以触发多个})myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: count,})myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: count,})count++if (count >= 14) {count = 0}}, 3000)})return {clearLoop: clearLoop,}
}

使用

<template><!-- 洪水预演——中间（洪水演进渲染）——水深echarts下面的进度条和echarts --><div class="DepthChart-container"><div class="chart"><EchartsChunk ref="echartRef" :options="options"></EchartsChunk></div><div class="chart2"><EchartsChunk ref="waterChartRef" :options="waterOptions"></EchartsChunk></div></div>
</template><script>
import dayjs from 'dayjs'
import { cloneDeep } from 'lodash'
import { processDataAndSetYAxis } from '@/utils/chartDefault.js'
import { loopShowTooltip } from '@/utils/tooltip-auto-show-vue'
import { fourOptions, waterOptions } from './echarts.config'
export default {name: 'DepthChart',data() {return {timesList: [], // 时间序列options: null,waterOptions: null,tootipTimer: null}},computed: {},watch: {},mounted() {this.getTmList()},beforeDestroy() {if (this.tootipTimer) {clearInterval(this.tootipTimer)this.tootipTimer = null}},methods: {getTmList() {// 模拟30条数据const timesList = []for (let i = 0; i < 28; i++) {const obj = {tm: `2024-04-${i + 1} ${i + 1}:32:00`,jl: (Math.random() * 100).toFixed(2),drp: (Math.random() * 100).toFixed(2),inq: (Math.random() * 100).toFixed(2),otq: (Math.random() * 100).toFixed(2),wl: (Math.random() * 100).toFixed(2),kr: (Math.random() * 100).toFixed(2)}timesList.push(obj)}this.timesList = timesListthis.setChartOptions()this.setWaterOptions()},setChartOptions() {const { timesList } = thislet option = cloneDeep(fourOptions)let { xAxis, series } = optionif (!xAxis) returnif (!timesList.length) {this.options = { ...option }this.$refs.chartRef.setOption(this.options) // 更新echartsreturn}const tms = timesList.map((item) => dayjs(item.tm).format('MM-DD HH:mm'))xAxis[0].data = tmsxAxis[1].data = tmsconst keys = ['drp', 'inq', 'otq', 'wl', 'kr']series.forEach((item, index) => {item.data = timesList.map((item) => item[keys[index]])})const categorizedData = {降雨量: [],水位: [],流量: [],库容: []}series.forEach((item) => {const dataType = item.name.includes('流量')? '流量': item.name.includes('水位')? '水位': item.name.includes('库容')? '库容': '降雨量'categorizedData[dataType].push(...item.data.filter((value) => value))})const updatedOption = processDataAndSetYAxis(categorizedData, option)this.options = { ...updatedOption }const ref = this.$refs.echartRefref.setOption(this.options)this.tootipTimer && this.tootipTimer.clearLoop() // this.tootipTimer 在data里定义this.tootipTimer = 0this.tootipTimer = loopShowTooltip(ref.chart, this.options, 0, 1000)},setWaterOptions() {const { timesList } = thislet option = cloneDeep(waterOptions)let { xAxis, series } = optionif (!xAxis) returnif (!timesList.length) {this.waterOptions = { ...option }this.$refs.waterChartRef.setOption(this.waterOptions) // 更新echartsreturn}xAxis[0].data = timesList.map((item) => item.jl)series[0].data = timesList.map((item) => item.wl)this.waterOptions = { ...option }const ref = this.$refs.waterChartRefref.setOption(this.waterOptions)}}
}
</script><style lang='scss' scoped>
.DepthChart-container {.chart {width: 100%;height: 260px;}.chart2 {width: 100%;height: 130px;}
}
</style>