文档章节

css 渐隐渐现、echarts 圆环图、百度地图覆盖物、echarts水球图(360加速球效果)

宿管小阿姨
 宿管小阿姨
发布于 2018/07/26 11:29
字数 648
阅读 741
收藏 1

说一下知识点:

    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>

 

© 著作权归作者所有

宿管小阿姨
粉丝 0
博文 11
码字总数 4193
作品 0
私信 提问
零云技术分享之:ECharts可视化图表开发

欢迎交流:零云,互联网产品快速开发框架 百度有几个开源项目值得称赞的,比如blend2、UEditor、ECharts 等,这里我们聊一聊ECharts3 可视化图表库。 有了ECharts 3,我们可以非常方便的构建...

CoreThink
2017/03/06
376
0
uCharts 1.9.2 发布,高性能跨平台图表库

支持图表类型 饼图 圆环图 线图 (直线、曲线) 柱状图 (分组、堆叠、温度计) 区域图 (直线、曲线) 雷达图 圆弧进度图 仪表盘 K线图 混合图 (支持 Point、Line 直线曲线、Column、Area ...

uCharts
08/26
2.4K
10
uCharts高性能跨端图表推新啦,新增图例点击、标记线、词云图、漏斗图等重磅功能

快速体验 一套代码编到 7 个平台,依次扫描二维码,亲自体验 uCharts 图表跨平台效果!iOS 因 demo 比较简单无法上架,请自行编译。 更新记录 支持图表类型 饼图 圆环图 线图 (直线、曲线)...

uCharts
08/07
2.4K
4
uCharts 1.9.0 发布,高性能跨平台图表库

新增地图图表类型map;新增多Y轴绘制,支持全部直角坐标系类图表类型。 更新记录 未来计划(V1.0 至 2.0 版本) 2019.08.xx 推迟计划加入 ,增加《亲手教您如何改造 uCharts,打造您的专属图...

uCharts
08/19
2.6K
16
uCharts 1.8.3 发布,高性能跨端图表库

快速体验 一套代码编到7个平台,依次扫描二维码,亲自体验uCharts图表跨平台效果!IOS因demo比较简单无法上架,请自行编译。 更新记录 支持图表类型 饼图 圆环图 线图 (直线、曲线) 柱状图...

uCharts
08/09
3.2K
10

没有更多内容

加载失败,请刷新页面

加载更多

centos7 linuxdeployqt qt5.13.1 打包程序

原文链接:https://www.cnblogs.com/linuxAndMcu/p/11016322.html 一、简介 linuxdeployqt 是Linux下的qt打包工具,可以将应用程序使用的资源(如库,图形和插件)复制到二进制运行文件所在的...

shzwork
22分钟前
4
0
IDEA 配置Springboot项目热部署

实现的方式概述 注意以下的热部署方式在IDEA是默认没有打开自动编译的,手动编译需要快捷键(Ctrl+Shift+F9),自动编译的修改配置如下:(注意刷新不要太快,会有1-2秒延迟) File-Settings-C...

小强的进阶之路
33分钟前
6
0
免费数据分析工具:secsoso

前段时间思考了理想数据分析平台,之后我们根据这个思路开发了spl语言并提供了一个数据分析平台,这个平台主要用在搜索ES,数据库索引中的数据。但后来发现对文件的事后处理也是个非常重要的...

赛克蓝德
35分钟前
5
0
暗黑2不能正常启动?带你轻松使用WIN10运行游戏

暗黑破坏神2这款游戏由于年代比较久远,所以设置启动这方面与现在的大部分游戏有很大差距,由于当初完美运行暗黑2是当年使用最多的XP系统,在使用现在大多数玩家使用的WIN7到WIN10系统常会出...

太空堡垒185
39分钟前
6
0
maven项目对象模型(二)

1.4.4.传递性依赖 一个传递性依赖就是一个依赖的依赖。如果project-a依赖于project-b,而后者接着依赖于project-c,那么project-c就是被认为是project-a的传递性依赖。如果project-c依赖于p...

万建宁
39分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部