<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>WAP</title>
</head>
<body>
<p style="height:50px;text-align:center;"><span>WAP</span></p>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<p id="main" style="height:500px;"></p>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/line',
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['baidu','google','sm','sogou','so','yesterday_str','count']
},
toolbox: {
show : false,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
grid:{
y:120,
},
xAxis : [
{
type : 'category',
boundaryGap : false,
<?php
$con = mysql_connect("127.0.0.1","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_query("SET NAMES UTF8");
mysql_select_db("rizhifenxi", $con);
$result = mysql_query("select * from wapliuliang order by yesterday_str");
echo 'data : [';
while($row = mysql_fetch_array($result))
{
echo "'".$row['yesterday_str']."'";
echo ",";
}
echo ']';
mysql_close($con);
?>
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value}'
}
}
],
series : [
<?php
$con = mysql_connect("127.0.0.1","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_query("SET NAMES UTF8");
mysql_select_db("rizhifenxi", $con);
$result = mysql_query("select * from wapliuliang order by yesterday_str");
for ($x=1;$x<=7;$x++) {
$re_name = mysql_field_name($result,$x);
echo " {name:'".$re_name."',type:'line',line: '总量',data:[ ";
while($row = mysql_fetch_array($result))
{
echo $row[$x].',';
}
echo ']},';
mysql_data_seek($result,0);
}
mysql_close($con);
?>
]
};
// 为echarts对象加载数据
myChart.setOption(option);
// 加上这一句即可
window.onresize = myChart.resize;
}
);
</script>
</body>
为什么加上window.onresize = myChart.resize;这句还是自适应失败呢？
怎么样才能够实现自适应手机呢？
你改成
在echarts的resize方法中应该用到了
this，按照你的赋值方式，发生窗口大小变化时，这个this将指代window，而没有去操作echart。楼上正解 window.onreszie = function(){ myChart.size()}
楼上正解 window.onreszie = function(){ myChart.size()}