echarts水球图

 在项目当中我们可能会遇到这种图，这种叫水球图，但是我们如果要写的话，得安装 npm install  echarts-liquidfill --save

安装好之后我们就可以在项目当中使用了，以下是代码

var option = {
    backgroundColor:'#fff',
    width:'100%',
    height:'100%',
    title:[
        {    //这里可以写多个，然后每一个进行调整位置，就是上面效果图的样子，根据实际情况来定
            top:'10%',  // 这里可以调整值的位置
            left:'center', //同上
            text:10,     //这里是显示的值
            textStyle:{
                color:'#00B42A',
                fontStyle:'normal',
                fontWeight:'normal',
                fontSize:9,
            },
        },
    ],
    series:[
        {
            color:['#37E0FF','#165DFF'], //波浪的颜色
            type:'liquidFill',
            radius:'80%'
            name:0.6,
            data:[
                    //波浪的高度占比
                    {
                        value:0.6,
                    },
                    {
                        value:0.5,
                    }
            ],
            center:['50%','50%'] //图在整个画布的位置
            backgroundStyle:{
                color:'white',
                borderColor:'#FFEDD8',//边框颜色
                borderWidth:1, //边框粗细
                shadowColor:'#ffffff', //阴影颜色
                shadowBlur:20, //阴影范围
            },
            label:{
                //水球图里面的文字喝字体等设置
                normal:{
                    formatter:'',
                    textStyle:{
                        fontSize:12,
                    },
                },
            },
            outline:{
                //水球图的外层边框 可设置 show:false  不显示
                itemStyle:{
                    borderColor:'#DCDCDC',
                    borderWidth:3,
                },
                borderDistance:0,
            },
            itemStyle:{
                opacity:0.95,
                shadowColor:'rgba(0,0,0,0)',
            },
        },
    ],
};