echarts的图表，如果在bootstracp等框架div是自适应宽度的，如果设置成100%，页面会出现问题，且不能正常的生成图表。所以div容器的高度宽度必须指定为px，下面是高度只适应的2种方法，pc端固定宽度，手机端自适应。
<div class="col-sm-12"> <hr> <div id="main"></div> </div>
1、自适应手机pc宽度、高度
<script type="text/javascript">
var worldMapContainer = document.getElementById('main');
var resizeWorldMapContainer = function () {
worldMapContainer.style.width = window.innerWidth+'px';
worldMapContainer.style.height = window.innerHeight+'px';
};
//设置容器高宽
resizeWorldMapContainer();
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '网站访问量数据分析'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['访问PV','访问IP']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'line']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
//data : ['周一','周二','周三','周四','周五','周六','周日']
data: {$data_time}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'访问IP',
type:'line',
stack: '总量',
itemStyle : {
normal : {
color:'#007500',
lineStyle:{
color:'#007500'
}
}
},
//data:[220, 182, 191, 234, 290, 330, 310]
data:{$count_ip}
},
{
name:'访问PV',
type:'line',
stack: '总量',
itemStyle : {
normal : {
color:'#ff0000',
lineStyle:{
color:'#ff0000'
}
}
},
data: {$count}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//用于使chart自适应高度和宽度
window.onresize = function () {
//重置容器高宽
resizeWorldMapContainer();
myChart.resize();
};
</script>2、固定pc宽度，自适应手机宽度、高度
<script type="text/javascript">
var worldMapContainer = document.getElementById('main');
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
var resizeWorldMapContainer = function () {
worldMapContainer.style.width = '100%';
worldMapContainer.style.height = '470'+'px';
};
}else{
var resizeWorldMapContainer = function () {
worldMapContainer.style.width = window.innerWidth+'px';
worldMapContainer.style.height = window.innerHeight+'px';
};
}
//设置容器高宽
resizeWorldMapContainer();
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '网站访问量数据分析'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['访问PV','访问IP']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'line']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
//data : ['周一','周二','周三','周四','周五','周六','周日']
data: {$data_time}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'访问IP',
type:'line',
stack: '总量',
itemStyle : {
normal : {
color:'#007500',
lineStyle:{
color:'#007500'
}
}
},
//data:[220, 182, 191, 234, 290, 330, 310]
data:{$count_ip}
},
{
name:'访问PV',
type:'line',
stack: '总量',
itemStyle : {
normal : {
color:'#ff0000',
lineStyle:{
color:'#ff0000'
}
}
},
data: {$count}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//用于使chart自适应高度和宽度
window.onresize = function () {
//重置容器高宽
resizeWorldMapContainer();
myChart.resize();
};
</script>