echars绘制图表,切换页面后返回,无刷新数据图表不显示问题;

使用echars图表时,layui框架中,切换页面时,在火狐浏览器图表不显示问题情况;

图表效果如下:

代码如下:

1、html:

 <div  id="cumstorZ" style="height:360px;width: 100%;min-width: 996px;"></div>

2、Javascript:

       //调用
         canvsEr('mydram',['235','100','152'],['小米','色粉','而非是'],['235','100','152']);
        /*** 绘图
            * @id 绑定页面id
            * @totallist 订单金额数据:eg:['235','100','152']
            * @namelist  名字数据:eg:['小米','色粉','而非是']
            * @selllist 销量数据:eg:['235','100','152']
          ****/
        function canvsEr(id,totallist,namelist,selllist) {
            var  option = {
                legend: {
                    data:['订单金额(元)','销量'],
                    scale: true,
                    right:'50%'
                },
                grid: [ {
                    top: '15%',
                    left: '1%',
                    scale: true,
                    right: '15%',
                    containLabel: true
                }],
                xAxis: {
                    type: 'category',
                    scale: true,
                    data: namelist,
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '订单金额(元)',
                        position: 'left',
                        scale: true,
                        min:0,
                        max:Math.max.apply(null,totallist),
                        axisLabel: {
                            formatter: '{value}'
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '销量',
                        scale: true,
                        min:0,
                        max:Math.max.apply(null,selllist),
                        position: 'right',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        }
                    },
                ],
                series: [
                    {
                        name: '订单金额(元)',
                        type: 'bar',
                        scale: true,
                        data:totallist,
                        itemStyle: {
                            normal: {
                                color: '#2ec7c9',
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        }
                    },
                    {
                        name: '销量',
                        type: 'bar',
                        yAxisIndex: 1,
                        scale: true,
                        data: selllist,
                        itemStyle: {
                            normal: {
                                color: '#ff6450',
                            }
                        },
                    }
                ]
            };
            document.getElementById(id).style.display = "block";
            document.getElementById(id).style.minWidth = "960px";
            document.getElementById(id).style.height = "360px";
            var myChart = echarts.init(document.getElementById(id));
            window.onresize = myChart.resize();
            myChart.setOption(option, true);
        }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值