async getPie() { const res = await this.$http.post('/admin/count', { month: this.month }) // 1、实例化对象 if (!this.chartPie) { this.chartPie = echarts.init(this.$refs.pieRef) } // 2、配置项 const option = { tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: '数量', type: 'pie', radius: '50%', data: res.data, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] } // 3、配置项 → 对象 this.chartPie.setOption(option) // 4、图表自适应 window.addEventListener('resize', () => { this.chartPie.resize() })代码中如何实现vue使用echarts饼状图如何实现点击进入到对应的数据的具体实例
时间: 2024-02-16 17:02:01 浏览: 335
Vue 报错TypeError: this.$set is not a function 的解决方法
5星 · 资源好评率100%
要实现点击饼状图进入对应的数据实例,需要在饼状图的配置项中添加点击事件的处理函数。具体实现如下:
1. 在配置项的 series 中添加 click 事件处理函数,例如:
series: [
{
name: '数量',
type: 'pie',
radius: '50%',
data: res.data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
// 添加 click 事件处理函数
// event 表示事件对象,params 表示数据对象
// 可以根据 params 中的数据进入对应的页面
// 例如:this.$router.push(`/detail/${params.data.id}`)
// 这里只是简单的 console.log
// 可以根据具体需求进行修改
onclick: (event, params) => {
console.log(params.data);
}
}
]
2. 监听窗口大小变化,进行图表自适应。在 mounted 钩子函数中添加 resize 事件监听,例如:
mounted() {
window.addEventListener('resize', () => {
this.chartPie.resize();
});
}
这样,就可以实现点击饼状图进入对应数据实例的功能。
阅读全文