Echarts水波图

 <script src="../ViewScript/echarts5.min.js"></script>
 <script src="../ViewScript/echarts-liquidfill.min.js"></script>

var option = {
                series: [{
                    type: 'liquidFill',
                    radius: '70%', // 水球图的半径
                    center: ['50%', '45%'],
                    outline: {
                        show: true,
                        borderDistance: 0, // 边框线与图表的距离 数字
                        itemStyle: {
                            opacity: 1, // 边框的透明度   默认为 1
                            borderWidth: 4, // 边框的宽度
                            shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                            shadowColor: '#fff', // 边框的阴影颜色,
                            borderColor: '#ECECEC' // 边框颜色
                        }
                    },
                    // 图形样式
                    itemStyle: {
                        // color: '#1ECFFF', // 水球显示的背景颜色
                        opacity: 0.5, // 波浪的透明度
                        shadowBlur: 15, // 波浪的阴影范围
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#1ECFFF'
                        },{
                            offset: 1,
                            color: '#1770FD'
                        }])
                    },
                    label:{
                        normal:{
                            textStyle: {
                                color: '#242038',           // 在波浪上方时的文字颜色
                                insideColor: '#242038',     // 在波浪下方时的文字颜色
                                fontSize: 54            // 文字大小

                            }
                        }
                    },
                    backgroundStyle: {
                        color: '#fff', // 水球未到的背景颜色
                    },
                    data: [rate]
                    // data: [0.7]
                }]
            };

官方案例 js在dist文件夹里

链接: https://pan.baidu.com/s/1NLXgkuH9L6XmI4khPtaJcw 提取码: pcvw