eCharts图表

tooltip

tooltip中进行点击事件

注意事项：

• triggerOn 一定要改为 “click”。
• enterable 要设置为 true，才能使鼠标进入提示框可以进行点击事件
• 在 formatter 中添加 内联的点击事件，事件处理函数需要挂载在 window 上，否则获取不到
• extraCssText修改tootip提示框的样式

1. options的tooltip配置：

tooltip: {
              trigger: 'axis', // 'axis' 'item'
              axisPointer: {
                type: 'shadow' // 'cross': 十字线； 'shadow'： 柱形半透明方块
              },
              triggerOn: 'click',//点击才会出现提示框
              enterable: true,//鼠标可以进入提示框
			  extraCssText: 'z-index: 99;max-width: 100px;white-space:pre-wrap', // 设置悬浮框的样式，比如修改层级默认是9999999，可能会遮盖住点击事件中的弹窗
              backgroundColor: 'rgba(85, 89, 132, 87)',	//tooltip背景色
              borderColor: 'rgba(85, 89, 132, 87)',		//tooltip边框颜色
              borderWidth: 1,
              formatter: function (params) { // 自定义内容
                console.log(params)
                return `

                
群组1：数据统计
                
查看舆情走势详情
              
`
              }
            }

2. 将点击事件的事件函数绑定到window上，否则无效

    mounted() {
      /* echart的tooltip中绑定点击事件，对应的点击函数需要绑定到window上 */
      window.showModal = () => {
        this.lineModalVisible = true
        // todo 处理逻辑
      }
    },