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()
      })
    },