您现在的位置是:网站首页> 编程资料编程资料

vue中echarts自动轮播tooltip问题_vue.js_

2023-05-24 385人已围观

简介 vue中echarts自动轮播tooltip问题_vue.js_

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传给父组件

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

   

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

-六神源码网