1、代码
// ECharts 水球图插件,需要额外插件脚本,参见上方“脚本”
// 完整配置参数参见:https://github.com/ecomfe/echarts-liquidfill
//两种方式的formatter
var option = {
series: [{
type: 'liquidFill',
name: 'series name', //series name
radius: '35%',
center: ['50%', '20%'],
backgroundStyle: {
borderWidth: 5, //内边框宽度
borderColor: 'yellow', //背景内边框
color: 'white', //背景颜色
shadowColor: 'red', //阴影
shadowBlur: 10, //阴影模糊
},
outline: {
borderDistance: 20, //边框距离
itemStyle: {
borderWidth: 5,
borderColor: 'yellow',
shadowBlur: 10,
shadowColor: 'red'
}
},
data: [{
name: 'data name', //data name
value: 0.6 //By default, the text label of liquid fill chart displays percentage of the first data. For example, for a chart with data [0.6, 0.5, 0.4, 0.3], default text is 60%.
}, 0.5, 0.4, 0.3],
label: { //To change the text, you may use label.formatter, which can be set to a string or function.
normal: {
formatter: '{a}\n{b}\nValue: {c}', //If it is a string, {a} series name, {b} data name,{c} data value.
textStyle: {
color: 'red', //波浪上文本颜色
insideColor: 'yellow', //波浪内部字体颜色
fontSize: 30
},
position: ['30%', '50%'], //Text position is at the center by default. label.position can be set to be 'inside', 'left', 'right', 'top', 'bottom', or horizontal and vertical positions like ['10%', '20%'], which means '10%' to the left (controlled by label.align, which can be 'left', 'center', or 'right') and '20%' to the top (controlled by label.baseline, which can be 'top', 'middle', or 'bottom').
// position:'top'
// align: 'center',
// baseline: 'center'
}
}
},
{
type: 'liquidFill',
name: 'series name', //series name
radius: '35%',
center: ['50%', '60%'],
data: [{
name: 'data name', //data name
value: 0.6
}, 0.5, 0.4, 0.3],
label: {
show:true,
color: tempcolor[2],//和边框颜色同色
fontSize: 16,
normal: {
show:true,
position: ['50%', '50%'],//圈中文字的位置,If it is a string, {a} refers to series name, {b} to data name, and {c} to data value.
formatter: function(param) {
return param.value + '/'+allCount+'\n\n'
+param.seriesName+ '\n'
+ '(个)'
},
/* textStyle: {//整个wave,则把当前值提出
fontSize: 16,
color: tempcolor[2],
},*///这种方法不适用了
color: tempcolor[2],//默认背景下的文字颜色
insideColor: tempcolor[2], //水波背景下的文字颜色
fontSize: 16,
},
}
}
]
};