最近帮助朋友根据ued图学习设计了一个echarts水球图，觉得还蛮有意思的，在这记录一下（注意：下方有调试入口）

具体效果：

废话不多说，在这先给大家看一下是什么样子的效果，会不会是你以后也会用到的：

看看，这种带比例的echarts是不是很像个水球，随着比例变动水位不断变化，再看看那一圈圈涟漪（ps：就这些‘涟漪’开始麻烦死了……）

进入正题：

废话不多说，直接上代码，希望对你有帮助：

function Pie() {let dataArr = [];for (var i = 0; i < 150; i++) {if (i % 2 === 0) {dataArr.push({name: (i + 1).toString(),value: 50,itemStyle: {normal: {color: "#00AFFF",borderWidth: 0,borderColor: "rgba(0,0,0,0)",}}})} else {dataArr.push({name: (i + 1).toString(),value: 100,itemStyle: {normal: {color: "rgba(0,0,0,0)",borderWidth: 0,borderColor: "rgba(0,0,0,0)"}}})}}return dataArr
}options：{backgroundColor: 'transparent', // 画布背景色// title: {//   text: '',//   textStyle: {//     fontWeight: 'normal',//     fontSize: 25,//     color: 'rgb(97, 142, 205)'//   }// },series: [{// value: 50, //  内容 配合formattertype: 'liquidFill',radius: '70%', // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）center: ['50%', '50%'],data: [0.87, {value: 0.87,direction: 'left', //波浪方向}], // data个数代表波浪数backgroundStyle: {borderWidth: 1,color: 'rgba(62, 208, 255, 1)' // 球体本景色},amplitude: '6  %',//波浪的振幅// 修改波浪颜色// color: ['#0286ea', 'l#0b99ff'], // 每个波浪不同颜色，颜色数组长度为对应的波浪个数color: [{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 1,color: '#6CDEFC',},{offset: 0,color: '#429BF7',},],globalCoord: false,},],label: {normal: {// formatter: 0.87 * 100 + '\n%',formatter: 0.87 * 100+'\n{d|%}',//  formatter: function(params){//     return params.value* 100 + " \n%";// },rich: {d: {fontSize: 20,}},textStyle: {fontSize: 36,color: '#fff'}},},outline: {show: false}},{type: 'pie',z: 1,center: ['50%', '50%'],radius: ['72%', '73.5%'], // 控制外圈圆的粗细hoverAnimation: false,data: [{name: '',value: 500,labelLine: {show: false},itemStyle: {color: '#00AFFF'},emphasis: {labelLine: {show: false},itemStyle: {color: '#00AFFF'}}}]},{ //外发光type: 'pie',z: 1,zlevel: -1,radius: ['70%', '90.5%'],center: ["50%", "50%"],hoverAnimation: false,clockWise: false,itemStyle: {normal: {borderWidth: 20,color: 'rgba(224,242,255,1)',}},label: {show: false},data: [100]},{ //底层外发光type: 'pie',z:1,zlevel: -2,radius: ['70%', '100%'],center: ["50%", "50%"],hoverAnimation: false,clockWise: false,itemStyle: {normal: {borderWidth: 20,color: 'rgba(224,242,255,.4)',}},label: {show: false},data: [100]},// 虚点{type: 'pie',zlevel: 0,silent: true,radius: ['78%', '80%'],z: 1,label: {normal: {show: false},},labelLine: {normal: {show: false}},data: Pie()},]}

具体的根据自己的项目需求找到对应的参数字段进行配置，进行修改

ps：水球涟漪，一层一层……自己看着搞

附调试地址：Make A Pie

都这么直接了，拿去用，不用谢，具体的一些配置参数，可以去echarts官网查阅

实在不明白欢迎骚扰交流

https://www.isqqw.com/echartsdetail?id=16212

echarts水球图-动态波纹百分比数据显示相关推荐

echart水滴_漂亮得不像实力派：ECharts 水球图教程
水球图是一种适合于展现单个百分比数据的图表类型,ECharts 的水球图插件使你能够通过非常简单的配置,实现酷炫的数据展示效果. 那么,今天我们就一起来学习一下,如何使用 ECharts 水球图. 第 ...
vue3+ts 之echarts 水球图 liquidFill 的使用
vue3+ts 之echarts 水球图 liquidFill 的使用前言一.echarts liquidfill.js水球图插件二.使用步骤 1.上代码总结前言项目框架使用的是 vben ...
vue echarts 水球图多个水球图并存配置
echarts 水球图下面介绍为vue-cli开发环境下 npm下载 npm install echarts --save npm install echarts-liquidfill --save ...
echarts 水球图
// ECharts 水球图插件,需要额外插件脚本,参见上方"脚本" // 完整配置参数参见:https://github.com/ecomfe/echarts-liquidfil ...
echarts社区水球图、echart水球图动态水球图
目录普通水球图 3/4环形图 4层波浪水球图普通水球图 var value = 0.45; var value1 = 0.76; var data = [value, value1]; var o ...
html5 加速球效果,css 渐隐渐现、echarts 圆环图、百度地图覆盖物、echarts水球图（360加速球效果）...
说一下知识点: 1.水球是echarts的插件echarts-liquidfill,官网下载-扩展下载中可以拿到,git传送阵https://github.com/ecomfe/echarts-liq ...
ECHARTS 水球图
转载编辑. 原作者链接地址:https://zhuanlan.zhihu.com/p/25353670?group_id=827655855632715776 水球图是一种适合于展现单个百分比数据的图 ...
微信小程序 ECharts 水球图
效果图: 水球图插件 git地址:https://github.com/ecomfe/echarts-liquidfill#api 下载后,将dist下面的echarts-liquidfill.min ...
echarts折线图动态多条线
echarts折线图配置项由于工作中遇到的图表特别多,每次用过配置项总是想不起来,在这里记录一下,希望也可以帮到路过的你.话不多说我们上图: 左边的是设计稿,右边的是echarts的示例图,我们先找 ...
Echarts 水球图设置基准线
*前言:最近的项目需求中,要求在水球图中加一条标准线(作为报警提示线). 1.效果如下: 2.思路: 注意:如果是直接在水球图上画标线是实现不了的. 所以我们换种思路(大佬指点了一下),在折线图 ...

echarts水球图-动态波纹百分比数据显示

最近帮助朋友根据ued图学习设计了一个echarts水球图，觉得还蛮有意思的，在这记录一下（注意：下方有调试入口）

具体效果：

进入正题：

附调试地址：Make A Pie

都这么直接了，拿去用，不用谢，具体的一些配置参数，可以去echarts官网查阅

实在不明白欢迎骚扰交流

echarts水球图-动态波纹百分比数据显示相关推荐

最新文章

热门文章