一、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
这次的分享就到这了，希望我的经验带给你帮助，下次见！
