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|ozvdkddzhkzd%}\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做漸隱漸現，元素高度自適應時用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選擇器的區別
總結
以上是生活随笔為你收集整理的html5 加速球 效果,css 渐隐渐现、echarts 圆环图、百度地图覆盖物、echarts水球图（360加速球效果）...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VUE父组件向子组件传递数据
- 下一篇： 电路交换，报文交换，分组交换简介与优缺点