echarts插件-liquidFill（水球图）

joan_852023-10-25 17:25

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',
                 },
             },

         }

     }]

 
 };