echart水滴_使用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 //字体大小

}

}

}

}

]

};