echarts动态修改饼图的副标题

440 阅读1分钟

碰到echarts饼图展示副标题需要根据图例的状态,展示未置灰图例对应的数量和

定义echarts后监听图例状态变化事件

// this.chart是ecahrts实例
this.chart.on('legendselectchanged', function (params) {
    try {
        // 获取echart配置
        const option = this.getOption()
        let total = 0
        // 获取series数据和图例状态比对,选中就加数据
        option.series[0].data.forEach(item => {
            if (params.selected[item.name]) {
                total += item.value
            }
        })
        // 设置echarts副标题
        option.title[0].subtext = `${total} 个`
        // 渲染echarts
        this.setOption(option)
    } catch (error) {

    }

})