方法一：用tab建切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="echarts.js"></script>
<style>
.btns input{
width:100px;
height: 40px;
background-color: #ddd;
border: 0;
}
.btns .current{
background-color: gold;
}
.cons .active{
display: block;
}
.tab1{
width: 500px;
height: 300px;
}
.none {
display: none;
}
</style>
<script>
$(function () {
var $btn = $('.btns input');
var $div = $('.cons div');
$btn.click(function () {
$(this).addClass('current').siblings().removeClass('current');
$('.cons .item').eq($(this).index()).addClass('active').siblings('.item').removeClass('active');
})
})
</script>
</head>
<body>
<div class="btns">
<input type="button" name="" value="01" class="current">
<input type="button" name="" value="02">
<input type="button" name="" value="03">
</div>
<div class="cons">
<div class="clearfloat item none active">
<div id="tab1" class="tab1"></div>
</div>
<div class="clearfloat item none">
<div id="tab2" class="tab1"></div>
</div>
<div class="clearfloat item none">
<div id="tab3" class="tab1"></div>
</div>
</div>
<script type="text/javascript">
(function () {
var myChart1 = echarts.init(document.getElementById('tab1'));
var option1 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [2,2.5 , 3.3, 4.5, 6.3, 10.2, 20.3],
type: 'line'
}]
};
// 为echarts对象加载数据
myChart1.setOption(option1);
var myChart2 = echarts.init(document.getElementById('tab2'));
var option2 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
myChart2.setOption(option2);
var myChart3 = echarts.init(document.getElementById('tab3'));
var option3 = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]};
myChart3.setOption(option3);
})()
</script>
</body>
</html>
效果：
方法二：利用下拉列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条</title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="echarts.js" type="text/javascript" ></script>
<script>
$(function(){
var li = $('#tabs');
var cc=$('#tabs option');
var len=cc.length;
li.change(function(){
var t = parseInt(li.get(0).selectedIndex);
for(var i= 0;i<len;i++){
if(t==i){
$('#chanpin'+t).show();
}else{
$('#chanpin'+i).hide();
}
}
});
});
</script>
<style>
.selector{
margin: 17px 15px 0 0 ;
float: right;
}
#content .active{
display: block;
}
.chart{
width: 400px;
height: 300px;
}
.none {
display: none;
}
</style>
</head>
<body>
<select name="status" id="tabs" class="selector">
<!--<option>ALL</option>-->
<option>表1</option>
<option>表2</option>
<option>表3</option>
</select>
<div id="content">
<div id ="chanpin0" class="none active">
<div id ="main1" class="chart" ></div>
<!--我们是共产主义接班人！！-->
</div>
<div id ="chanpin1" class="none">
<div id ="main2" class="chart" ></div>
</div>
<div id ="chanpin2" class="none">
<div id ="main3" class="chart" ></div>
</div>
</div>
<script type="text/javascript">
(function () {
var myChart1 = echarts.init(document.getElementById('main1'));
var option1 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [2,2.5 , 3.3, 4.5, 6.3, 10.2, 20.3],
type: 'line'
}]
};
// 为echarts对象加载数据
myChart1.setOption(option1);
var myChart2 = echarts.init(document.getElementById('main2'));
var option2 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
myChart2.setOption(option2);
var myChart3 = echarts.init(document.getElementById('main3'));
var option3 = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]};
myChart3.setOption(option3);
})()
</script>
</body>
</html>
效果图：
参考自https://blog.csdn.net/luoyangxa/article/details/83510501
当在切换时有的时候第二图不会正常显示，是因为echarts不能识别到你设置的百分比宽度
解决方案一：设置成固定宽度