vue项目如何实现Echarts在label中获取点击事件

目录
  • vue Echarts在label中获取点击事件
  • vue echarts图表点击事件
    • 柱状图

vue Echarts在label中获取点击事件

需要针对Echarts图像对label添加点击事件，一开始设置如下代码：

<template>
 <div id="bar-echart" ref="barEchartDom" />
</template>

<script>
import * as echarts from 'echarts';
if (this.barDom) {
this.barDom.dispose();
 }
 this.barDom = echarts.init(this.$refs.barEchartDom);
 this.barDom.on('click','yAxis.category'， function (param) {
   console.log(param);
 });
</script>

这里yAxis.category也可以去除，此时可以针对param全部的参数进行区分自己想要的点击数据

此时针对label进行点击后，还是无法获取点击事件，经检查，是未对yAxis添加label的event事件

yAxis: {
  type: 'category',
     data: [],
     triggerEvent: true
   },

应对需要点击label设置的属性添加triggerEvent，此时label可进行点击

在click点击事件内，可以打印出当前点击信息

vue echarts图表点击事件

echarts 官方API提供了点击事件chart.on(‘click’)只获取到点击图形的数据；

但是发现数据过小导致图形难以点击到的时候凉凉了，解决的时候发现tooltips中的数据与需要获取到的数据相同，具体代码如下：

<div id="lineBar_chart" @mousedown="handleMousedown"></div>

export default {
     methods:  {
         handleMousedown(params) {
              //通过获取鼠标点击事件，获取到值
              this.$emit("xData", this.xData);
           },
      }
}

柱状图

<chart-box
  ref="lineBar_chart"
  :id="'lineBar_chart'"
  :setOption="barOptions "
   v-on:xData="handleTooltipClick"
 ></chart-box>

export default = {
  mounted() {
    //需要注意的是，对返回数据进行处理
    let data = [] //假设为返回数据
    let series = []
    for(let i of data) {
        //echart对数据解析时，只会显示value值，但我们可以带上需要的值
        series.push({ value: i.num，id: i.id... })
    }    

    this.barOptions = {
       tooltips: {
         //tooltips提供的formatter方法，可以自定义数据
          formatter: function(params) {
            val.params = params[0].data
            //此处要注意this指向问题
            that.$set('that.$refs.lineBar_chart', 'xData',val)
         }
       }
    };
  },
  methods: {
     handleTooltipClick(val) {
         //根据获取到的数据进行处理啦
        console.log(`图形的数据`，val)
    }
  }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 项目引入echarts 添加点击事件操作

    main.js中 import echarts from 'echarts' Vue.prototype.$echarts = echarts vue文件中 _this.calendarChart=_this.$echarts.init(document.getElementById('earlyWarningCalendar')) _this.calendarChart.on('click',function (param) { console.log(param) }) _this.cale

  • 在项目vue中使用echarts的操作步骤

    1.在组件中创建该模块 <template> <div id = "testChart"></div> </template> 2.导入echarts 前提是:已经在项目中配置过echarts 在<script></script>中导入echarts <script> import {echartInit} from "../../../utils/echartUtils" <

  • Vue在echarts tooltip中添加点击事件案例详解

    Vue在echarts tooltip中添加点击事件案例详解

    目录 需求 解决方法 1.设置tooltip 2.定义hookToolTip变量 3.在methods中添加方法 4.完整代码 需求 需要在echarts tooltip点击学校的名称,跳转到详情页面:项目是从上海市---> 某个区----> 具体的学校(在最后一级的tooltip中绑定一个点击事件)  项目是用vue和echarts实现的,echarts是新版本(^5.0.2),并不能把点击事件绑定在window上 解决方法 1.设置tooltip enterable: true, //允许

  • vue项目如何实现Echarts在label中获取点击事件

    目录 vue Echarts在label中获取点击事件 vue echarts图表点击事件 柱状图 vue Echarts在label中获取点击事件 需要针对Echarts图像对label添加点击事件,一开始设置如下代码: <template> <div id="bar-echart" ref="barEchartDom" /> </template> <script> import * as echarts from

  • vue.js中关于点击事件方法的使用(click)

    目录 关于点击事件方法的使用(click) vue点击click事件解析 关于点击事件方法的使用(click) 定义vue.js: <script src="../js/vue.min.js"> </script> 也可以使用网上的: <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 都可以. 定义方法: let vm=new

  • jquery中交替点击事件toggle方法的使用示例

    复制代码 代码如下: $('#clickId').toggle( function(){$('#divId').hide();}, function(){$('#divId').show();} ); toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能

  • jquery中交替点击事件的实现代码

    复制代码 代码如下: $('#clickId').toggle( function(){$('#divId').hide();}, function(){$('#divId').show();} ); toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能

  • vue项目常用组件和框架结构介绍

    vue项目基础结构 一个vue的项目,我觉得最小的子集其实就是{vue,vue-router,component},vue作为基础库,为我们提供双向绑定等功能.vue-router连接不同的"页面",component作为样式或者行为输出,你可以通过这三个东西来实现最基本的静态SPA网站.当然我在这里不谈vue全家桶这样宽泛的概念,我会如数家珍的把主要的技术点一一列举. 1.vue-cli:搭建基本的vue项目骨架,脚手架工具 2.sass-loader&node-sass:我

  • vue实现在v-html的html字符串中绑定事件

    需求: 需要在v-html的html字符串的button中绑定点击事件,需要点击后做一些操作,必须渲染成html,但是渲染后的html里面写绑定事件的代码没有经过vue编译,所以事件无效. <div class="code-review"> <div v-html="html" v-highlight @click="addComment($event)"></div> </div> compute

  • vue项目实现点击目标区域之外可关闭(隐藏)目标区域

    vue项目实现点击目标区域之外可关闭(隐藏)目标区域

    目录 点击目标区域之外可关闭目标区域 解决思路 方法一 方法二 vue点击组件外部隐藏组件自身 示图:点击外层元素隐藏自定义车牌选择框 代码如图中所写 核心 点击目标区域之外可关闭目标区域 解决思路 方法一 1.vue模块中的内容  -- class为myPanel的div是我们要处理的那个小组件. <template>     <div class="hello">         <div class="myPanel" v-if=

  • Vue如何给组件添加点击事件 @click.native

    目录 给组件添加点击事件 @click.native 问题 结论 vue中@click.native使用 @click.native是给组件绑定原生事件 给组件添加点击事件 @click.native 问题 毕设项目中有个产品展示列表,当初用组件写的,今天想要点击获取当前选中的产品的数据,刚开始直接使用@click写的,但是点击并没有生效. 我尝试在组件中添加点击事件,点击图片,控制台输出1. 结果是可以实现的. 结论 给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自It

  • JavaScript的for循环中嵌套一个点击事件的问题解决

    先看下面一段代码: for(var i=0; i<10; i++) { $('#ul').bind('click', function() { alert(i) }) } 对于这段代码,当点击Id为"ul"的元素时,会出现弹出10个10.为什么会弹出10个10呢? 首先,这段代码中的点击事件不是绑定事件,是jQuery的绑定事件,那么绑定事件和普通事件是有区别的.普通事件中,如果对某一个元素添加多个点击事件,那么,最后一个将会把前面的所有点击事件全部覆盖,只能执行最后一个点击事件

随机推荐