<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>WAP</title>
</head>
<body>
<p style="height:50px;text-align:center;"><span>WAP</span></p>
<!-- Prepare a Dom with size (width and height) for ECharts -->
<p id="main" style="height:500px;"></p>
<!-- ECharts single file introduction -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// path configuration
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// use
require(
[
'echarts',
'echarts/chart/line',
],
function (ec) {
// Based on the prepared dom, initialize the echarts chart
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: 'Total amount',data:[ ";
while($row = mysql_fetch_array($result))
{
echo $row[$x].',';
}
echo ']},';
mysql_data_seek($result,0);
}
mysql_close($con);
?>
]
};
//Load data for the echarts object
myChart.setOption(option);
// Just add this sentence
window.onresize = myChart.resize;
}
);
</script>
</body>
Why does the adaptation fail even after adding window.onresize = myChart.resize;?
How can we achieve adaptive mobile phones?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You change it to
It should be used in the resize method of echarts. According to your assignment method, when the window size changes, this will refer to the window instead of operating echart.
thisCorrect answer upstairs window.onreszie = function(){ myChart.size()}
Correct answer upstairs window.onreszie = function(){ myChart.size()}