echarts时间轴和柱型图的结合

Posted 2020-09-17 hedy327

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     })