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>