展示一个百分比，炫酷的水球图ECharts Gallery

20:11:45图表已生成
代码
// ECharts 水球图插件，需要额外插件脚本，参见上方“脚本”
// 完整配置参数参见：https://github.com/ecomfe/echarts-liquidfill
// npm 下载命令  npm install echarts-liquidfill

// 建议案例
// option={
//     series:[{
//         type:'liquidFill',
//         data:[0.5,0.3,0.2]
//     }]
// }

// 下面 写的比较全面需要改变配置  如果你只需要默认的样式 请看上面 简易案例
option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3], //data的长度等于波数
        radius: '80%', //大小
        phase: 'auto',//相位
        period: 'auto',//周期
        direction: 'right',//波的方向
        waveAnimation:true,//动画
        color: ['cyan', 'gold', 'blue', 'pink'], //对应波的颜色
        // amplitude: 10,//波的振幅
        // waveAnimation: 100,//波长
        backgroundStyle: {
            borderColor: 'red',
            borderWidth: 6,
            color: '#fff'
        },
        outline: {
            show: true,
            borderDistance: 0,
            itemStyle: {
                borderWidth: 5,
                borderColor: '#156ACF',
                shadowBlur: 20,
                shadowColor: 'rgba(255, 0, 0, 1)'
            }
        },
        // shape 形状  'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' ,'container'
        //shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z',
        //shape key给个svg路径
        shape: 'path://M20.5,9.5c-1.955,0,-3.83,1.268,-4.5,3c-0.67,-1.732,-2.547,-3,-4.5,-3C8.957,9.5,7,11.432,7,14 c0,3.53,3.793,6.257,9,11.5c5.207,-5.242,9,-7.97,9,-11.5 C25,11.432,23.043,9.5,20.5,9.5z'
        // shape: 'arrow'
    }]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
