首页 前端知识 echarts实用经验:tooltip悬浮框添加button按钮;toolbox添加自定义按钮;显示隐藏切换导致图表太小渲染不及时的解决办法

echarts实用经验:tooltip悬浮框添加button按钮;toolbox添加自定义按钮;显示隐藏切换导致图表太小渲染不及时的解决办法

2024-02-02 09:02:01 前端知识 前端哥 592 408 我要收藏

一、tooltip悬浮框添加点击事件

这里我配置的是在柱状图中,echarts配置项文档

注意:
1、tooltip,默认是鼠标移动时触发(‘mousemove’)。这种情况下,是无法点击到悬浮框的,更别说点击框内的按钮。所以先修改出现方式为鼠标点击时触发(‘click’
2、设置鼠标可进入悬浮框:enterable:true
3、formatter,提示框浮层内容格式器,支持字符串模板和回调函数两种形式。这里用回调函数形式,在 trigger 为 ‘axis’ 的时候,会有多个系列的数据params[0]、params[1]

tooltip: {
	trigger: "axis",//坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用
    triggerOn: 'click',//可点击
    enterable:true,//鼠标是否可进入提示框浮层中,默认为false,如需详情内交互,如添加链接,按钮,可设置为 true
    alwaysShowContent: true,//总是展示
	backgroundColor:'#fff',//背景色
	borderColor:'#eee',//边框颜色
	borderWidth:'0.5',//边框宽度
       formatter: (params)=> {
       //有用到原数据的一些信息,
       //dataIndex,即为当前柱子所用数据在原数据数组中的索引
       let {dataIndex} = params[0]
       return (
         params[0].name + 
         '<button class="btn" type="button" οnclick="' +
           this.goToDetail(this.originInfo[dataIndex].id) +
           '">更多</button>'+
           '<br/>' +params[0].marker + params[0].seriesName +':'+params[0].value+'<br/>'+
           params[1].marker + params[1].seriesName +':'+params[1].value
         );
       },
	textStyle: {
		color: "#666",
		fontSize: 12
	},
	padding: [10, 5, 5, 5]
},

在页面加载后tooltip第一次显示时,goToDetail被调用了多次,导致查看按钮上绑定了多个点击事件。
解决:设置addEventflag变量来控制仅当第一次goToDetail被调用时,给dom添加事件监听。这样按钮就不会被注册那么多次点击事件了

<template>
	<div id="barCharts"></div>
</template>
import echarts from 'echarts';//echarts引入
export default{
	data(){
		return{
			addEventflag:false,
		}
	}
}
methods:{
	goToDetail(id){
		if (this.addEventflag) {
			return false;
		}
		document.getElementById('barChart').addEventListener('click', ev => {
			let el = ev.target;
			if (el.tagName.toLowerCase() === 'button' && el.className === 'btn') {
				//emit一个函数,供父组件使用
				this.$emit('goToDetail',id)
			}
		});
		this.addEventflag = true;
	},
}

参考链接:
1、https://www.cnblogs.com/GoTing/p/14784461.html
2、https://blog.csdn.net/Tempta36/article/details/104591652

二、toolbox添加自定义按钮

注意:
1、配置时icon不能是空,不然不展示,我就踩了这个坑;
2、官方提示:除了各个内置的工具按钮外,还可以自定义工具按钮。注意,自定义的工具名字,只能以 my 开头,例如下例中的 myTool1,myTool2

toolbox: {
	show: true,//是否显示工具栏组件
    right: 20, // toolbox的定位位置
    feature:{
       myTool1:{
       show: true,
       title: '返回首页',
       icon:'image://https://echarts.apache.org/zh/images/favicon.png',
	       	onclick: ()=>{
        		this.backHome()
	       	}
       }
    }
},
methods:{
	backHome(){
		this.$emit('backHome')
	}
}

三、显示隐藏切换导致图表太小渲染不及时的解决办法

v-show和v-if的区别
v-show不满足条件的元素会存在在DOM树中,只是style样式上display属性改成none;
v-if不满足条件的元素不会存在在DOM树中;

<template>
	<div>
		<el-button type="info" @click="changeChart">点击切换</el-button>
		<div v-if="type==='01'" id="chart1"></div>
		<div v-if="type==='02'" id="chart2"></div>
	</div>
</template>
export default{
	data(){
		return{
			type:'01'
		}
	},
	methods:{
		changeChart(){
			this.type = this.type==='01' ? '02' :'01'
		},
	}
}

参考链接:https://blog.csdn.net/weixin_43572973/article/details/109678762

这次的分享就到这了,希望我的经验带给你帮助,下次见!
今天也要加油鸭

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1125.html
标签
评论
发布的文章

jQuery ---- 插件

2024-02-15 14:02:06

CSS-JavaScript-Jquery-Servlet

2024-02-15 14:02:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!