独角兽企业重金招聘Python工程师标准>>>
说一下知识点：
1.水球是echarts的插件echarts-liquidfill，官网下载-扩展下载中可以拿到，git传送阵/ecomfe/echarts-liquidfill
2.水球上的数字是动态滚动效果，用的是插件countup, 还有适用于angular、vue、react的v2版本，npm传送阵/package/countup.js
3.星星评分是jq插件jquery.raty.js，传送阵/jquery-info6430
4.百度地图自定义覆盖物，自己按官网写的，不怎么完善
/** * ComplexCustomOverlay 百度地图 自定义覆盖物(此例无文本，只添加icon)*params name: icon显示时的titlepoint: [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>
