首页 > 代码库 > echarts时间轴和柱型图的结合
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.years 29 }, 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.provinces 79 }], 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]=jkAa 240 all.data[0][1]=ywBb 241 all.data[0][2]=ccCc 242 all.data[0][3]=rsDd 243 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 })
echarts时间轴和柱型图的结合
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。