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

一、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

这次的分享就到这了，希望我的经验带给你帮助，下次见！