說一下知識點：

1.水球是echarts的插件echarts-liquidfill，官網(wǎng)下載-擴展下載中可以拿到，git傳送陣https://github.com/ecomfe/echarts-liquidfill

2.水球上的數(shù)字是動態(tài)滾動效果，用的是插件countup, 還有適用于angular、vue、react的v2版本，npm傳送陣https://www.npmjs.com/package/countup.js

4.百度地圖自定義覆蓋物，自己按官網(wǎng)寫的，不怎么完善

/**

* 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圓環(huán)圖，很簡單，radius:[40%, 60%], 第一個是內(nèi)圈，第二個是外圈，顯示的標簽是富文本設置的 需要echarts3.7以上，將標簽設置到導視線上

{

type: 'pie',

radius: ['40%', '50%'],

avoidLabelOverlap: false,

label: {

normal: {

show: true,

padding: [0, -55],// 控制標簽移動

formatter: '{num|ze8trgl8bvbq%}\n{time|}',

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做漸隱漸現(xiàn)，元素高度自適應時用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 內(nèi)容很多,所以用的是兄弟元素， 如果不多也可以作為tip-icon的子元素，只是css選擇器的區(qū)別

總結(jié)

以上是生活随笔為你收集整理的html5 加速球 效果,css 渐隐渐现、echarts 圆环图、百度地图覆盖物、echarts水球图（360加速球效果）...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。