echarts 水球图

// ECharts 水球图插件，需要额外插件脚本，参见上方“脚本”
// 完整配置参数参见：https://github.com/ecomfe/echarts-liquidfillvar option = {series: [{type: 'liquidFill',data: [0.6, 0.5, 0.4, 0.3],radius: '40%',shape: 'diamond',center: ['25%', '25%']}, {type: 'liquidFill',data: [0.6, 0.5, 0.4, 0.3],direction: 'left',radius: '40%',shape: 'rect',center: ['75%', '25%']},{type: 'liquidFill',data: [0.6, 0.5, 0.4, 0.3],radius: '40%',shape: 'roundRect',center: ['50%', '50%'],backgroundStyle: {borderColor: '#ff00ff',           //边框颜色borderWidth: 1,                  //边框粗细shadowColor: 'red',              //阴影颜色shadowBlur: 500                  //阴影范围},outline: {show: false},label: {        //设置水球中间的字等normal: {position: ['38%', '40%'],formatter: function() {return 'ECharts\nLiquid Fill';},textStyle: {fontSize: 40,color: '#D94854'}}}// waveAnimation: false, // 禁止左右波动}, {type: 'liquidFill',data: [0.6, 0.5, 0.4, 0.3],radius: '50%',shape: 'pin',center: ['75%', '75%'],amplitude: 0,waveAnimation: false,outline: {show: false},backgroundStyle: {shadowColor: 'rgba(0, 0, 0, 0.4)',shadowBlur: 20},}]
};

echarts 水球图相关推荐

vue echarts 水球图多个水球图并存配置
echarts 水球图下面介绍为vue-cli开发环境下 npm下载 npm install echarts --save npm install echarts-liquidfill --save ...
echart水滴_漂亮得不像实力派：ECharts 水球图教程
水球图是一种适合于展现单个百分比数据的图表类型,ECharts 的水球图插件使你能够通过非常简单的配置,实现酷炫的数据展示效果. 那么,今天我们就一起来学习一下,如何使用 ECharts 水球图. 第 ...
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水球图
在项目当中我们可能会遇到这种图,这种叫水球图,但是我们如果要写的话,得安装 npm install echarts-liquidfill --save 安装好之后我们就可以在项目当中使用了,以下是代 ...
echarts 水球图自定义水球颜色
项目中有一个水球图表示电池电量的需求:电量20%以下时显示红色,20%-30%时显示为黄色,30%以上显示蓝色 var option = {series: [{type: 'liquidFill',d ...

echarts 水球图

echarts 水球图相关推荐

最新文章

热门文章