echarts按照时间显示柱状图_echarts时间轴和柱型图的结合

1 var all = {"data":[[1,1.5,0.5,1],[1,2,1.5,2],[3.5,3,2,3],[3,4,3.5,4.5],[4,6,4.5,5.5],[5.5,7,6,7.5],[6.5,7.5,6.5,7.5],[7,8.5,7.5,9],[9,9.5,9,9.5]],"provinces":["健康","意外","人寿","财险"],"years":["风险指数1","风险指数2","风险指数3","风险指数4","风险指数5","风险指数6","风险指数7","风险指数8","风险指数9"]};2 var optionFour ={3 timeline: {4 show:false,5 axisType: 'category',6 autoPlay: false,7 controlStyle:'none', //隐藏自动播放的按钮

8 symbol: 'emptyCircle',9 symbolSize:8,10 bottom:-20,11 left:'15%',12 right:'15%',13 itemStyle: {14 normal: {15 color: '#F68989', //圆点的颜色

16 borderWidth:1

17 }18 },19 checkpointStyle:{20 color:'#fff',21 borderWidth:7,22 borderColor:'#fdd68a',23 },24 lineStyle:{25 color:'transparent', //线的颜色

26 width:1,//线的宽度

27 },28 data: all.years29 },30 options: [{31 toolbox: {32 show: false,33 orient: 'vertical',34 x: 'right',35 y: 'center',36 feature: {37 mark: {38 show: false

39 },40 dataView: {41 show: true,42 readOnly: false

43 },44 //magicType: {//动态类型切换折线图和柱形图

45 //show: true,

46 //type: ['line', 'bar']

47 //},

48 restore: {49 show: false

50 },51 saveAsImage: {52 show: false

53 }54 }55 },56 grid: {57 top:10,//柱形图距上的高度

58 height:100//柱形图的高度

59 },60 xAxis: [{61 show:true,62 type: 'category',63 axisLabel: {64 interval: 0

65 },66 splitLine:{67 show:false

68 },69 splitArea:{70 show:false

71 },72 axisLine:{73 show:false

74 },75 axisTick:{76 show:false

77 },78 data: all.provinces79 }],80 yAxis: [{81 show:false,82 type: 'value',83 name: '单位: 人',84 splitLine:{85 show:false

86 },87 axisLine:{88 show:true

89 },90 axisTick:{91 show:false

92 },93 splitArea:{94 show:false

95 }96 }],97 series: [{98 name: '',99 type: 'bar',100 barWidth:28,101 markLine: {102 symbol: ['arrow', 'none'],103 symbolSize: [4, 2],104 },105 data: all.data[0],106 itemStyle:{107 normal:{108 color:function(idx) {109 var color = ['#febd3f','#9ab9fe','#2fd7ea','#faa561']110 return color[idx.dataIndex %color.length]111 }112 }113 }114 }]115 },116 {117 series: [{118 data: all.data[1],119 }]120 },121 {122 series: [{123 data: all.data[2]124 }]125 },126 {127 series: [{128 data: all.data[3]129 }]130 },131 {132 series: [{133 data: all.data[4]134 }]135 },136 {137 series: [{138 data: all.data[5]139 }]140 },141 {142 series: [{143 data: all.data[6]144 }]145 },146 {147 series: [{148 data: all.data[7]149 }]150 },151 {152 series: [{153 data: all.data[8],154 }]155 }156 ]157 };158

159

160 var curIndex=4;161 mainCircle1.on('timelinechanged',function(timelineIndex){162 window.sessionStorage.setItem('timeNum',timelineIndex.currentIndex);163 $('.numR').html(timelineIndex.currentIndex+1)164 if(timelineIndex.currentIndex==curIndex){165 $('.riskNum').css('left','3.1rem')166 }else if(timelineIndex.currentIndex==0){167 $(".health").html(all.data[0][0])168 $(".accident").html(all.data[0][1])169 $(".life").html(all.data[0][2])170 $(".property").html(all.data[0][3])171

172 $('.riskNum').css('left','0.3rem')173 }else if(timelineIndex.currentIndex==1){174 $(".health").html(all.data[1][0])175 $(".accident").html(all.data[1][1])176 $(".life").html(all.data[1][2])177 $(".property").html(all.data[1][3])178

179 $('.riskNum').css('left','1rem')180 }else if(timelineIndex.currentIndex==2){181 $(".health").html(all.data[2][0])182 $(".accident").html(all.data[2][1])183 $(".life").html(all.data[2][2])184 $(".property").html(all.data[2][3])185

186 $('.riskNum').css('left','1.7rem')187 }else if(timelineIndex.currentIndex==3){188 $(".health").html(all.data[3][0])189 $(".accident").html(all.data[3][1])190 $(".life").html(all.data[3][2])191 $(".property").html(all.data[3][3])192

193 $('.riskNum').css('left','2.4rem')194 }else if(timelineIndex.currentIndex==4){195 $(".health").html(all.data[4][0])196 $(".accident").html(all.data[4][1])197 $(".life").html(all.data[4][2])198 $(".property").html(all.data[4][3])199

200 $('.riskNum').css('left','3.1rem')201 }else if(timelineIndex.currentIndex==5){202 $(".health").html(all.data[5][0])203 $(".accident").html(all.data[5][1])204 $(".life").html(all.data[5][2])205 $(".property").html(all.data[5][3])206

207 $('.riskNum').css('left','3.7rem')208 }else if(timelineIndex.currentIndex==6){209 $(".health").html(all.data[6][0])210 $(".accident").html(all.data[6][1])211 $(".life").html(all.data[6][2])212 $(".property").html(all.data[6][3])213

214 $('.riskNum').css('left','4.45rem')215 }else if(timelineIndex.currentIndex==7){216 $(".health").html(all.data[7][0])217 $(".accident").html(all.data[7][1])218 $(".life").html(all.data[7][2])219 $(".property").html(all.data[7][3])220

221 $('.riskNum').css('left','5.2rem')222 }else if(timelineIndex.currentIndex==8){223 $(".health").html(all.data[8][0])224 $(".accident").html(all.data[8][1])225 $(".life").html(all.data[8][2])226 $(".property").html(all.data[8][3])227

228 $('.riskNum').css('left','5.85rem')229 }230 $('.riskNum').animate({opacity:'1'})231

232 });233

234 var timerC=setTimeout(function(){235 jkAa=window.sessionStorage.getItem('jkA')236 ywBb=window.sessionStorage.getItem('ywB')237 ccCc=window.sessionStorage.getItem('ccC')238 rsDd=window.sessionStorage.getItem('rsD')239 all.data[0][0]=jkAa240 all.data[0][1]=ywBb241 all.data[0][2]=ccCc242 all.data[0][3]=rsDd243 console.log(all.data[0])244

245 $(".health").html(jkAa)246 $(".accident").html(ywBb)247 $(".property").html(rsDd)248 $(".life").html(ccCc)249

250 mainCircle1.setOption(optionFour,true);251

252 },1000)253

254

255 //判断推荐应到的位置

256 if(riskNum>1&&riskNum<2){257 $(".recommend").css('left','1.1rem')258 }else if(riskNum>2&&riskNum<3){259 $(".recommend").css('left','1.85rem')260 }else if(riskNum>3&&riskNum<4){261 $(".recommend").css('left','2.6rem')262 }else if(riskNum>4&&riskNum<5){263 $(".recommend").css('left','3.4rem')264 }else if(riskNum>5&&riskNum<6){265 $(".recommend").css('left','4.25rem')266 }else if(riskNum>6&&riskNum<7){267 $(".recommend").css('left','292px')268 }else if(riskNum>7&&riskNum<8){269 $(".recommend").css('left','329px')270 }else if(riskNum>8&&riskNum<9){271 $(".recommend").css('left','366px')272 }

277

278 $("#mainCircle1").on('touchstart',function(){279 $('.riskNum').animate({opacity:'0'})280 })