@跃焱邵隼
解决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); }