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>