echarts饼图获取数据进行详情展示_echarts饼图点击获取对应数据

前端学习目录

echarts之饼图点击获取详情信息展示

一、效果

二、使用步骤

1.完成饼图的展示

myCharts.setoption(option)

2.饼图创建一个点击事件

代码如下（示例）：

<div @click="detailsDialogVisible=true"></div>
//展示详情的弹出框

<el-dialog
           title="详情信息"
           :visible.sync="detailsDialogVisible"
           width="60%">
    <el-form :model="detailForm"
             ref="detailFormRef"
            label-width="100px" >
        <el-form-item label="删除原因:" prop="name">
            <el-input v-model="reason" ></el-input>
        </el-form-item>
        <el-form-item label="删除数量:" prop="value">
            <el-input v-model="num" ></el-input>
        </el-form-item>
    </el-form>
</el-dialog>

3.获取饼图数据

getDetail(params){
//得到的参数值，把想要展示的保存，在弹出框进行展示
   this.reason = params.name;
   this.num = params.value;
}

this.myCharts.on( 'click',this.getDetail)

总结

echarts之饼图，重点就是获取数据，再绑定在相应的渲染区域。