vue -- echarts 饼图/柱状图添加点击事件

最新推荐文章于 2025-06-13 15:57:26 发布

Kingsaj

最新推荐文章于 2025-06-13 15:57:26 发布

阅读量9.5k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： Vue Echarts可视化图形文章标签： echarts vue.js 前端

本文链接：https://blog.csdn.net/weixin_44412840/article/details/121335083

Vue 同时被 2 个专栏收录

68 篇文章

订阅专栏

Echarts可视化图形

11 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用ECharts库，包括如何配置图表、绑定点击事件并传递参数，以及如何在父组件中处理这些事件。通过实例演示了如何在组件间传递事件和参数，便于数据交互和用户反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts原生提供了相应的API，只需要在配置好echarts之后绑定相应的事件即可，即在echarts最后面添加上以下这段代码就可以了。

绑定点击事件

myChart.on("click", clickFunc);

事件处理函数
param ： echarts的事件处理函数自带的参数，包含了本次触发对象的所有相关参数

function clickFunc(param) {
      alert(param.data.name); // 当前点击对象的name
}

在vue中使用

<template>
  <div
    class="eacharts-wrapper"
    :ref="'chart' + this.cKey"
    :style="chartsWrapperStyle"
  ></div>
</template>

<script>
import eacharts from 'echarts';
export default {
  props: {
    option: {
      type: Object,
      default: () => {
        return {
          title: { text: 'option默认柱状图' },
          tooltip: {},
          xAxis: {
            data: ['java', 'node', 'js', 'py', 'vue', 'rn']
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }
          ]
        };
      }
    },
    cKey: {
      type: String,
      default: () => {
        return new Date().getTime() + '';
      }
    },
    width: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 300
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      echartsCtx: null,
      chartsWrapperStyle: {}
    };
  },
  created() {
    this.chartsWrapperStyle = {
      width: this.width + 'px',
      height: this.height + 'px'
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
      if (this.loading) {
        this.showLoading();
      }
      this.render();
      this.eConsole();
      this.resize();
    });
  },
  methods: {
    // 初始化echarts
    init() {
      this.echartsCtx = eacharts.init(this.$refs[`chart${this.cKey}`]);
    },
    // 配置echarts
    render(n) {
      this.echartsCtx.setOption(n || this.option);
    },
    // 给echarts绑定事件（在父组件内通过refs来触发绑定事件）
    eConsole() {
      this.echartsCtx.on('mouseover', this.overFunc);
      this.echartsCtx.on('mouseout', this.outFunc);
    },

    // 事件处理函数（通过emit来触发父组件内的事件处理函数）
    overFunc(param) {
      // param: 点击对象的所有相关参数
      this.$emit('overEvent', param);
    },
    outFunc(param) {
      // param: 点击对象的所有相关参数
      this.$emit('outEvent', param);
    },

    showLoading() {
      this.echartsCtx.showLoading({
        text: '数据正在努力加载...',
        textStyle: { fontSize: 30, color: '#444' },
        effectOption: { backgroundColor: 'rgba(0, 0, 0, .3)' }
      });
    },
    hideLoading() {
      this.echartsCtx.hideLoading();
    }
  },
  watch: {
    loading(n, o) {
      if (!n) {
        this.render();
        this.hideLoading();
      } else {
        this.showLoading();
      }
    },
    option: {
      handler(n, o) {
        this.render(n);
      },
      deep: true
    }
  }
};
</script>