这段代码展示了如何使用Echarts在Vue环境中处理鼠标悬停事件。通过`dispatchAction`方法，实现高亮和取消高亮数据项的功能，分别在`mouseover`和`mouseout`事件中对barChart和barChart2两个图表进行操作，实现了自定义的图表交互效果。
this.$nextTick(() => {
// this.charts = echarts.init(this.$refs.barChart)
const barChart = this.$refs.barChart.chart
barChart.dispatchAction({
type: 'highlight',
dataIndex: 0
})
barChart.on('mouseover', function (e) {
// 当检测到鼠标悬停事件，取消默认选中高亮
barChart.dispatchAction({
type: 'downplay',
dataIndex: 0
})
})
barChart.on('mouseout', function (e) {
// 当检测到鼠标悬停事件，取消默认选中高亮
barChart.dispatchAction({
type: 'highlight',
dataIndex: 0
})
})
})
this.$nextTick(() => {
// this.charts = echarts.init(this.$refs.barChart)
const barChart2 = this.$refs.barChart2.chart
barChart2.dispatchAction({
type: 'highlight',
dataIndex: 0
})
barChart2.on('mouseover', function (e) {
// 当检测到鼠标悬停事件，取消默认选中高亮
barChart2.dispatchAction({
type: 'downplay',
dataIndex: 0
})
})
barChart2.on('mouseout', function (e) {
// 当检测到鼠标悬停事件，取消默认选中高亮
barChart2.dispatchAction({
type: 'highlight',
dataIndex: 0
})
})
})
扫一扫
9020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
