Echarts水滴圖
阿新 • • 發佈:2019-01-09
製作水滴圖需要引用第三方指令碼: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,
}
}
}
}]
};