下钻柱状图echarts、vue

427 阅读1分钟

今天第二天报到,自我学习研究代码,有关图像下钻做了一个了 (盗取一个效果图,简单理解一下) image.png

核心思路:主要是通过echarts的点击事件,当点击了当前年份的柱状图时,获取当前的年份数字,然后调用后台接口拿到该年份的月份数据,然后重新给echarts设置options即可(这是我百度到的理解,很容易理解到思路)

我看代码,自己代码下钻稍微有点不同的是,它下钻的图是弹出展示一个新的图形

c0516b53eab527a25beb8f4227871f17e93317a48e0c4a7bed1f62ef46c81451QzpcVXNlcnNc6Zu36ZyG5LiW57qqXEFwcERhdGFcUm9hbWluZ1xEaW5nVGFsa1wzNDI4MjIxNjJfdjJcSW1hZ2VGaWxlc1wxMDVGMUQxRC00RUNCLTQ2ZTYtODQzMy1GQjAyRTZCMDdFQjYuMzYwX3RodW1i.png

HTML

1648894627776_DC2AA625-E15A-4bba-8E66-3C985EE75332.png

js重点,通过点击找到type和level进行路由跳转出现二级柱状图

e2119095a33334dff4d1832d945e38071a2a66ec4d47913d8d8375d1cf2c8271QzpcVXNlcnNc6Zu36ZyG5LiW57qqXEFwcERhdGFcUm9hbWluZ1xEaW5nVGFsa1wzNDI4MjIxNjJfdjJcSW1hZ2VGaWxlc1wxNjQ4ODk0NzIzNDI1XzI1NTMzQ0RFLTUzODItNGUzNS05NTcwLTcxRjFGQUY2QzhERS5wbmc=.png

41ef30b8d2e7ceb69f274109204e000de30414ce763dff63621172aac57bf11eQzpcVXNlcnNc6Zu36ZyG5LiW57qqXEFwcERhdGFcUm9hbWluZ1xEaW5nVGFsa1wzNDI4MjIxNjJfdjJcSW1hZ2VGaWxlc1wxNjQ4ODk0Nzg0MDM5X0FFODI5QjgxLTVGMDYtNGM1NC1BN0JDLTk3RTMzNDkwNDBFQy5wbmc=.png