antv G2 点击事件 获取点击的数据
博主的需求是，点击饼状图，饼状图下面的数据跟着改变。
chart.on('interval:click', ev => {
const data = ev.data;
if (data) {
console.log(data.mappingData._origin.title)
}
});
使用 ev.data.mappingData._origin 来获取点击的画布数据，然后再通过获取的数据，做相应的请求。
贴一下饼状图的代码吧 （和官方一模一样。）小编使用的vue 下面仅为script中的标签。
<script>
import { Chart } from '@antv/g2';
export default{
name:'pie',
components:{
},
data(){
return{
data : [
{ title: '事例一', count: 40, vals: 0.4 },
{ title: '事例二', count: 21, vals: 0.17 },
{ title: '事例三', count: 17, vals: 0.11 },
{ title: '事例四', count: 13, vals: 0.13 },
{ title: '事例五', count: 9, vals: 0.09 },
]
}
},
methods: {
initPie() {
// Step 1: 创建 Chart 对象
const chart = new Chart({
container: 'c1', // 指定图表容器 ID
width: 600, // 指定图表宽度
autoFit:true,
height: 300, // 指定图表高度
});
chart.coordinate('theta', {
radius: 0.75,
});
// Step 2: 载入数据源
chart.data(this.data);
// Step 3:配置charts
chart.scale('percent', {
formatter: (val) => {
val = val * 100 + '%';
return val;
},
});
chart.tooltip({
showTitle: false,
showMarkers: false,
});
// 开启或者关闭 chart 动画
chart.animate(true);
chart.interval().position('vals').color('title').label('vals', {
content: (data) => {
return `${data.title}: ${data.vals * 100}%`;
},
}).adjust('stack');
chart.interaction('element-active');
chart.on('interval:click', ev => {
console.log(ev)
const data = ev.data;
if (data) {
console.log(data.mappingData._origin.title)
}
});
// Step 4: 渲染图表
chart.render();
}
},
mounted(){
this.$nextTick(function () {
this.initPie()
})
},
}
</script>