echarts水球图

在项目当中我们可能会遇到这种图，这种叫水球图，但是我们如果要写的话，得安装 npm install echarts-liquidfill --save

安装好之后我们就可以在项目当中使用了，以下是代码

var option = {backgroundColor:'#fff',width:'100%',height:'100%',title:[{    //这里可以写多个，然后每一个进行调整位置，就是上面效果图的样子，根据实际情况来定top:'10%',  // 这里可以调整值的位置left:'center', //同上text:10,     //这里是显示的值textStyle:{color:'#00B42A',fontStyle:'normal',fontWeight:'normal',fontSize:9,},},],series:[{color:['#37E0FF','#165DFF'], //波浪的颜色type:'liquidFill',radius:'80%'name:0.6,data:[//波浪的高度占比{value:0.6,},{value:0.5,}],center:['50%','50%'] //图在整个画布的位置backgroundStyle:{color:'white',borderColor:'#FFEDD8',//边框颜色borderWidth:1, //边框粗细shadowColor:'#ffffff', //阴影颜色shadowBlur:20, //阴影范围},label:{//水球图里面的文字喝字体等设置normal:{formatter:'',textStyle:{fontSize:12,},},},outline:{//水球图的外层边框 可设置 show:false  不显示itemStyle:{borderColor:'#DCDCDC',borderWidth:3,},borderDistance:0,},itemStyle:{opacity:0.95,shadowColor:'rgba(0,0,0,0)',},},],
};

echarts水球图相关推荐

vue echarts 水球图多个水球图并存配置
echarts 水球图下面介绍为vue-cli开发环境下 npm下载 npm install echarts --save npm install echarts-liquidfill --save ...
echart水滴_漂亮得不像实力派：ECharts 水球图教程
水球图是一种适合于展现单个百分比数据的图表类型,ECharts 的水球图插件使你能够通过非常简单的配置,实现酷炫的数据展示效果. 那么,今天我们就一起来学习一下,如何使用 ECharts 水球图. 第 ...
echarts 水球图
// ECharts 水球图插件,需要额外插件脚本,参见上方"脚本" // 完整配置参数参见:https://github.com/ecomfe/echarts-liquidfil ...
vue3+ts 之echarts 水球图 liquidFill 的使用
vue3+ts 之echarts 水球图 liquidFill 的使用前言一.echarts liquidfill.js水球图插件二.使用步骤 1.上代码总结前言项目框架使用的是 vben ...
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 水球图设置基准线
*前言:最近的项目需求中,要求在水球图中加一条标准线(作为报警提示线). 1.效果如下: 2.思路: 注意:如果是直接在水球图上画标线是实现不了的. 所以我们换种思路(大佬指点了一下),在折线图 ...
echarts 水球图自定义水球颜色
项目中有一个水球图表示电池电量的需求:电量20%以下时显示红色,20%-30%时显示为黄色,30%以上显示蓝色 var option = {series: [{type: 'liquidFill',d ...

echarts水球图

echarts水球图相关推荐

最新文章

热门文章