Vue Highcharts提供了方便易用的點擊事件綁定機制,可以幫助我們實現(xiàn)更加豐富的交互效果。
以下是一個示例,通過給Series添加click事件來實現(xiàn)點擊柱狀圖后彈出提示框的效果:
<template>
<div>
<highcharts :options="chartOptions" :updateArgs="[true, true, true]" @click="onClick"></highcharts>
</div>
</template>
<script>
import highchartsVue from 'highcharts-vue';
import Highcharts from 'highcharts';
export default {
data() {
return {
chartOptions: {
title: {
text: 'Example Chart'
},
xAxis: {
categories: ['A', 'B', 'C']
},
yAxis: {
title: {
text: 'Data'
}
},
series: [{
name: 'Series 1',
data: [1, 2, 3],
type: 'column'
}]
}
}
},
components: {
highcharts: highchartsVue(Highcharts)
},
methods: {
onClick(e) {
const point = e.point;
this.$message(`You clicked on ${point.category}'s ${point.series.name}, which has a value of ${point.y}.`);
}
}
}
</script>
在Vue組件里的Highcharts中添加@click,就可以監(jiān)聽到點擊事件。在onClick方法中,通過e.point獲取到被點擊的數(shù)據(jù)點,然后用Vue的消息提示框(這里使用Element UI的$message來實現(xiàn))顯示出來。
使用Vue Highcharts的點擊事件,可以在圖表上實現(xiàn)更加靈活的交互,豐富用戶體驗。