俄罗斯贵宾会 > 操作系统 > Echarts自动轮播引导线的问题请教
Echarts自动轮播引导线的问题请教

图片 1

从Echarts社区拜望个实例认为很棒,想做到作者的图纸里。

 div/divscriptsrc="js/stationcentre.js"/scriptscriptsrc="js/stationlist.js"/scriptscriptsrc="js/stationvalue.js"/scriptscripttype="text/javascript"//基于准备好的dom,初始化echarts实例varMidMapChart=echarts.init(document.getElementById('MidMap'));//指定图表的配置项和数据functionloadScript(url,callback){varscript=document.createElement("script")script.type="text/javascript";if(script.readyState){//IEscript.onreadystatechange=function(){if(script.readyState=="loaded"||script.readyState=="complete"){script.onreadystatechange=null;callback();}};}else{//Othersscript.onload=function(){callback();};}script.src=url;document.getElementsByTagName("head")[0].appendChild(script);}functiongetSeries(){varseries=[];[[mapData.title,BJData]].forEach(function(item,i){series.push({type:'lines',zlevel:2,effect:{show:true,period:3,//箭头指向速度,值越小速度越快trailLength:0.2,//特效尾迹长度[0,1]值越大,尾迹越长重symbol:'arrow',//箭头图标symbolSize:4,//图标大小},lineStyle:{normal:{width:1,//尾迹线条宽度opacity:0.03,//尾迹线条透明度curveness:.3//尾迹线条曲直度}},data:convertData(item[1])},{type:'effectScatter',coordinateSystem:'geo',zlevel:2,rippleEffect:{//涟漪特效period:4,//动画时间,值越小速度越快brushType:'stroke',//波纹绘制方式stroke,fillscale:8//波纹圆环最大限制,值越大波纹越大},label:{normal:{show:true,position:'right',//显示位置offset:[-25,-20],//偏移设置--台站formatter:'{b}'//圆环显示文字},emphasis:{show:true}},symbol:'circle',symbolSize:function(val){return4+val[2]/1000;//圆环大小},itemStyle:{normal:{show:false,color:'#f00'}},data:item[1].map(function(dataItem){return{name:dataItem[0].name,statusnow:dataItem[0].statusnow,value:geoCoordMap[dataItem[0].name].concat([dataItem[0].value])//增加内容};}),},//被攻击点{type:'scatter',coordinateSystem:'geo',zlevel:2,rippleEffect:{period:4,brushType:'stroke',scale:4},label:{normal:{show:true,position:'right',//offset:[5,0],color:'blue',//#00ffffformatter:'{b}',//offset:[0,-25],//文字的相对偏移textStyle:{color:"#00ffff"}},emphasis:{show:true}},symbol:'pin',symbolSize:40,//标志点大小itemStyle:{normal:{show:true,color:'green',//#9966ccblue//borderColor:'rgba(0,186,255,0.4)',//borderWidth:2}},//根据数据显示pin的颜色data:[{name:item[0],value:geoCoordMap[item[0]].concat([0]),//concat([0]为绿色//增加内容statusnow:item[2]}],});});returnseries;}varconvertData=function(data){varres=[];for(vari=0;idata.length;i++){vardataItem=data[i];varfromCoord=geoCoordMap[dataItem[0].name];varfromstaturs=geoCoordMap[dataItem[0].statusnow];vartoCoord=geoCoordMap[dataItem[1].name];if(fromCoordtoCoord){res.push([{coord:fromCoord,value:dataItem[0].value,},{coord:toCoord,}]);}}returnres;};//让圆环的提示框自动触发轮播显示functionautoHoverTip(){for(vari=0;icounts;i++){(function(i){ts=setTimeout(function(){MidMapChart.dispatchAction({type:'showTip',seriesIndex:1,dataIndex:i});},5000*i);})(i);}}varcolor=['#a6c84c','#ffa022','#46bee9'];vardataIndex=0,counts=0;loadScript(mapData.mapFile,function(){varoption4={backgroundColor:'',title:{text:'',subtext:'',left:'center',textStyle:{color:'#fff',//top:'0.05%',fontSize:18},//分别设置四个方向的内边距padding:[5,10,10,10]//上、右、下、左},tooltip:{trigger:'item',position:'right',//position:'top',backgroundColor:'rgba(12,204,104,0.8)',borderColor:'#FFFFCC',showDelay:0,hideDelay:0,enterable:true,transitionDuration:0,extraCssText:'z-index:100',formatter:function(params,ticket,callback){//根据业务自己拓展要显示的内容varres="";varname=params.name;varvalue=params.value[params.seriesIndex+1];varstatusnow=BJData[params.dataIndex][0].statusnow;res="spanstyle='color:#fff'"+name+"/spanbr/状态:"+statusnow;returnres;},},visualMap:{//图例值控制show:false,//不显示图例min:0,max:30,calculable:true,splitNumber:3,color:['red','yellow','#00EE00'],//颜色从高到低依次渐变#76EE00textStyle:{color:'#fff'}},geo:{map:mapData.mapName,label:{emphasis:{show:true//显示城市名}},roam:true,//是否允许缩放layoutCenter:['50%','50%'],//地图位置layoutSize:"100%",itemStyle:{normal:{color:'rgba(37,43,61,.5)',//地图背景色rgba(90,108,128,1)borderColor:'white'//省市边界线'rgba(100,149,237,1)'},emphasis:{color:'rgba(90,108,128,1)'//悬浮背景rgba(37,43,61,.5)}}},series:getSeries()};counts=option4.series[0].data.length;//获取所有闪动圆环数量setTimeout(function(){autoHoverTip();tv=setInterval(autoHoverTip,counts*3000);},500);//间隔20秒刷新数据MidMapChart.setOption(option4);myEcharts.push(MidMapChart);setInterval(function(){loadScript('js/stationvalue.js',function(){//MidMapChart.clear();option4.series=getSeries();MidMapChart.setOption(option4);//,true});},30000);});/script

stationlist.js文件内容如下:

vargeoCoordMap={"北京中心":[116.38,39.9],"昌平":[116.22,40.24],"沙河":[116.28,40.1],"通州":[116.8,39.816],"武清":[116.91,39.4],"丰台":[116.14,39.9],"十三陵":[116.2167,40.2498],"顺义":[116.5,40.3],"大兴":[116.3,39.6],"房山":[116.1,39.8],};

stationvalue.js文件内容如下:

varBJData=[[{name:'昌平',value:0,statusnow:'正常'},{name:'北京中心'}],[{name:'沙河',value:0,statusnow:'正常'},{name:'北京中心'}],[{name:'通州',value:0,statusnow:'正常'},{name:'北京中心'}],[{name:'武清',value:30,statusnow:'故障'},{name:'北京中心'}],[{name:'丰台',value:0,statusnow:'正常'},{name:'北京中心'}],[{name:'十三陵',value:0,statusnow:'正常'},{name:'北京中心'}],[{name:'顺义',value:0,statusnow:'正常'},{name:'北京中心'}],[{name:'大兴',value:0,statusnow:'正常'},{name:'北京中心'}],[{name:'房山',value:30,statusnow:'故障'},{name:'北京中心'}],];

stationcentre.js文件内容如下:

varmapData={title:'北京中心',mapFile:'js/beijing.js',mapName:'北京'};

请教难点:1、怎么把实例:加到作者的代码里完成这种效果与利益?2、下边实例中多少难题:倘使tooltip必要出示的文字过长,tooltip的宽度不会随文字长度大小改造进而体现得不全?3、尽管能促成下图这种边框的功用就太圆满啦!期望囧哥扶助!!!

上一篇:合并的问题谢谢 下一篇:没有了
返回列表