有没有小哥哥知道怎么在弹出框里放一个饼状图?

提问 已结
17 917
带风i
带风i 2018-4-13
悬赏:20飞吻
版本:layui 浏览器:Google
把这个



放在这个里面

回帖
  • 小姐姐回答可以吗[哈哈]
    <div id = 'pie'></div>
    layer.open({
    type: 1,
    title: '我是饼图',
    content: $('#pie')
    });
    0 回复
  • 带风i
    2018-4-13
    @Unscrupulous @茉莉 @岁月小偷 @一个神奇的土豆 @驊驊龔頾

    现在实现了我想要的效果了,数据是在数据库中查找的,





    谢谢你们 么么~~~
    1 回复
  • 获取页面层
    0 回复
  • 带风i
    2018-4-13
    @Unscrupulous 好哒,我去试下,谢谢小姐姐 么么~
    0 回复
  • 带风i
    2018-4-13
    @一个神奇的土豆 获取弹出框的页面层吗?
    0 回复
  • 这个应该只能用iframe层弹出,因为页面层默认是隐藏的,也就是没有宽高,这样的话获取不到父级的宽高就会造成饼状图没有宽高的情况,当然也可以在弹出层以后给个延迟时间生成饼状图
    0 回复
  • 实现方式多种多样,关键的一个问题是这个饼图是不是原来就有的,如果有的话可以用
    layer.open({
    type: 1,
    content: $('#id') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
    })
    content设置为你想要显示的区域的dom就可以了,但是这个官方也说了最好放在body的最外层,不然可能会有影响,反正我试了一下很多不方便的地方后面基本不用。都用动态的加载。如下
    layer.open({
    type: 1,
    content: '<div id="test_id"></div>',
    success: function(layero, index){
    // 这里就自由发挥了,你想要是一个啥就写啥。
    $('#test_id').html('<span>Hello</span>');
    }
    })
    0 回复
  • 茉莉
    2018-4-13
    @带风i
    效果是这样吗,在弹窗内容中插入图表就行啦,图表要控制宽度跟高度
    0 回复
  • 带风i
    2018-4-13
    @驊驊龔頾 好哒 我试下 谢谢~
    0 回复
  • 带风i
    2018-4-13
    @茉莉 哇 我就是想要这个 好棒,怎么做的
    0 回复
  • 带风i
    2018-4-13
    @岁月小偷 饼图是点弹出按钮的时候在数据库查出数据之后再渲染的。
    0 回复
  • @带风i 用方法二,在content中你只要放一个容器就可以了,后续的查数据渲染都放在success里面去做,用echarts绘制到你刚才设置的那个容器里面去就可以了。
    0 回复
  • 茉莉
    2018-4-13
    @带风i
    <div class="layui-pop" id="clickBtnView" style="display: none;">
    <div class="layui-fluid">
    <div class="layui-card">
    <div class="layui-card-body">
    <div id="echarts-pie" style="width: 580px;height:320px;"></div>
    </div>
    </div>
    </div>
    </div>
    js:
     $('#clickBtn').on('click', function () {
    layer.open({
    type: 1,
    title: '信息',
    area: '640px',
    shadeClose: true, //点击遮罩关闭
    content: $('#clickBtnView'),
    btnAlign: 'c'
    , btn: ['关闭']
    , yes: function (index, layero) {
    //按钮【按钮一】的回调

    layer.close(index);
    }
    , cancel: function (index, layero) {
    //右上角关闭回调

    //return false 开启该代码可禁止点击该按钮关闭
    }
    });
    });

    var echartsPie = echarts.init(document.getElementById('echarts-pie'));
    option = {
    /* title : {
    //text: '某站点用户访问来源',
    // subtext: '纯属虚构',
    x:'center'
    },*/
    tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
    orient: 'vertical',
    right: 'left',
    data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series : [
    {
    name: '访问来源',
    type: 'pie',
    radius : '55%',
    center: ['50%', '60%'],
    data:[
    {value:335, name:'直接访问'},
    {value:310, name:'邮件营销'},
    {value:234, name:'联盟广告'},
    {value:135, name:'视频广告'},
    {value:1548, name:'搜索引擎'}
    ],
    itemStyle: {
    emphasis: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
    }
    }
    ]
    };


    echartsPie.setOption(option);
    0 回复
  • 茉莉
    2018-4-13
    0 回复
  • 小青年a
    2018-4-18
    @带风i 你是怎么实现的?方便看下你代码吗?
    0 回复
  • 带风i
    2018-4-19
    @小青年a

    按钮


    按钮点击事件


    放统计图的div



    填充值

    0 回复
  • 小青年a
    2018-4-20
    @带风i 恩恩,好的,谢谢
    0 回复