css 漸隱漸現、echarts 圓環圖、百度地圖覆蓋物、echarts水球圖（360加速球效果）

說一下知識點：

    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>