@跃焱邵隼
解决swiper复制容器的问题
<div class="swiper-container" id="swiperContainer-1">
<div class="swiper-wrapper">
<div class="swiper-slide slide1">
<div class="box-table">
<table>
<colgroup>
<col width="30%">
<col width="25%">
<col width="25%">
<col width="20%">
</colgroup>
<tbody>
<tr>
<td></td>
<td>数值(万元)</td>
<td>全国占比(%)</td>
<td>全国排名</td>
</tr>
<tr>
<td>2017年资产总额</td>
<td><span class="td-span">400.93</span></td>
<td><span class="td-span">5.03</span></td>
<td><span class="td-span">18</span></td>
</tr>
<tr>
<td>本年度收益总额</td>
<td><span class="td-span">400.93</span></td>
<td><span class="td-span">5.03</span></td>
<td><span class="td-span">18</span></td>
</tr>
</tbody>
</table>
</div>
<div class="box-echarts myecharts-1">
</div>
</div>
<div class="swiper-slide slide2">
<div class="myecharts1a-tit">
2017安徽省农村居民人均可支配收入组成
</div>
<div class="myecharts1a">
</div>
</div>
<div class="swiper-slide slide3">
<div class="myecharts1b-tit">
<div class="myecharts1b-smalltit">农业产业化龙头企业个数</div>
<ul class="clearfix">
<li class="bg-none">
<div class="myecharts1b-diva">5317</div>
<div class="myecharts1b-divb">市级</div>
</li>
<li>
<div class="myecharts1b-diva">317</div>
<div class="myecharts1b-divb">省级</div>
</li>
<li>
<div class="myecharts1b-diva">17</div>
<div class="myecharts1b-divb">国家级</div>
</li>
</ul>
</div>
<div class="myecharts1b">
</div>
</div>
</div>
</div>
js代码：
var myChart1=document.getElementsByClassName('myecharts-1');
for(var i=0;i<myChart1.length;i++){
var option= {
grid: {
left: '3%', //grid 组件离容器左侧的距离。
top:'22%',
right: '4%', //grid 组件离容器右侧的距离。
bottom: '8%', //grid 组件离容器下侧的距离。
containLabel: true //grid 区域是否包含坐标轴的刻度标签[ default: false ]
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
title:{
text:'全国农村人民人均可支配收入',
textStyle:{
fontSize:10,
color:'#ffffff'
},
left:60,
top:10
},
xAxis: [{
type: 'category',
boundaryGap: true, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
axisLine: {
lineStyle: {
color: '#858585' //坐标轴线线的颜色。
}
},
axisLabel:{
interval:0,
textStyle: {
fontSize: 10, //文字的字体大小
color:'#fdfdfd'
}
},
data: ['2013', '2014', '2015', '2016', '2017']
}],
yAxis: [{
type: 'value', //坐标轴类型。'value' 数值轴，适用于连续数据;'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据;'time' 时间轴;'log' 对数轴.
name: '', //坐标轴名称。
min:400,
max:4000,
axisTick: {
show: false //是否显示坐标轴刻度
},
axisLine: {
lineStyle: {
color: '#858585' //坐标轴线线的颜色
}
},
axisLabel: {
margin: 10, //刻度标签与轴线之间的距离
textStyle: {
fontSize: 10, //文字的字体大小
color:'#fdfdfd'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.1)' //分隔线颜色设置
}
}
}],
series: [
{
name:'人均收入',
type:'pictorialBar',
symbolSize: ['19', '90%'], //设置图片background-size
symbolPosition: 'start', //设置图形起使位置
z: 10,
data: [{
value: 3649,
symbol: 'image://../images/bar.png'
}, {
value: 3819,
symbol: 'image://../images/bar.png'
}, {
value: 4326,
symbol: 'image://../images/bar.png'
}, {
value: 5269,
symbol: 'image://../images/bar.png'
},
{
value: 5571,
symbol: 'image://../images/bar.png'
}]
}
]
};
echarts.init(myChart1[i]).setOption(option);
}
var myChart1a=document.getElementsByClassName('myecharts1a');
for(var i=0;i<myChart1a.length;i++){
option = {
color:['#0f6ac3','#3a4392','#3399ff','#004ab8'],
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
top:30,
right:0,
data:['工资性收入','经营性收入','财产性收入','转移性收入'],
orient:'vertical',
textStyle:{
color:'#fff',
fontSize:10
}
},
calculable : true,
series : [
{
name:'半径模式',
type:'pie',
radius : [40, 70],
center : ['40%', '45%'],
roseType : 'radius',
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
lableLine: {
normal: {
show: false
},
emphasis: {
show: true
}
},
data:[
{value:35, name:'工资性收入'},
{value:30, name:'经营性收入'},
{value:25, name:'财产性收入'},
{value:20, name:'转移性收入'}
]
}
]
};
echarts.init(myChart1a[i]).setOption(option);
}
var myChart1b=document.getElementsByClassName('myecharts1b');
for(var i=0;i<myChart1b.length;i++){
var option= {
title:{
text:'本年度每月的农产品加工业产值增幅走势',
textStyle:{
color:'#00f0ff',
fontSize:10
},
left:'22%',
top:10
},
tooltip: {
trigger: 'axis',
formatter:function (params) {
var relVal = params[0].name+'月';//单位
for (var i = 0, l = params.length; i < l; i++) {
relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value+"%";//单位
}
return relVal;
}
},
legend: {
data:['粮食产品','肉类总产','水产品产量','蔬菜产量','茶叶产量'],
orient: 'horizontal',
top:'0',
right:'0',
textStyle:{
color:'#fff',
fontSize:10
}
},
grid: {
left: '10',
top:'40',
right: '40',
bottom: '2',
containLabel: true
},
xAxis: {
type: 'category',
name:'月',
nameTextStyle:{
color:'#fff',
fontSize:10
},
boundaryGap: false,
data: ['1','2','3','4','5','6','7','8','9','10','11','12'],
axisLine :{
lineStyle:{
color: '#858585',
width:'1'
}
},
axisLabel:{
textStyle:{
fontSize:10,
color:'#fdfdfd'
}
},
axisTick:{
show:false
},
splitLine:{
show:false,
lineStyle:{
color: 'rgba(255,255,255,0.8)'
}
}
},
yAxis: {
type: 'value',
name:'增幅（%）',
nameTextStyle:{
color:'#fff',
fontSize:10
},
axisLine :{
lineStyle:{
color: '#858585',
width:'1'
}
},
axisLabel:{
textStyle:{
fontSize:10,
color:'#fdfdfd'
}
},
axisTick:{
show:false
},
splitLine:{
show:false,
lineStyle:{
color: 'rgba(255,255,255,0.8)'
}
}
},
series: [
{
name:'增幅',
type:'line',
stack: '总量',
data:[10, 12, 21, 34, 20, 32, 11, 34, 30, 12, 11,41],
color:'#40c4ff',
symbol:'circle'
}
]
};
echarts.init(myChart1b[i]).setOption(option);
}