Echarts tooltip自动显示

在项目工具文件夹下创建一个文件tooltip-auto-show-vue.js,代码如下:

/**
 * echarts tooltip轮播
 * @param chart ECharts实例
 * @param chartOption echarts的配置信息
 * @param options object 选项
 * {
 *  interval    轮播时间间隔,单位毫秒,默认为2000
 *  loopSeries  boolean类型,默认为false。
 *              true表示循环所有series的tooltip,false则显示指定seriesIndex的tooltip
 *  seriesIndex 默认为0,指定某个系列(option中的series索引)循环显示tooltip,
 *              当loopSeries为true时,从seriesIndex系列开始执行。
 *  updateData  自定义更新数据的函数,默认为null;
 *              用于类似于分页的效果,比如总数据有20条,chart一次只显示5条,全部数据可以分4次显示。
 * }
 * @returns {
   {clearLoop: clearLoop}|undefined}
 */
export function loopShowTooltip(chart, chartOption, options) {
   
	let defaultOptions = {
   
		interval: 2000,
		loopSeries: false,
		seriesIndex: 0,
		updateData: null,
		shunXu: "zhengXu", //播放顺序 默认正序  zhengXu daoXu
	};

	if (!chart || !chartOption) {
   
		return;
	}
	if (options) {
   
		options.interval = options.interval || defaultOptions.interval;
		options.loopSeries = options.loopSeries || defaultOptions.loopSeries;
		options.seriesIndex = options.seriesIndex || defaultOptions.seriesIndex;
		options.updateData = options.updateData || defaultOptions.updateData;
		options.zhengXu = options.zhengXu || defaultOptions.zhengXu;
	} else {
   
		options = defaultOptions;
	}




	let dataIndex = -1; // 数据索引,初始化为-1,是为了判断是否是第一次执行
	let seriesIndex = 0; // 系列索引
	let timeTicket = 0;
	let seriesLen = chartOption.series.length; // 系列个数
	let dataLen = 0; // 某个系列数据个数
	let chartType; // 系列类型
	let first = true;
	let lastShowSeriesIndex = 0;
	let lastShowDataIndex = 0;

	if (seriesLen === 0) {
   
		return;
	}

	// 待处理列表
	// 不循环series时seriesIndex指定显示tooltip的系列,不指定默认为0,指定多个则默认为第一个
	// 循环series时seriesIndex指定循环的series,不指定则从0开始循环所有series,指定单个则相当于不循环,指定多个
	// 要不要添加开始series索引和开始的data索引?


	// 如果设置的seriesIndex无效,则默认为0
	if (options.seriesIndex < 0 || options.seriesIndex >= seriesLen) {
   
		seriesIndex = 0;
	} else {
   
		seriesIndex = options.seriesIndex;
	}

	/**
	 * 清除定时器
	 */
	function clearLoop() {
   
		if (timeTicket) {
   
			clearInterval(timeTicket);
			timeTicket = 0;
		}

		chart.off('mousemove', stopAutoShow
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值