使用echarts水球图

官方实例中没有水球图样式，当我们需要用到水球图的时候需要下载echarts-liquidfill.js.

使用

在echarts之后引入 echarts-liquidfill.js
准备一个定宽高的DOM用来挂载水球图
初始化水球图

var  chart = echarts.init(document.getElementById("dom"))

设置水球参数,并渲染到DOM元素

var option={
    series:[
        {
            type:'liquidFill',
            data:[0.7,0.5]  //两个波纹
        }
    ]
};
chart.setOption(option);

配置水球图

单个波的配置
- 每个水波都是单独配置的，单独的配置会覆盖统一配置。
- 改变波纹防线颜色

var option={
    series:[
        {
            type:'liquidFill',
            data:[0.7,{
                value:"0.5",
                direction:'left',
                itemStyle:{
                    normal:{
                        color:"red"
                    }
                }
            }]
        }
    ]
};

//第二条波纹变为将变为红色

文字配置
- 水波中间显示的文字也是可以配置的，处于水波背景和默认背景上的文字颜色是不同的，当然也可以设置成一样的。
- 文字配置

var option={
    series:[
        {
            name:"系列名称",
            type:'liquidFill',
            data:[0.7,{
                name:"数据名称",
                value:"0.5",
                direction:'left',
                itemStyle:{
                    normal:{
                        color:"red"
                    }
                }
            }],
            label:{
                normal:{
                    formatter:"显示文字",  //显示在水球图中间的文字，可以是字符串，可以是占位符，也可以是一个函数。
                    //如果使用{a}
{b}
Value: {c} ，a代表系列名称，b代表数据名称，c代表数据值。
                    textStyle:{
                        color:'red',  //默认背景下的文字颜色
                        insideColor:'blue', //水波背景下的文字颜色
                        fontsize:40   //字体大小
                    }
                }
            }
        }
    ]
};

只研朱墨作春山