//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源码：源码 | 本地下载
    

    总结
    

    以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。
    
                
            
              
            
            
            
             
                
    热门推荐
     
                                        
    1 毛坯房验收经验和常识 看了之后再验房心里有底
      
                                        
    2 二手房收房如何交接 二手房收房注意问题
      
                                        
    3 专业验收毛坯房的价格 商品房验收合格的标准
      
                                        
    4 精装房怎么验收 精装房请验房师有用吗
      
                                        
    5 一般要到哪里找验房师 验房师有哪些作用呢
      
                                        
    6 请人验房一般是多少钱 验房师费用是多少
      
                                        
    7 怎样测量房子面积 建筑面积和使用面积怎么算
      
                                        
    8 收房需要注意什么 仔细检查不松懈
      
                                        
    9 收房时三书一证一表是什么 主要作用介绍
      
                                        
    10 交房时交房税费有哪些 本文为你一一讲解
      
                                        
    11 验房都需要验什么 要做哪些准备呢
      
                                        
    12 毛坯房验房师有必要请吗 毛坯房装修完如何验收
      
                                        
    13 地下室防水工程质量验收规范详解
      
                                        
    14 水性涂料、油性涂料区别介绍
      
                                        
    15 零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包
      
                                        
    16 三棵树漆怎么样？三棵树漆官方网站
      
                                        
    17 家庭“装修套餐”中猫腻你知道吗？
      
                                        
    18 小空间大浴望 卫浴间装修巧支招