制作水滴图需要引用第三方脚本:http://echarts.baidu.com/resource/echarts-liquidfill-latest/dist/echarts-liquidfill.min.js
普通水滴图:
//首先使用background来修改整体的图背景
option = {
backgroundColor: 'white',
//调整下整体的背景
series: [{
type: 'liquidFill',
data: [0.264]
}]
};
修改下字体的大小:
option = {
backgroundColor: 'white',
series: [{
type: 'liquidFill',
data: [0.6],
label: {
normal: {
//fontSize:80
//这里也可以设置
textStyle: {
fontSize: 80
//修改字体大小
}
}
}
}]
};
多数据显示水滴图:
var option = {
backgroundColor: 'white',
series: [{
type: 'liquidFill',
name: 'Multi-Data',
data: [0.7, 0.5, 0.3],
//输入多个数据
label: {
normal: {
position: ['50%', '20%'],
//此处调节显示的位置
formatter: function() {
return 'Multi-Data';
},
textStyle: {
fontSize: 30,
//设置字体大小
}
}
}
}]
};
心形水滴图:
// 水球图学习 from Ovilia 1024
//基本显示 修改样式 文字大小 颜色调整
var option = {
backgroundColor:'white',
series: [{
type: 'liquidFill',
name: 'Multi-Data',
radius:'60%',
shape:"path://M18.98 5.7c-.24-2.36-2.24-4.2-4.66-4.2-1.95 0-3.6 1.18-4.32 2.87-.7-1.7-2.37-2.87-4.32-2.87-2.42 0-4.42 1.84-4.66 4.2L1 6.18c0 5.7 6.98 8.38 9 12.17 2.02-3.8 9-6.48 9-12.17 0-.16 0-.32-.02-.48z",
data: [{'name':'Frist','value':'0.7'},0.5,0.3], //datat
outline: {
show: false,
},
backgroundStyle: {
borderColor: '#156ACF',
borderWidth: 1,
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20
},
label:{
normal:{
position:['50%','40%'],
formatter: '{a} Value: {c}',
textStyle:{
fontSize:30,
}
}
}
}]
};
小圆形水滴图:
var option = {
backgroundColor: 'white',
series: [{
type: 'liquidFill',
name: 'Multi-Data',
data: [{
'name': 'Frist',
'value': '0.7'
}, 0.5, 0.3],
//其中第一个数值由键值对表示
label: {
normal: {
position: ['50%', '20%'],
formatter: '{a}\n{b} Value: {c}',
//{a}表示系列名,{b}为键名,{c}为值
textStyle: {
fontSize: 30,
}
}
}
}]
};
其它大小和形状水滴图:
var option = {
backgroundColor: 'white',
series: [{
type: 'liquidFill',
name: 'Multi-Data',
radius: '80%',//调整大小
shape:'ract', //修改形状,目前支持 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
//'container'支持占满整个元素容器
//同时还支持svg图作为形状:'path://balabalaba'
data: [{
'name': 'Frist',
'value': '0.7'
}, 0.5, 0.3],
label: {
normal: {
position: ['50%', '20%'],
formatter: '{a}\n{b} Value: {c}',
textStyle: {
fontSize: 30,
}
}
}
}]
};