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

         }

     }]

 
 };
相关推荐
今天头发还在吗1 天前
【React】TimePicker进阶:解决开始时间可大于结束时间的业务场景与禁止自动排版
javascript·react.js·ant design
今天头发还在吗1 天前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
小刘不知道叫啥1 天前
React 源码揭秘 | suspense 和 unwind流程
前端·javascript·react.js
木易 士心1 天前
Vue 与 React 深度对比:底层原理、开发体验与实际性能
前端·javascript·vue.js
wyzqhhhh1 天前
插槽vue/react
javascript·vue.js·react.js
许___1 天前
Vue使用原生方式把视频当作背景
前端·javascript·vue.js
GISer_Jing1 天前
Next.js数据获取演进史
java·开发语言·javascript
啦工作呢1 天前
数据可视化 ECharts
前端·信息可视化·echarts
wangpq1 天前
使用rerender-spa-plugin在构建时预渲染静态HTML文件优化SEO
前端·javascript·vue.js
前端开发爱好者1 天前
弃用 uni-app!Vue3 的原生 App 开发框架来了!
前端·javascript·vue.js