Echarts水滴图

版权声明：本文为博主原创文章,可供所有开发人员随意转载使用! https://blog.csdn.net/SoumnsJ/article/details/85281346

制作水滴图需要引用第三方脚本:http://echarts.baidu.com/resource/echarts-liquidfill-latest/dist/echarts-liquidfill.min.js

普通水滴图:

//首先使用background来修改整体的图背景 
option = {
    backgroundColor: 'white',
    //调整下整体的背景 
    series: [{
        type: 'liquidFill',
        data: [0.264]
    }]
};

修改下字体的大小：

option = {
    backgroundColor: 'white',
    series: [{
        type: 'liquidFill',
        data: [0.6],
        label: {
            normal: {
                //fontSize:80   
                //这里也可以设置 
                textStyle: {
                    fontSize: 80
                    //修改字体大小 
                }
            }
        }
    }]
};

 多数据显示水滴图:

var option = {
    backgroundColor: 'white',
    series: [{
        type: 'liquidFill',
        name: 'Multi-Data',
        data: [0.7, 0.5, 0.3],
        //输入多个数据 
        label: {
            normal: {
                position: ['50%', '20%'],
                //此处调节显示的位置 
                formatter: function() {
                    return 'Multi-Data';
                },
                textStyle: {
                    fontSize: 30,
                    //设置字体大小 
                }
            }
        }
    }]
};

心形水滴图:

// 水球图学习 from Ovilia 1024
//基本显示 修改样式 文字大小 颜色调整

var option = {
    backgroundColor:'white',
    series: [{
        type: 'liquidFill',
        name: 'Multi-Data',
        radius:'60%',
        shape:"path://M18.98 5.7c-.24-2.36-2.24-4.2-4.66-4.2-1.95 0-3.6 1.18-4.32 2.87-.7-1.7-2.37-2.87-4.32-2.87-2.42 0-4.42 1.84-4.66 4.2L1 6.18c0 5.7 6.98 8.38 9 12.17 2.02-3.8 9-6.48 9-12.17 0-.16 0-.32-.02-.48z",
        data: [{'name':'Frist','value':'0.7'},0.5,0.3],  //datat
        
        outline: {
            show: false,
            },  
        backgroundStyle: {
            borderColor: '#156ACF',
            borderWidth: 1,
            shadowColor: 'rgba(0, 0, 0, 0.4)',
            shadowBlur: 20
        },
        
        label:{

            normal:{
                position:['50%','40%'],
                formatter:  '{a} Value: {c}',
                textStyle:{
                    fontSize:30,
                    
                }
            }
        }
    }]
};

小圆形水滴图:

var option = {
    backgroundColor: 'white',
    series: [{
        type: 'liquidFill',
        name: 'Multi-Data',
        data: [{
            'name': 'Frist',
            'value': '0.7'
        }, 0.5, 0.3],
        //其中第一个数值由键值对表示 
        label: {
            normal: {
                position: ['50%', '20%'],
                formatter: '{a}\n{b} Value: {c}',
                //{a}表示系列名，{b}为键名，{c}为值 
                textStyle: {
                    fontSize: 30,
                }
            }
        }
    }]
};

其它大小和形状水滴图:

var option = {
    backgroundColor: 'white',
    series: [{
        type: 'liquidFill',
        name: 'Multi-Data',
        radius: '80%',//调整大小 
        shape:'ract', //修改形状，目前支持	'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 
        //'container'支持占满整个元素容器 
        //同时还支持svg图作为形状:'path://balabalaba' 
        data: [{
            'name': 'Frist',
            'value': '0.7'
        }, 0.5, 0.3],
        label: {
            normal: {
                position: ['50%', '20%'],
                formatter: '{a}\n{b} Value: {c}',
                textStyle: {
                    fontSize: 30,
                }
            }
        }
    }]
};