//echarts自适应
varcharts=[];
varchart1=echarts.init(document.getElementById("left1"));
varchart2=echarts.init(document.getElementById("left2"));
varchart3=echarts.init(document.getElementById("right11"));
varchart4=echarts.init(document.getElementById("right12"));
varchart5=echarts.init(document.getElementById("right21"));
varchart6=echarts.init(document.getElementById("right22"));
chart1.setOption(option1);
chart2.setOption(option1);
chart3.setOption(option2);
chart4.setOption(option2);
chart5.setOption(option1);
chart6.setOption(option1);
charts.push(chart1);
charts.push(chart2);
charts.push(chart3);
charts.push(chart4);
charts.push(chart5);
charts.push(chart6);
$(window).resize(function(){
for(vari=0;i
下面看一个实现的demo:
demo完成内容：
1.bootstrap实现响应式布局
2.echats实现自适应
3.标签页切换、缩放正常显示
1
2
3
4
5
varcharts=[];
varchart1=echarts.init(document.getElementById("left1"));
varchart2=echarts.init(document.getElementById("left2"));
varchart3=echarts.init(document.getElementById("right11"));
varchart4=echarts.init(document.getElementById("right12"));
varchart5=echarts.init(document.getElementById("right21"));
varchart6=echarts.init(document.getElementById("right22"));
chart1.setOption(option1);
chart2.setOption(option1);
chart3.setOption(option2);
chart4.setOption(option2);
chart5.setOption(option1);
chart6.setOption(option1);
charts.push(chart1);
charts.push(chart2);
charts.push(chart3);
charts.push(chart4);
charts.push(chart5);
charts.push(chart6);
$(window).resize(function(){
for(vari=0;i
.css_height{
height:400px;
margin-top:30px;
}
.css_height1{
height:400px;
margin-top:72px;
}
.right_title{
width:90%;
margin-left:10%;
}
.nav>li>a{
padding:5px18px;
margin-top:10px;
}
body{
background-color:#009688;
}
.container{
background-color:#dcedf5;
margin-top:25px;
border-radius:15px;
}
option1={
title:{
text:'未来一周气温变化',
subtext:'纯属虚构'
},
tooltip:{
trigger:'axis'
},
xAxis:{
type:'category',
boundaryGap:false,
data:['周一','周二','周三','周四','周五','周六','周日']
},
yAxis:{
type:'value',
axisLabel:{
formatter:'{value}°C'
}
},
series:[{name:'最高气温',type:'line',data:[11,11,15,13,12,13,10],
markPoint:{
data:[
{type:'max',name:'最大值'},
{type:'min',name:'最小值'}
]
},
markLine:{
data:[
{type:'average',name:'平均值'}
]
}
},
{
name:'最低气温',
type:'line',
data:[1,-2,2,5,3,2,0],
markPoint:{
data:[
{name:'周最低',value:-2,xAxis:1,yAxis:-1.5}
]
},
markLine:{
data:[
{type:'average',name:'平均值'},
[{symbol:'none',x:'90%',yAxis:'max'},{symbol:'circle',label:{normal:{position:'start',formatter:'最大值'}},type:'max',name:'最高点'}]
]
}
}
]
};
option2={
title:{
text:'大规模散点图'
},
legend:{
data:['sin','cos']
},
xAxis:[{type:'value',scale:true}],
yAxis:[{type:'value',scale:true}],
series:[{name:'sin',type:'scatter',large:true,symbolSize:3,data:(function(){vard=[];
varlen=10000;
varx=0;
while(len--){
x=(Math.random()*10).toFixed(3)-0;
d.push([
x,
//Math.random()*10
(Math.sin(x)-x*(len%2?0.1:-0.1)*Math.random()).toFixed(3)-0
]);
}
//console.log(d)
returnd;
})()
},
{
name:'cos',
type:'scatter',
large:true,
symbolSize:2,
data:(function(){
vard=[];
varlen=20000;
varx=0;
while(len--){
x=(Math.random()*10).toFixed(3)-0;
d.push([
x,
//Math.random()*10
(Math.cos(x)-x*(len%2?0.1:-0.1)*Math.random()).toFixed(3)-0
]);
}
//console.log(d)
returnd;
})()
}
]
};
demo效果链接： demo
github源码：源码 | 本地下载
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。
热门推荐
-
返回顶部
-
514930285
-
czq8825@qq.com