如何进行Echart下钻功能的实现


本篇文章给大家分享的是有关如何进行Echart下钻功能的实现,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。今天实现一下Echart双纵坐标(一数据一百分比),两柱一折,可下钻,只有一个HTML文件,Echart和jq都是引用在线的。温馨提示:展示数据并非正式FIFA数据,是功能需要随意写的。下钻前展示(图一)
点击下钻后(图二)现在来简单讲一下流程HTML文件引入两 香港云主机个在线js文件,一个jquery一个echarts.min.js在body给一个div来存放echart图js实现对echart的数据格式绑定
好,我们就直接讲第三步,下图红色框框框起来的便是对echart的实例已经数据格式绑定这些,然后就出现了上文的图一效果。
然后我们讲如何实现下钻。(一)我写的是给echart实例的一个点击事件,然后点击事件传入echart图一中展示的数据data。(二)对之前echart视图销毁
(三)重新实例一个新的echart,这时候我们就可以根据传入的data去ajax请求后台获取下钻后的数据,当然了,这里我为了减少麻烦,就不写ajax,我直接设定了下钻后的数据,如图(四)然后为新实例的echart赋值和绑定
好了,就这么多了,下载源码下来就一个HTML文件,一撸就可以了。以上就是如何进行Echart下钻功能的实现,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注开发云行业资讯频道。

相关推荐: js怎么获取两个数组及数组对象中相同和不相同的值

本篇内容主要讲解“js怎么获取两个数组及数组对象中相同和不相同的值”,感兴趣的朋友不妨来看看。本文介绍的方法操作 香港云主机简单快捷,实用性强。下面就让小编来带大家学习“js怎么获取两个数组及数组对象中相同和不相同的值”吧!1、获取两个数组中相同的元素2、获取…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 08/15 09:51
下一篇 08/15 09:51

相关推荐