单击Echart饼图实现数据钻取

时间:2025-02-28 18:04:14

使用场景和需求:

  第一层饼图显示党员党龄分布的情况。

  单击Echart饼图实现数据钻取

  点击某个党龄段,查看拥有该党龄段的党支部。

  单击Echart饼图实现数据钻取

  默认显示3个党支部,余下的党支部合并为其它,点击其它,查看余下的党支部。

  单击Echart饼图实现数据钻取

  点击某个党支部,返回第一层饼图。

技术原理:

  依靠Echart 点击事件的绑定,通过获取不同的参数向.net后端发送请求获取不同的数据,再将数据重新加载到Echart饼图中。

步骤概述:

  1、初始Echart图表

  单击Echart饼图实现数据钻取

  单击Echart饼图实现数据钻取

  2、在页面中定义函数,向.net后端发送请求获取数据。

  加载第一层饼图的数据,同时绑定点击事件

  单击Echart饼图实现数据钻取

  响应点击事件的函数

  单击Echart饼图实现数据钻取

   请求发送成功后,将数据加载到饼图中

  单击Echart饼图实现数据钻取

  3、在后端定义方法,对请求进行响应和判断。

  响应获取第一层饼图数据的请求。

  单击Echart饼图实现数据钻取

  单击Echart饼图实现数据钻取

  单击Echart饼图实现数据钻取

  响应Echart单击的数据请求

  单击Echart饼图实现数据钻取

  单击Echart饼图实现数据钻取

  获取前maxShow个党支部,余下的合并为其它

  单击Echart饼图实现数据钻取

  返回数据给页面

  单击Echart饼图实现数据钻取