echarts插件-liquidFill(水球图)

echarts插件-liquidFill(水球图)

1.下载

echarts.js下载:https://cdnjs.com/libraries/echarts

echarts-liquidfill.js下载:https://github.com/ecomfe/echarts-liquidfill

2.引入:

javascript 复制代码
<script src='echarts.js'></script>
<script src='echarts-liquidfill.js'></script>

3.使用

javascript 复制代码
 option = {
     series: [{
         type: 'liquidFill',
         amplitude: -10,//水面振幅
         waveAnimation: true,//静止水面
         // color:['#0460CA'],//设置波颜色,
         radius: '85%',
         outline: {//最外层边框设置s
             show: true,
             borderDistance: 5,//最外层挨着的白色区域
             itemStyle: {
                 color: 'none',
                 borderColor: '#0460CA',//外边框颜色
                 borderWidth: 3,//最外层宽度
                 shadowBlur: 20,
                 shadowColor: 'rgba(0, 0, 0, 0.25)'
             }
         },
         backgroundStyle: {
             color: '#ffffff',       // 内部球背景颜色
             borderWidth: 2,         // 内部球边框宽度
             borderColor: '#e3e3e3'  // 内部球边框颜色
         },
         shape: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 或者 svg路径
         data: [
             {value:0.5,
                 itemStyle: {
                     normal: {
                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                             offset: 0,//0%时的颜色 从上往下看 最上面是0%
                             color: '#7DB6F7'
                         }, {
                             offset: 1,//100%时的颜色 从上往下看 最上面是0%
                             color: '#015FC9'
                         }],),
                     }
                 }
             },
         ],
         label: {
             position: ['50%', '36%'],
             formatter: function(params) {//自定义样式
                 console.log(params,222);
                 return '当月xxx' +'\n\n' +'{value|'+params.data.value+'}'+'  m³';
             },
             fontSize: 16,
             color: '#666666',
             rich: { //特定样式
                 value: {
                     fontSize: 23, 
                     fontWeight: 'bolder',
                     color: '#000000',
                 },
             },

         }

     }]

 
 };
相关推荐
yume_sibai3 小时前
TS 常用内置方法
前端·javascript·typescript
新知图书3 小时前
ArkTS语言、基本组成与数据类型
前端·javascript·typescript
西西学代码3 小时前
Flutter---个人信息(1)---实现简单的UI
开发语言·javascript·flutter
嘗_3 小时前
手写自己的小型react
前端·javascript·react.js
zuo-yiran3 小时前
vue div标签可输入状态下实现数据双向绑定
前端·javascript·vue.js
qq_316837753 小时前
使用leader-line-vue 时垂直元素间距过小连线打转的解决
前端·javascript·vue.js
天天向上10243 小时前
vue3使用ONLYOFFICE 实现在线Word,Excel等文档
前端·javascript·html
光影少年3 小时前
React Native 第三章
javascript·react native·react.js
一川_3 小时前
虚拟滚动的幽灵:从搜索失准到丝滑体验的救赎之旅
javascript
abiao19814 小时前
VUE的“单向数据绑定” 和 “双向数据绑定”
前端·javascript·vue.js