使用echarts水球图

使用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}\n{b}\nValue: {c} ，a代表系列名称，b代表数据名称，c代表数据值。
                    textStyle:{
                        color:'red',  //默认背景下的文字颜色
                        insideColor:'blue', //水波背景下的文字颜色
                        fontsize:40   //字体大小
                    }
                }
            }
        }
    ]
};