initEchart(data){
// data={
// rate: {failed: [0, '0.0%'], running: [0, '0.0%'], unknown: [0, '0.0%'], pending: [0, '0.0%'],successed: [0, '0.0%']},
// summary_count: 0
// }
this.echart_order = echarts.init(document.getElementById('echart_order'))
let totalCount = data.summary_count
let legendData = ['成功','初始化','创建中','失败','未知数']
let state_mapping={
'failed':'失败',
'successed':'成功',
'running':'创建中',
'pending':'初始化',
'unknown':'未知数',
}
let pmTypeData = []
if(data.rate){
pmTypeData= Object.keys(data.rate).map(item=>{
return {
name:state_mapping[item],
value:data.rate[item][0]
}
})
}
let option = {
tooltip: {
trigger: 'item',
formatter: '{b}<br/> {c}个 ({d}%)'
},
color,
legend:{
orient: 'vertical',
itemHeight: 10,
padding: 10 ,
icon:'circle',
align: 'auto',
top:'middle',
right:'30px',
data: legendData,
formatter:(name)=>{
var data = pmTypeData
var tarValue = data.find(item=>item.name === name).value
return '{a|'+name+'}' + '： ' + ' ' +'{b|'+ tarValue +'个'+'}'
},
textStyle:{
rich:{
a:{
fontSize:12,
fontFamily:'PingFangSC-Regular,PingFang SC',
fontWeight:400,
color:'#888888'
},
b:{
width:55,
fontSize:12,
fontFamily:'PingFangSC-Regular,PingFang SC',
fontWeight:400,
color:'#353535',
}
}
}
},
series: [
{
type: 'pie',
radius:['50%', '64%'],
center: ['40%', '50%'],
circlePoition:'center',
width:183,
height:183,
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center',
formatter: `{a|${totalCount}个}`,
textStyle: {
rich: {
a:{
fontSize:14,
fontFamily:'PingFangSC-Semibold,PingFang SC',
fontWeight:'normal',
color:'#000000',
}
}
}
}
},
data: pmTypeData
}
]
}
this.echart_order.setOption(option)
window.addEventListener('resize', () => {
this.echart_order.resize()
})
},
initTrendEchart(data){
let failedList =[],pendingList=[],runningList = [],successedList =[],unknownList=[],totalList=[]
let failedRatio =[],pendingRatio=[],runningRatio = [],successedRatio =[],unknownRatio =[]
let totalCount = []
data.forEach(item=>{
failedList.push(item.summary_data.rate && item.summary_data.rate.failed ? item.summary_data.rate.failed[0] : 0 )
pendingList.push(item.summary_data.rate && item.summary_data.rate.pending ? item.summary_data.rate.pending[0] : 0 )
runningList.push(item.summary_data.rate && item.summary_data.rate.running ? item.summary_data.rate.running[0] : 0 )
successedList.push(item.summary_data.rate && item.summary_data.rate.successed ? item.summary_data.rate.successed[0] : 0 )
unknownList.push(item.summary_data.rate && item.summary_data.rate.unknown? item.summary_data.rate.unknown[0] : 0 )
totalList.push(item.summary_data.rate && item.summary_data.rate.successed ? item.summary_data.rate.successed[1].replace(/%/,'') : 0)
failedRatio.push(item.summary_data.rate && item.summary_data.rate.failed ? item.summary_data.rate.failed[1] : '0%')
pendingRatio.push(item.summary_data.rate && item.summary_data.rate.pending ? item.summary_data.rate.pending[1] : '0%')
runningRatio.push(item.summary_data.rate && item.summary_data.rate.running ? item.summary_data.rate.running[1] : '0%')
successedRatio.push(item.summary_data.rate && item.summary_data.rate.successed ? item.summary_data.rate.successed[1] : '0%')
unknownRatio.push(item.summary_data.rate && item.summary_data.rate.unknown ? item.summary_data.rate.unknown[1] : '0%')
totalCount.push(item.summary_data.summary_count)
})
this.echart_trend = echarts.init(document.getElementById('echart_trend'))
let x_data = data.map(item=>{
return item.date
})
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
},
formatter(item){
let result = item[0].axisValue + '<br>'
for (let i = 0; i < item.length; i++) {
if (item[i].seriesName === '成功率') {
result+= ''
}else if(item[i].seriesName === '成功'){
result+= `<div style="display: inline-block; width: 10px; height: 10px; background:${item[i].color}; border-radius: 10px"></div>`+ ' '+item[i].seriesName +':'+ ' ' + item[i].value + '个' + ' '+'('+successedRatio[item[i].dataIndex]+')'+ '<br>'
}else if(item[i].seriesName === '初始化'){
result+= `<div style="display: inline-block; width: 10px; height: 10px; background:${item[i].color}; border-radius: 10px"></div>`+ ' '+item[i].seriesName +':'+ ' ' + item[i].value + '个' + ' '+'('+pendingRatio[item[i].dataIndex]+')'+ '<br>'
}else if(item[i].seriesName === '创建中'){
result+= `<div style="display: inline-block; width: 10px; height: 10px; background:${item[i].color}; border-radius: 10px"></div>`+ ' '+item[i].seriesName +':'+ ' ' + item[i].value + '个' + ' '+'('+runningRatio[item[i].dataIndex]+')'+ '<br>'
}else if(item[i].seriesName === '失败'){
result+= `<div style="display: inline-block; width: 10px; height: 10px; background:${item[i].color}; border-radius: 10px"></div>`+ ' '+item[i].seriesName +':'+ ' ' + item[i].value + '个' + ' '+'('+failedRatio[item[i].dataIndex]+')'+ '<br>'
}else if(item[i].seriesName === '未知数'){
result+= `<div style="display: inline-block; width: 10px; height: 10px; background:${item[i].color}; border-radius: 10px"></div>`+ ' '+item[i].seriesName +':'+ ' ' + item[i].value + '个' + ' '+'('+unknownRatio[item[i].dataIndex]+')'+ '<br>'
}
else{
result+= '<div style="display: none;"></div>'
}
}
return result
}
},
legend: {
data: ['成功','初始化','创建中','失败','未知数','成功率']
},
xAxis: [
{
type: 'category',
axisLabel: {
// interval:0 //强制显示横坐标
},
data: x_data,
axisPointer: {
// type: 'shadow'
}
}
],
barWidth: '20%',
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value}'
},
splitLine: {
lineStyle: {
type: 'solid'
}
}
},
{
type: 'value',
axisLabel: {
formatter: '{value}%'
},
splitLine:{
show:false//不显示分隔线
}
}
],
series: [
{
name: '成功',
type: 'bar',
stack: 'total',
color:'#7ab0fe',
data: successedList
},
{
name: '初始化',
type: 'bar',
stack: 'total',
color:'#5bcfc2',
data: pendingList
},
{
name: '创建中',
type: 'bar',
stack: 'total',
color:'#fff59c',
data: runningList
},
{
name: '失败',
type: 'bar',
stack: 'total',
color:'#f88e80',
data: failedList
},
{
name: '未知数',
type: 'bar',
stack: 'total',
color:'#f8b974',
data: unknownList
},
{
name: '统计',
type: 'bar',
stack: 'total',
data: [0, 0, 0, 0, 0, 0, 0], //模拟数据
label: {
normal: {
show: true,
position: 'top',
formatter: function (params) {
return totalCount[params.dataIndex]
},
textStyle: {
color: 'black',
fontSize: 12,
}
}
}
},
{
name: '成功率',
type: 'line',
yAxisIndex: 1,
color:'#0080FF',
data: totalList
}
]
}
this.echart_trend.setOption(option)
window.addEventListener('resize', () => {
this.echart_trend.resize()
})
},
网友评论