html5 加速球 效果,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

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选择器的区别