3
回答
【JFinal-weixin】手机端开发echart问题
【腾讯云】学生服务器套餐10元/月 >>>   

在采用jifinal微信开发的过程中发现一个问题:

页面使用echart进行图表显示,当初次渲染该页面的时候无图表,必须刷新页面之后才会显示图表

有人遇到过这种问题吗?如何解决?

举报
00oo
发帖于3年前 3回/338阅

以下是问题补充:

共有3个答案 最后回答: 3年前
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>1</title>
    <!-- jQuery Mobile css -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
  </head>
  <body>
		<div data-role="page">
			<div data-role="navbar">
	      <ul>
	        <li><a href="/?openid=${openid}" data-icon="user">个人主页</a></li>
	        <li><a href="#" data-icon="star">今天</a></li>
	        <li><a href="#" id="switch" data-icon="recycle">日数据</a></li>
	      </ul>
	    </div>
			
		  <div data-role="content">
			  <ul data-role="listview" data-inset="true">
		      <li>
		      <div style="text-align:center"><h1>数据</h1></div>
		      <input type="hidden" value="${openid!}" id="openid" name="openid">
		      <div id="main" style="height:200px"></div>
		      </li>
		    </ul>
		  </div>
		  
		  <div data-role="footer">
		    <h1>0.0</h1>
		  </div>
		</div> 

    <!-- jQuery-->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- jQuery Mobile插件 -->
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <!-- echarts 图表插件 -->
    <script src="js/dist/echarts.js"></script>    
      <script type="text/javascript">
      $(document).ready(function(){
    	  
        // 路径配置
        require.config({
            paths: {
                echarts: 'js/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
            ],
            function (ec) {
                // 基于准备好的dom,初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                
                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",
                            "data":[5, 20, 40, 10, 10, 20]
                        }
                    ]
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
      });
    </script>
  </body>
</html>



   先确定一下渲染出来的 html 有无问题,在请求过后,在浏览器中右键看 html 代码有无错误
--- 共有 6 条评论 ---
JFinal回复 @00oo : SO DES NE 3年前 回复
00oo回复 @JFinal : 后来改成echart的示例代码也显示不了,这个跟jfinal没关系了应该 3年前 回复
00oo回复 @mi-la-king : 浏览器模拟也是正常的,就是通过微信打开就失败。 3年前 回复
mi-la-king回复 @00oo : 模拟下手机浏览器 3年前 回复
JFinal回复 @00oo : 估计是css 或 js 的问题,对于后端来说都是同一份代码 3年前 回复
顶部