echarts liquidFill

水球的使用

// 完整配置参数参见：https://github.com/ecomfe/echarts-liquidfill
var option = {
    series: [{
        type: 'liquidFill',
        radius: '80%',
        // name: '机位',//a 下面设定
        data: [{
            // name: '23/25',//b  下面设定
            // value: 23/28//c  下面设定

        }],
        // color:['#0f0'],//容器内部颜色 通过判断修改
        itemStyle: {//容器内部颜色透明度等
            normal: {
                opacity: 0.5
            },
            emphasis: {
                opacity: 0.1
            }
        },
        label: {//容器内部字体
            normal: {
                formatter: '{b}\n{a}',//格式化输出 默认是百分比
                // formatter: '{a}\n{b}\nvalue:{c}',
                textStyle: {
                    fontSize: 50
                }
            }
        },
        outline: {
            borderDistance: 0,//border向内占据的空间 不是width
            itemStyle: {
                borderWidth: 5,
                // borderColor: '#0f0',border颜色通过判断修改
                    // shadowBlur: 20,//
                    // shadowColor: 'rgba(255, 0, 0, 1)'
            }
        },
        backgroundStyle: {//背景
            borderWidth: 5,
            borderColor: 'red',
            color: '#1a1615',
            opacity:0.9
        }
    }]
};
var a=23;
var b=25;
var typename=["第一类","第二类"];
option.series[0].name=typename[0];
option.series[0].data[0].value=a/b;
option.series[0].data[0].name=a.toString()+"/"+b.toString();
if (option.series[0].data[0].value==1.00) {
    option.series[0].color=['#0f0'],
    option.series[0].outline.itemStyle.borderColor='#0f0'
} else {
    option.series[0].color=['#f00'],
    option.series[0].outline.itemStyle.borderColor='#f00'
}