zoukankan      html  css  js  c++  java
  • 分享插件的使用加一个echart走数据

    html部分:

    <div class="topLink clearfix bdsharebuttonbox  bdshare-button-style0-16" data-bd-bind="1489453330399" style="display: block;">
    <a class="fl" href="http://www.shumenol.com/index.html" target="_blank">官网</a>
    <a class="fl" href="https://zhuce.shumenol.com/member/user_reg.aspx" target="_blank">注册</a>
    <a class="fl" href="http://www.shumenol.com/html/download/" target="_blank">下载</a>
    <a class="fl" href="http://bbs.shumenol.com/forum.php">论坛</a>
    <a class="fl" href="javascript:;" data-cmd="more">分享+</a>
    </div>

    这里变红的地方是插件自带的必须加上

    css部分

    .bdselect_share_bg,.bdshare_popup_bg,.bdselect_share_box,.sr-bdimgshare,.bdshare_popup_box{display:none!important;}

    js部分

    //百度分享
    window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"快来领取豪华福利吧!","bdMini":"2","bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"tag" : "noshareimg","viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到:","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
    var deleteMk="0";
    function deleteBdStyle(){

    var links=$("link");
    for(var i=0;i<links.length;i++){
    if($(links.get(i)).attr("href").indexOf("share_style0_16.css")!=(-1)){
    $(links.get(i)).remove();
    deleteMk="1";
    }
    }
    if(deleteMk=="0"){
    setTimeout(function(){deleteBdStyle();},1000)
    }else{
    $(".topLink").show();//注意这个你是控制加了插件样式的容器的
    }

    }
    deleteBdStyle();

    如果你出现了以下BUG

    那说明

    .indexWrap .topLink{
    position: absolute;
    right:-16px;
    top:2px;
    211px;
    height:34px;
    line-height:34px;
    font-family: "Microsoft yahei";
    padding-left:6px;
    background:url(../images/topBar_bg.png) no-repeat;
    display:none;//你这个父容器没加隐藏,记住你js的else{里面控制了他的显示}
    }

    /*jquery echart.js走数据*/

    <div class="form-group">
       <div id="main" style=" 100%;height:600px;"></div>
    </div>

    js部分

    <script language="JavaScript">
    var myChart = echarts.init(document.getElementById('main'));
    function chart(){
        $.ajax({
            type:'get',
            url:"${base}/platform/cms/statistics/countModel",
            success:function(data){
                var category=[];
                var categoryNum=[];
                for(var i=0;i<data.length;i++){
                    category[i]=data[i].modelName;
                    categoryNum[i]=data[i].countNum;
                }
                myChart.setOption({
                         color: ['#3398DB'],
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                            type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : category,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'访问量',
                            type:'bar',
                            barWidth: '60%',
                            data: categoryNum
                        }
                    ]
             })
            }
        })
    }
    </script>
    日常所遇,随手而记。
  • 相关阅读:
    python基础学习1-函数相关
    python基础学习1-SET 集合
    Linux命令学习笔记1
    python基础学习1-字典的使用
    python基础学习1-列表使用
    Jzoj4743 积木
    Jzoj4786 小a的强迫症
    Jzoj4746 树塔狂想曲
    Jzoj5246 Trip
    Jzoj5245 Competing Souls
  • 原文地址:https://www.cnblogs.com/zhihou/p/6546750.html
Copyright © 2011-2022 走看看