vue中echarts自动轮播tooltip问题

更新时间：2022年10月20日 09:43:08 投稿：jingxian

这篇文章主要介绍了vue中echarts自动轮播tooltip问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

echarts自动轮播tooltip

vue首先需要封装tools.js的包（函数）：

export function autoHover(myChart, option, num, time) {
    var defaultData = {
        // 设置默认值
        time: 2000,
        num: 100
    }
    if (!time) {
        time = defaultData.time
    }
    if (!num) {
        num = defaultData.num
    }
    var count = 0
    var timeTicket = null
    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 >= 17) {
                count = 0
            }
        }, 3000)
    })
}
export default {
    autoHover
}

最好把这个js文件放到utils文件夹下，其他组件可能也需要用到，作为一个公共的函数；

在vue组件中引入使用：

import { autoHover } from '@/utils/tool.js'	// 引入封装的函数

export default {
  mounted() {
    this.initLine()
  },
  methods: {
    // 折线图
    initLine() {
      var myChart = echarts.init(document.getElementById('manyLine'));
      let option = {
      // ......此配置省略
      }
      myChart.setOption(option, true);
      // 自动轮播
      autoHover(myChart, this.option, 4, 3000); // 参数分别为：容器，配置，轮播数量，轮播间隔时间
    }
  }
}

Echarts大屏饼图（可自动轮播）

API：

highlight 启动高亮
downplay 关闭高亮

设置定时器：逐个开启饼块的高亮（注意：在开启下一个前将上一个高亮关闭）

import * as echarts from 'echarts';
 
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
 
option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
let count = 0;
setInterval(() => {
  myChart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    dataIndex: count
  });
  count++;
  if (count === 5) {
    count = 0;
  }
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: count
  });
}, 5000);
 
option && myChart.setOption(option);

提示：若在vue组件中复用组件引入option配置时，注意将与相关的echarts实例传给父组件，使用对应的实例myChart进行操作,如下案例：

chart.vue 可复用组件：挂载完成后将Echarts实例chart传给父组件

<script>
import * as echarts from 'echarts'
import 'zrender/lib/svg/svg'
import { debounce } from 'throttle-debounce'
export default {
  name: '',
  props: ['option', 'renderer', 'notMerge', 'lazyUpdate'],
  data () {
    return {
      width: '100%',
      height: '100%',
    }
  },
  watch: {
    option (val) {
      this.setOption(val)
    },
  },
  created () {
    this.chart = null
  },
  async mounted () {
    // 初始化图表
    await this.initChart(this.$el)
    // 向父组件传递chart实例
    this.$emit('send', this.chart)
    // 将传入的配置(包含数据)注入
    this.setOption(this.option)
    // 监听屏幕缩放，重新绘制 echart 图表
    window.addEventListener('resize', debounce(100, this.resize))
  },
  updated () {
    // 每次更新组件都重置
    this.setOption(this.option)
  },
  beforeDestroy () {
    // 组件卸载前卸载图表
    this.dispose()
  },
  methods: {
    initChart (el) {
      // renderer 用于配置渲染方式 可以是 svg 或者 canvas
      const renderer = this.renderer || 'canvas'
      return new Promise(resolve => {
        setTimeout(() => {
          this.chart = echarts.init(el, null, {
            renderer,
            width: 'auto',
            height: 'auto',
          })
          resolve()
        }, 0)
      })
    },
    setOption (option) {
      if (!this.chart) {
        return
      }
 
      const notMerge = this.notMerge
      const lazyUpdate = this.lazyUpdate
 
      this.chart.setOption(option, notMerge, lazyUpdate)
    },
    dispose () {
      if (!this.chart) {
        return
      }
 
      this.chart.dispose()
      this.chart = null
    },
    resize () {
      this.chart && this.chart.resize()
    },
    getInstance () {
      return this.chart
    },
  },
  render () {
    const { width, height } = this
    return (
      <div
        class='default-chart'
        style={{ width, height }}
      />
    )
  },
}
</script>

饼状图组件：on-send监听子组件触发的send方法，并执行相应的方法

<script>
import SubTitle from './SubTitle'
import Chart from '../Chart'
export default {
  name: '',
  data () {
    return {
      myChart: null,
      option: 省略...(与上文option设置相同 可复制于此)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.pieActive()
    })
  },
  methods: {
    // 饼状图轮播
    pieActive () {
      let count = 0
      let length = this.option.series[0].data.length
      setInterval(() => {
        this.myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: count,
        })
        count++
        if (count === length) {
          count = 0
        }
        this.myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: count,
        })
      }, 5000)
    },
    getChart (chart) {
      this.myChart = chart
    },
  },
  render () {
    return (
      <div style="height:250px;width:480px;position:absolute;left:1402px;top:772px;display:flex;flex-direction: column;">
        <SubTitle title="省份销售占比图"/>
        <div style="flex: 1; position: relative;">
          <Chart option={this.option} on-send={this.getChart} style="position: absolute;top: 10px;"/>
        </div>
      </div>
    )
  },
}
</script>
 
<style lang="scss" scoped></style>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vite+vue3中使用mock模拟数据问题
这篇文章主要介绍了vite+vue3中使用mock模拟数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
Vue组件化常用方法之组件传值与通信
这篇文章主要给大家介绍了关于Vue组件化常用方法之组件传值与通信的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
Vue.JS入门教程之事件监听
这篇文章主要为大家详细介绍了Vue.JS入门教程之事件监听,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
最简单的vue消息提示全局组件的方法
这篇文章主要介绍了最简单的vue消息提示全局组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-06-06
vue router中mode history、base的作用说明
这篇文章主要介绍了vue router中mode history、base的作用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
解决vue $http的get和post请求跨域问题
这篇文章主要介绍了解决vue $http的get和post请求跨域问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2021-06-06
vue el-table实现动态添加行和列具体代码
最近遇到一个动态增加行和列的需求,所以这里给大家总结下,这篇文章主要给大家介绍了关于vue el-table实现动态添加行和列的相关资料,需要的朋友可以参考下
2023-09-09
vite.config配置alias Error: ENOTEMPTY: director
这篇文章主要为大家介绍了vite.config配置alias时报错：Error: ENOTEMPTY: directory not empty, rmdir解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
vue 点击按钮路由跳转指定页面的实现方式
这篇文章主要介绍了vue 点击按钮路由跳转指定页面的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue3实现跑马灯效果
这篇文章主要为大家详细介绍了Vue3实现跑马灯效果，可以更换颜色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04