You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
2.5 KiB
95 lines
2.5 KiB
import * as echarts from 'echarts'
|
|
import _ from 'lodash';
|
|
export const getOption = (datas) => {
|
|
let max = _.max(datas?.map(data => data.value));
|
|
max = max * 1.2
|
|
const colors = ['#00E9CB', '#E2C334', '#1F68E2', '#747DF8', '#31B9FF', '#44DA84'];
|
|
const richObj = {
|
|
value: {
|
|
color: '#fff',
|
|
fontWeight: 'bold',
|
|
fontSize: 14
|
|
}
|
|
};
|
|
datas.forEach((d, i) => {
|
|
richObj[i] = {
|
|
color: colors[i] || colors[0],
|
|
fontWeight: 'bold',
|
|
fontSize: 14
|
|
}
|
|
})
|
|
const unit = datas?.[0]?.unit || ''
|
|
return {
|
|
tooltip: {
|
|
|
|
textStyle: {
|
|
color: '#fff',
|
|
},
|
|
backgroundColor: '#05294D',
|
|
borderColor: '#135469',
|
|
borderWidth: 2,
|
|
show: true,
|
|
formatter: '{b}: <b>{c}</b> ' + unit
|
|
},
|
|
grid: {
|
|
top: '0',
|
|
left: '0',
|
|
bottom: '0',
|
|
textStyle: {
|
|
color: '#fff',
|
|
},
|
|
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
show: true,
|
|
orient: 'vertical',
|
|
right: 0,
|
|
icon: 'circle',
|
|
itemWidth: 10,
|
|
itemHeight: 10,
|
|
top: 'center',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 14,
|
|
rich: richObj
|
|
},
|
|
itemGap: 16,
|
|
formatter: function (name) {
|
|
let index = datas.findIndex((item) => item.name === name);
|
|
const item = datas[index];
|
|
const unit = item.unit;
|
|
const valueText = '{' + index + '|' + item.value + '}'
|
|
return `${item.name} ${valueText} ${unit}`;
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
color: colors,
|
|
type: 'pie',
|
|
radius: ['52', '80'],
|
|
data: datas?.map(data => {
|
|
return {
|
|
name: data.name,
|
|
value: data.value
|
|
}
|
|
}),
|
|
center: ['30%', '50%'],
|
|
label: {
|
|
show: false
|
|
}
|
|
},
|
|
{
|
|
type: 'pie',
|
|
radius: ['90', '92'],
|
|
color: ['#bed2e04d'],
|
|
data: [max],
|
|
center: ['30%', '50%'],
|
|
label: {
|
|
show: false
|
|
}
|
|
},
|
|
]
|
|
};
|
|
|
|
} |