echarts实现饼图中心水球图
var val1data2 = [{
value: 0.8,
name: '开机机床数',
},
{
value: 0.1,
name: '待机机床数',
},
{
value: 0.1,
name: '故障机床数',
}
]
var arr = ['middleLost', 0.6, val1data2, '设备总数']
option = {
backgroundColor: '#0e2147',//整体背景颜色
title: {
top: '50%',
left: 'center',
text: arr[3],
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontSize: '20'
},
//subtext: '(占所有数据的的' + (arr[1] * 10000 / 100).toFixed(2) + '%)',
subtext: '2115607',
subtextStyle: {
color: '#fff',
fontSize: 25
}
},
tooltip: {
trigger: 'item',
formatter: function(res) {
console.log(res)
if (res.componentSubType == 'liquidFill') {
return res.seriesName + ': ' + (res.value * 10000 / 100).toFixed(2) + '%';
} else {
return '' + res.name + ':
' + res.data.value;
}
}
},
series: [{
type: 'liquidFill',
name: arr[3],
data: [{
value: 0.6,
itemStyle: {
normal: {
color: 'red',
opacity: 0.6,
}
}
}],
color: ['#3176B3'], //改变水球颜色
center: ['50%', '50%'], //让水球图置于中央
label: {
normal: {
formatter: '',
textStyle: {
fontSize: 20
}
}
},
outline: {
itemStyle: {
borderColor: '#86c5ff',
borderWidth: 0
},
borderDistance: 1
}
},
{
type: 'pie',
radius: ['42%', '50%'],
color: function(params) {//改变饼图颜色以及调整为渐变色
var colorList1 = ['#0CF1F8', '#DE4D53', '#115288',];
var colorList2 = ['#B0FCBD', '#DE4D53', '#115288',];
var colorList3 = ['#0CF1F8', '#DE4D53', '#115288',];
var index = params.dataIndex;
return new echarts.graphic.LinearGradient(0, 0.5, 0.75, 1,
[{
offset: 0,
color: colorList1[index]
},{
offset: 0.5,
color: colorList1[index]
},
{
offset: 1,
color: colorList2[index]
}
]);
},
hoverAnimation: true, ////设置饼图默认的展开样式
label: {
show: true,
normal: {
formatter: '{b}',
//formatter: '{b}\n{d}%',
show: true,
position: '',
color:'#62D7F3',
fontSize:18,
},
},
// label: {
// normal: {
// formatter: function(params, ticket, callback) {
// var total = 0; //考生总数量
// var percent = 0; //考生占比
// echartData.forEach(function(value, index, array) {
// total += value.value;
// });
// percent = ((params.value / total) * 100).toFixed(1);
// return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
// },
// rich: rich
// },
// },
labelLine: {
normal: {
show: true,
length: 30 ,
length2: 25 ,
lineStyle:{
color:'#fff'
}
}
},
itemStyle: { // 此配置
normal: {
borderWidth: 0,
borderColor: '#fff',
},
emphasis: {
borderWidth: 0,
shadowBlur: 0,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: arr[2]
}
]
}