css 渐隐渐现、echarts 圆环图、百度地图覆盖物、echarts水球图（360加速球效果）...

2019独角兽企业重金招聘Python工程师标准>>>

说一下知识点：

    1.水球是echarts的插件echarts-liquidfill，官网下载-扩展下载中可以拿到，git传送阵https://github.com/ecomfe/echarts-liquidfill

    2.水球上的数字是动态滚动效果，用的是插件countup, 还有适用于angular、vue、react的v2版本，npm传送阵https://www.npmjs.com/package/countup.js

    3.星星评分是jq插件jquery.raty.js，传送阵http://www.jq22.com/jquery-info6430

    4.百度地图自定义覆盖物，自己按官网写的，不怎么完善

/** 
			*   ComplexCustomOverlay 百度地图 自定义覆盖物(此例无文本，只添加icon)
			*     params  name: icon显示时的title
										point: [lon, lat]
			*             size: 覆盖物大小 {w: 111, h: 200}
			*             url: 覆盖物背景图片
			*     use:    var marker = new ComplexCustomOverlay('truck', [truckLon, truckLat], { w: 23.8, h: 39.3 }, 'assets/logistics/truck.png') 
			*             map.addOverlay(marker);
			**/
			function ComplexCustomOverlay(name, point, size, url) {
				this._point = new BMap.Point(point[0], point[1]);
				this._size = size;
				this._url = url;
				this._name = name;
			};
			ComplexCustomOverlay.prototype = new BMap.Overlay();
			ComplexCustomOverlay.prototype.initialize = function (map) {
				this._map = map;
				var div = this._div = document.createElement("div");
				div.style.position = "absolute";
				div.title = this._name;
				div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
				div.style.width = this._size.w + 'px';
				div.style.height = this._size.h + 'px';
				div.style.background = 'url(' + this._url + ') center center no-repeat';
				map.getPanes().markerPane.appendChild(div);
				return div;
			};
			ComplexCustomOverlay.prototype.draw = function () {
				var map = this._map;
				var pixel = map.pointToOverlayPixel(this._point);
				this._div.style.left = pixel.x - this._size.w / 2 + 'px';
				this._div.style.top = pixel.y - this._size.h / 2 + 'px';
			};
			ComplexCustomOverlay.prototype.show = function (cb) {
				if (this._div) {
					this._div.style.display = '';
					if (cb) cb();
				}
			};
			ComplexCustomOverlay.prototype.hide = function (cb) {
				if (this._div) {
					this._div.style.display = 'none';
					if (cb) cb();
				}
			};

    5.echarts圆环图，很简单，radius:[40%, 60%], 第一个是内圈，第二个是外圈，显示的标签是富文本设置的 需要echarts3.7以上，将标签设置到导视线上

                        {
							type: 'pie',
							radius: ['40%', '50%'],
							avoidLabelOverlap: false,
							label: {
								normal: {
									show: true,
									padding: [0, -55],		// 控制标签移动
									formatter: '{num|{d}%}\n{time|{b}}',	
									rich: {			// 富文本
										num: {
											fontSize: 24,
											color: '#333',
											lineHeight: 40,
											align: 'center'
										},
										time: {
											fontSize: 14,
											lineHeight: 40,
											color: '#999',
											align: 'center'
										}
									}
								},
								emphasis: {
									show: true,
									textStyle: {
										fontSize: '30',
										fontWeight: 'bold'
									}
								}
							},
							labelLine: {
								normal: {
									show: true,
									smooth: false,
									length: 35,					// 第一条导视线长度
									length2: 50,				// 第二条导视线长度
									lineStyle: {
										color: '#999',
										width: 0.5
									}
								}
							},
							itemStyle: {
								normal: {
									borderColor: '#fff',
									borderWidth: 7
								}
							},
							data: [
								
							]
						}

    6.用transition做渐隐渐现，元素高度自适应时用height:auto 会有bug，改为max-height: xx ; xx 大于元素最大高度就可以，width同样适用

css:

           
			.tip-icon:hover ~ .tip {
				opacity: 1;
				max-height: 400px;
			}
			
			.tip{
				
				max-height: 0;
				opacity: 0;		
				transition: all .5s .2s;
			}

html: 由于我的tip 内容很多,所以用的是兄弟元素， 如果不多也可以作为tip-icon的子元素，只是css选择器的区别

<a href="#" class="tip-icon footprint">
	<i class="fa fa-question-circle-o" aria-hidden="true"></i>
</a>
<div class="tip">
	<!-- something -->
</div>

 

转载于:https://my.oschina.net/u/3108430/blog/1863376