echarts实现一个页面多个饼状图共用方法的封装

封装想法来源:当初在进行数据的处理时,想着如果能够用一种可视化的效果来呈现那用户体验绝非一般了,于是借用了功能强大的百度Echarts,由于Echarts本身渲染图表的时候,除了需要给出需要展示的数据值(data)之外,Echarts自带的一些配置参数重复写多次也是一件开发效率极低的事,因此,就想着把Echarts的配置参数封装到一个方法中,集体调用,需要做某些小改动时再传递相应的参数即可。

<!--效果-->


       Echarts类库下载网址: http://echarts.baidu.com/download.html

<script src="../echarts.js"></script>   //echarts类库的引入

<!--具体参数的处理-->

var warnNum = '40%';   //参数举例
var joinAllMan= '60%';  //参数举例
var warnStates = (function(){
    var warnNumCount = warnNum;
    var joinAllManCount = joinAllMan;
    return {
        warnStatesData : function(){
            var res 
可以使用 JavaScript 和 CSS 实现选项卡共用一个页面的效果。具体实现方法如下: 1. 使用 HTML 创建选项卡的结构,每个选项卡对应一个链接和一个内容区域: ``` <div class="tab"> <a href="#tab-1" class="tab-link active">Tab 1</a> <a href="#tab-2" class="tab-link">Tab 2</a> <a href="#tab-3" class="tab-link">Tab 3</a> </div> <div class="tab-content"> <div id="tab-1" class="tab-pane active"> Content for Tab 1 </div> <div id="tab-2" class="tab-pane"> Content for Tab 2 </div> <div id="tab-3" class="tab-pane"> Content for Tab 3 </div> </div> ``` 2. 使用 CSS 样式隐藏所有的内容区域,除了第一个选项卡对应的内容区域: ``` .tab-content .tab-pane { display: none; } .tab-content .active { display: block; } ``` 3. 使用 JavaScript 监听选项卡链接的点击事件,切换对应的内容区域的显示: ``` var tabLinks = document.querySelectorAll('.tab-link'); var tabPanes = document.querySelectorAll('.tab-pane'); for (var i = 0; i < tabLinks.length; i++) { tabLinks[i].addEventListener('click', function(e) { e.preventDefault(); // Remove active class from all tab links for (var j = 0; j < tabLinks.length; j++) { tabLinks[j].classList.remove('active'); } // Add active class to clicked tab link this.classList.add('active'); // Hide all tab panes for (var k = 0; k < tabPanes.length; k++) { tabPanes[k].classList.remove('active'); } // Show clicked tab pane var targetPane = this.getAttribute('href'); document.querySelector(targetPane).classList.add('active'); }); } ``` 以上代码实现了简单的选项卡功能,并且所有的选项卡共用一个页面
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值