var color = ['rgba(46, 217, 243, 1)','rgba(0, 99, 232, 1)','rgba(232, 0, 0, 1)','rgba(0, 255, 0, 1)']
var gradList = [
new echarts.graphic.LinearGradient(1, 1, 1, 0, [{
offset: 0,
color: 'transparent' // 0% 处的颜色，上
}, {
offset: 1,
color: color[0] // 100% 处的颜色，下
}], false),
new echarts.graphic.LinearGradient(1, 1, 0, 1, [{
offset: 0,
color: 'transparent' // 0% 处的颜色，上
}, {
offset: 1,
color: color[1] // 100% 处的颜色，下
}], false),
new echarts.graphic.LinearGradient(1, 0, 1, 1, [{
offset: 1,
color: color[2] // 100% 处的颜色，下
}, {
offset: 0,
color: 'transparent' // 0% 处的颜色，上
}], false),
new echarts.graphic.LinearGradient(1, 0, 1, 1, [{
offset: 1,
color: 'transparent' // 0% 处的颜色，上
}, {
offset: 0,
color: color[3] // 100% 处的颜色，下
}], false),
];
const pieData = [{ value: 100, name: '谷'},{ value: 100, name: '平'},{ value: 100, name: '峰'},{ value: 100, name: '电'}]
var totalNum = pieData.reduce((prev, curr) => {
return prev + curr.value
},0)
var titleX = '50%'
var titleY = '50%'
var titleSize = 28;
option = {
grid: {
left: '0%', // 左边距
right: '0%', // 右边距
top: '0%', // 上边距
bottom: '0%' // 下边距
},
title: [{
text: '{num|' + totalNum + '}' + " MW\n总功率",
x: titleX,
y: titleY,
textAlign: 'center',
textStyle: {
rich: {
num: {
fontSize: titleSize,
fontWeight: 'bold',
lineHeight: 40,
color: '#ccc' // 修改字体颜色为红色
},
},
color: '#ccc' // 修改字体颜色为红色
},
}],
backgroundColor:'transparent',
tooltip: {
trigger: 'item',
// triggerOn:'click',
formatter: params => {
const color = params.color.colorStops? params.color.colorStops[1].color: params.color;
return `<span style="display:inline-block; width:10px; height:10px; border-radius:10px; margin: 0 5px; background: ${ color}"></span>${params.name}：${params.value}`
}
},
series: [{
name: '',
startAngle: 0,
type: 'pie',
clockwise: false,
center:['50%', '50%'],
radius: ['82%', '60%'],
data: pieData,
itemStyle: {
color: (params) => gradList[params.dataIndex],
borderRadius: 40,
},
label: {
show:false
},
emphasis:{
disable:true, //是否关闭扇区高亮效果
scale:false, //扇区是否缩放
}
}]
};