EChart在移动端显示加这个就行
在PC端正常显示的代码里
//使用刚指定的配置项和数据显示图表。
barChart.setOption(optionBar)后面加上这句话
window.addEventListener("resize", function() {
barChart.resize();
});就能在移动端显示了
以下源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.js"></script>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="barChart" style="width: 720px; height: 1280px;"></div>
<div id="pieChart" style="width: 720px; height: 1280px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var barChart = echarts.init(document.getElementById('barChart'));
var pieChart = echarts.init(document.getElementById('pieChart'));
// 指定图表的配置项和数据
var optionBar = {
title : {
text : '每日流量使用概况'
},
tooltip : {},
legend : {
data : [ '流量' ]
},
xAxis : {
data : []
},
yAxis : {},
series : [ {
name : '流量',
type : 'bar',
data : []
} ]
};
var optionPie = {
tooltip : {
trigger : 'item',
formatter : "{a} <br/>{b}: {c} ({d}%)"
},
legend : {
orient : 'vertical',
x : 'left',
data :[]
},
series : [ {
name : '访问来源',
type : 'pie',
radius : [ '50%', '70%' ],
avoidLabelOverlap : false,
label : {
normal : {
show : false,
position : 'center'
},
emphasis : {
show : true,
textStyle : {
fontSize : '30',
fontWeight : 'bold'
}
}
},
labelLine : {
normal : {
show : false
}
},
data : []
} ]
};
$.ajax({
url : "http://10.48.40.138/work15/dataFlowServlet",
success : function(df) {
var dataFlow = [];
var xAxisList = new Array();
var seriesList = new Array();
var day;
var data;
for (var i = 0; i < df.length; i++) {
//柱状图
day = df[i].day;
xAxisList.push(day);
data = df[i].data
seriesList.push(data);
//饼状图
var json = {};
json.value = parseFloat(data);
json.name = day;
dataFlow.push(json);
}
optionBar.xAxis.data = xAxisList;
optionBar.series[0].data = seriesList;
optionPie.legend.data=xAxisList;
optionPie.series[0].data = dataFlow;
// 使用刚指定的配置项和数据显示图表。
barChart.setOption(optionBar);
pieChart.setOption(optionPie);
window.addEventListener("resize", function() {
barChart.resize();
});
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.js"></script>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="barChart" style="width: 720px; height: 1280px;"></div>
<div id="pieChart" style="width: 720px; height: 1280px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var barChart = echarts.init(document.getElementById('barChart'));
var pieChart = echarts.init(document.getElementById('pieChart'));
// 指定图表的配置项和数据
var optionBar = {
title : {
text : '每日流量使用概况'
},
tooltip : {},
legend : {
data : [ '流量' ]
},
xAxis : {
data : []
},
yAxis : {},
series : [ {
name : '流量',
type : 'bar',
data : []
} ]
};
var optionPie = {
tooltip : {
trigger : 'item',
formatter : "{a} <br/>{b}: {c} ({d}%)"
},
legend : {
orient : 'vertical',
x : 'left',
data :[]
},
series : [ {
name : '访问来源',
type : 'pie',
radius : [ '50%', '70%' ],
avoidLabelOverlap : false,
label : {
normal : {
show : false,
position : 'center'
},
emphasis : {
show : true,
textStyle : {
fontSize : '30',
fontWeight : 'bold'
}
}
},
labelLine : {
normal : {
show : false
}
},
data : []
} ]
};
$.ajax({
url : "http://10.48.40.138/work15/dataFlowServlet",
success : function(df) {
var dataFlow = [];
var xAxisList = new Array();
var seriesList = new Array();
var day;
var data;
for (var i = 0; i < df.length; i++) {
//柱状图
day = df[i].day;
xAxisList.push(day);
data = df[i].data
seriesList.push(data);
//饼状图
var json = {};
json.value = parseFloat(data);
json.name = day;
dataFlow.push(json);
}
optionBar.xAxis.data = xAxisList;
optionBar.series[0].data = seriesList;
optionPie.legend.data=xAxisList;
optionPie.series[0].data = dataFlow;
// 使用刚指定的配置项和数据显示图表。
barChart.setOption(optionBar);
pieChart.setOption(optionPie);
window.addEventListener("resize", function() {
barChart.resize();
});
}
});
</script>
</body>
</html>