vue中 给柱状图加点击事件
时间: 2023-10-29 13:14:14 浏览: 45
在 Vue 中给柱状图加点击事件,可以使用第三方图表库(如 ECharts、Highcharts 等)或自己编写 JavaScript 实现。以下是两种实现方式的代码示例:
1. 使用 ECharts
在 Vue 中使用 ECharts 需要先安装 echarts 和 vue-echarts 两个依赖:
```bash
npm install echarts vue-echarts --save
```
然后在组件中引入:
```vue
<template>
<div>
<ve-chart :options="chartOptions" @click="handleClick"></ve-chart>
</div>
</template>
<script>
import 'echarts'
import ECharts from 'vue-echarts'
export default {
components: {
've-chart': ECharts
},
data () {
return {
chartOptions: {
// ECharts 配置项
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar'
}]
}
}
},
methods: {
handleClick (params) {
console.log(params) // 点击事件返回的参数
}
}
}
</script>
```
2. 自己编写 JavaScript 实现
```vue
<template>
<div>
<div v-for="(item, index) in data" :key="index"
@click="handleClick(index)">{{ item }}</div>
</div>
</template>
<script>
export default {
data () {
return {
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
},
methods: {
handleClick (index) {
console.log(index) // 点击事件返回的参数
}
}
}
</script>
```
以上代码示例仅供参考,具体实现方式还需要根据自己的实际需求进行调整。