最近在写看板，经常用到下面的百分率的展示形式。也可能是用饼图展示的。

看板中经常用到下图中的水球样式：其实就是个百分率的展示；

水球样式和饼图的区分：
水球里面是有个水波纹的动效的，除此之外，基本都是一样的。

分析一下上图中的水球：

1.外面的一圈：其实是通过border来实现的
2.里面的圆圈+百分比+波纹展示：通过echarts中的水球样式可以实现

1.引入jq+echarts+echarts-liquidfill文件——请百度后自行下载以下的文件

`如果需要以下的文件，可以留个邮箱，我看到后会发到指定邮箱里面`

<script src="/Scripts/jquery-3.4.1.min.js"></script>
<script src="/Content/plugins/echarts.min.5.0.js"></script>
<script src="~/Content/plugins/echarts-liquidfill.min.js"></script>

2.html代码

 <li class="ballChartsListItem"><div class="fl_txt"><span>当月<br>毛利率</span></div><div class="fr" id="ballCharts_s1"></div>
</li>

3.css代码

.ballChartsListItem {display: flex;justify-content: space-around;align-items: center;width:100%;
}
.fl_txt {font-size: 24px;color: #f90;font-weight: bold;
}
.fr{width: 128px; height: 128px; border-radius: 50%; border: 10px solid #533924; margin: 0 5px;
}

4.jq代码

入参如下：

1. id:显示水球的dom元素的id
2. data:展示的百分比数值，比如30%,传入0.3即可

使用方法：

ballCharts('ballCharts_s1', 0.17);

封装的方法如下：

ballCharts(id, data) {var ball = echarts.init(document.getElementById(id));let obj = {backgroundColor: 'transparent',title: [{text: (data * 100).toFixed(0) + '%',left: '50%',top: '40%',textAlign: 'center',textStyle: {fontSize: '20',fontWeight: '400',color: '#fff',textAlign: 'center',textBorderColor: 'rgba(0, 0, 0, 0)',textShadowColor: '#000',textShadowBlur: '0',textShadowOffsetX: 0,textShadowOffsetY: 1,},},],polar: {radius: ['82%', '80%'],center: ['50%', '50%'],},angleAxis: {max: 100,clockwise: false,axisLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,},splitLine: {show: false,},},radiusAxis: {type: 'category',show: true,axisLabel: {show: false,},axisLine: {show: false,},axisTick: {show: false,},},series: [{type: 'liquidFill',radius: '80%',z: 1,center: ['50%', '50%'],amplitude: 10,color: {type: 'linear',x: 0,y: 0,x2: 1,y2: 1,colorStops: [{offset: 0,color: '#f90',},{offset: 1,color: 'rgba(68,144,144,.5)',},],globalCoord: false,},data: [data,{value: data,direction: 'left',},],backgroundStyle: {borderWidth: 1,color: 'transparent',},label: {normal: {formatter: '',},},outline: {show: true,itemStyle: {borderWidth: 0,},borderDistance: 0,},},{name: '',type: 'bar',roundCap: true,showBackground: true,backgroundStyle: {color: '#15181e',},data: [150],coordinateSystem: 'polar',color: "#f90",},],}ball.setOption(obj);};

完成！！！多多积累，多多收获！

jq+css+echarts——实现echarts中的水球效果——技能提升相关推荐

css实现加载中loading动画效果
1 效果 2 实现原理原理很简单: 1 设置100px宽高的div,再设置成圆形border-radius:50%: 2 设置border一定宽度和颜色,再设置border-left为同样宽度和另一 ...
echarts——实现中国地图+世界地图的切换——技能提升
之前写过一篇文章,是关于中国地图的展示. vue+echarts.js 实现中国地图--根据数值表示省份的深浅--技能提升:http://t.csdn.cn/rfQGl 最后实现的效果如下图所示: 今 ...
html css 磁贴,使用JS配合CSS实现Windows Phone中的磁贴效果
Windows Phone的tile设计的美丽对我来说有余音绕梁的效果.我从来不知道优雅的方块盒子布局能给我深刻的印象.因此我尝试在web里用CSS和Jquery去实现这种tile设计.我已尝试Til ...
HTML+CSS+JavaScript+Ajax+ECharts实现疫情实时监控大屏-2设计与实现
疫情期间,各类应用系统.大数据系统为防疫抗疫带来了巨大助力.国家博物馆首次将代码列为藏品,那就是抗击疫情期间来自阿里程序员写的健康码第一行代码以及研发人员的签名.这展现了广大程序员在疫情面前,争当勇敢 ...
利用ECharts绘制各式酷炫水球图
本文来自于ECharts官方博客. 原文地址:ECharts 水球图教程责编:陈秋歌,关注前端开发等领域,寻求报道或者投稿请发邮件至chenqg#csdn.net. 水球图是一种适合于展现单个百分比 ...
HTML+CSS+JavaScript+Ajax+ECharts实现疫情实时监控大屏-1快速上手
1 ECharts简介 ECharts是一款开源的基于JavaScript的数据可视化图表库,可以流畅地运行在PC和移动设备上,兼容当前绝大多数浏览器.它底层依赖矢量图形库ZRender,支持超过1 ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
echarts在360中以及IE8浏览器不兼容：解决方案
echarts在360中以及IE8浏览器不兼容:解决方案参考文章: (1)echarts在360中以及IE8浏览器不兼容:解决方案 (2)https://www.cnblogs.com/Unrmk- ...
echarts在.Net中使用实例(一) 简单的Demo
前言这个必须要有前言,即便很短,对于有强迫症的人来说不容易啊.言归正传,之前做图一直使用rdlc自带的格式,虽然任务完成,但是一直觉得不太美观, 空余时间开始找其他的插件,终于找到了Highchar ...

jq+css+echarts——实现echarts中的水球效果——技能提升

1.引入jq+echarts+echarts-liquidfill文件——请百度后自行下载以下的文件

`如果需要以下的文件，可以留个邮箱，我看到后会发到指定邮箱里面`

2.html代码

3.css代码

4.jq代码

jq+css+echarts——实现echarts中的水球效果——技能提升相关推荐

最新文章

热门文章