diantou/src_custom/performance-tracking/xm-response-times.vue

<template>
  <div>
    <div :class="$style.box">
      <div :class="$style.opt">
        <a-radio-group
          v-model="radioVal"
          button-style="solid"
          :class="$style.radio"
          @change="changeval(radioVal)"
        >
          <a-radio-button value="1">当天</a-radio-button>
          <a-radio-button value="3">近三天</a-radio-button>
          <a-radio-button value="5">近五天</a-radio-button>
          <a-radio-button value="7">近一周</a-radio-button>
        </a-radio-group>
      </div>
      <sd-echart :options="pie" autoresize :class="$style.echart" />
    </div>
  </div>
</template>

<script>
import TrackService from './track-service'
import components from './_import-components/xm-response-times-import'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
const fontFamily = `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`
let _this
export default {
  name: 'XmResponseTimes',
  metaInfo: {
    title: 'ResponseTimes',
  },
  components,
  data() {
    return {
      radioVal: '1',
      full: false,
      pie: {
        tooltip: {
          trigger: 'item',
          // formatter后tooltip不能直接显示数据项的圆形色块，所以用回调函数拼接
          formatter(params) {
            const color = params.color
            const circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`
            const data = `${circle}${color}"></span> ${params.data.name}s: ${params.data.value}`
            return `${params.seriesName}<br/>${data}<br/>`
          },
          backgroundColor: 'rgba(255,255,255,0.9)',
          textStyle: {
            color: 'black',
          },
          axisPointer: {
            type: 'shadow',
          },
          padding: [10, 10, 10, 10],
        },
        legend: {
          top: 'bottom',
          bottom: '1',
          itemGap: 40,
          textStyle: {
            color: 'rgba(255,255,255,0.9)',
          },
          formatter: function(name) {
            return name + 's'
          },
        },
        title: {
          text: '响应时间',
          textStyle: {
            color: 'white',
            fontSize: '20',
            fontFamily: fontFamily,
            fontWeight: 200,
          },
          left: 'left',
          padding: [10, 0, 0, 15],
          show: true,
          textAlign: 'left',
          textVerticalAlign: 'left',
        },
        grid: {
          top: '3%',
          left: '1%',
          right: '1%',
          bottom: '1%',
          containLabel: true,
        },
        color: ['#B903EE', '#DC9F69', '#25B3E1', '#30BE62', '#CC5A63'],
        toolbox: {
          show: true,
          top: '40',
          iconStyle: {
            borderColor: '#fff',
          },
          emphasis: {
            iconStyle: {
              borderColor: '#fff',
            },
          },
          itemSize: 18,
          feature: {
            myReload: {
              show: true,
              title: ' ',
              icon:
                'path://M81.92 634.88h194.56c12.288 0 20.48 8.192 20.48 20.48s-8.192 20.48-20.48 20.48h-161.792c69.632 155.648 225.28 260.096 401.408 260.096 184.32 0 348.16-114.688 411.648-284.672 4.096-10.24 16.384-16.384 26.624-12.288 10.24 4.096 16.384 16.384 12.288 26.624-69.632 186.368-247.808 311.296-450.56 311.296-180.224 0-342.016-100.352-423.936-253.952v135.168c0 12.288-8.192 20.48-20.48 20.48s-20.48-8.192-20.48-20.48v-204.8c0-6.144 2.048-10.24 6.144-14.336s8.192-6.144 14.336-6.144h10.24z m860.16-245.76h-194.56c-12.288 0-20.48-8.192-20.48-20.48s8.192-20.48 20.48-20.48h161.792c-69.632-155.648-225.28-260.096-401.408-260.096-184.32 0-348.16 114.688-411.648 284.672-4.096 10.24-16.384 16.384-26.624 12.288-10.24-4.096-16.384-16.384-12.288-26.624 69.632-186.368 247.808-311.296 450.56-311.296 180.224 0 342.016 100.352 423.936 253.952v-135.168c0-12.288 8.192-20.48 20.48-20.48s20.48 8.192 20.48 20.48v204.8c0 6.144-2.048 10.24-6.144 14.336s-8.192 6.144-14.336 6.144h-10.24z',
              onclick: function() {
                _this.initData()
              },
            },
            saveAsImage: { show: true, title: ' ', backgroundColor: '#0B3787' },
            myFull: {
              show: true,
              title: ' ',
              icon:
                'path://M119.579981 119.560026l185.746448 0c16.074094 0 29.283953-13.134135 29.283953-29.322839 0-16.303314-13.113669-29.321816-29.283953-29.321816l-215.107149 0c-8.037047 0-15.34857 3.282766-20.655436 8.590656-5.383614 5.307889-8.629541 12.619412-8.629541 20.694321L60.934303 305.306474c0 16.074094 13.134135 29.283953 29.321816 29.283953 16.303314 0 29.322839-13.114692 29.322839-29.283953L119.578957 119.560026zM901.51076 119.560026 715.764312 119.560026c-16.093537 0-29.283953-13.134135-29.283953-29.322839 0-16.303314 13.114692-29.321816 29.283953-29.321816l215.107149 0c8.037047 0 15.34857 3.282766 20.655436 8.590656 5.384637 5.307889 8.629541 12.619412 8.629541 20.694321L960.156438 305.306474c0 16.074094-13.134135 29.283953-29.321816 29.283953-16.303314 0-29.322839-13.114692-29.322839-29.283953L901.511783 119.560026zM119.579981 901.489782l185.746448 0c16.074094 0 29.283953 13.133112 29.283953 29.321816 0 16.303314-13.113669 29.321816-29.283953 29.321816l-215.107149 0c-8.037047 0-15.34857-3.28379-20.655436-8.590656-5.383614-5.306866-8.629541-12.619412-8.629541-20.694321L60.934303 715.744357c0-16.075117 13.134135-29.286 29.321816-29.286 16.303314 0 29.322839 13.114692 29.322839 29.286L119.578957 901.489782zM901.51076 901.489782 715.764312 901.489782c-16.093537 0-29.283953 13.133112-29.283953 29.321816 0 16.303314 13.114692 29.321816 29.283953 29.321816l215.107149 0c8.037047 0 15.34857-3.28379 20.655436-8.590656 5.384637-5.306866 8.629541-12.619412 8.629541-20.694321L960.156438 715.744357c0-16.075117-13.134135-29.286-29.321816-29.286-16.303314 0-29.322839 13.114692-29.322839 29.286L901.511783 901.489782z',
              onclick: function() {
                if (_this.full === false) {
                  _this.full = true
                  _this.$emit('fullresponse', true)
                } else {
                  _this.full = false
                  _this.$emit('fullresponse', false)
                }
              },
            },
          },
        },
        series: [
          {
            name: '响应时间',
            type: 'pie',
            label: {
              formatter: '{c} ({d}%)',
              fontSize: 15,
              textStyle: {
                color: 'rgba(255,255,255,0.8)',
              },
            },
            labelLine: {
              length: 5,
              length2: 20,
              lineStyle: {
                color: 'rgba(255,255,255,0.4)',
              },
            },
            radius: [30, 90],
            center: ['50%', '60%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 0,
            },
            data: this.resdata,
          },
        ],
      },
    }
  },
  created() {
    this.initData()
    _this = this
  },
  methods: {
    initData() {
      this.getdata(this.radioVal)
    },
    changeval(val) {
      this.getdata(val)
    },
    getdata(days) {
      const costTime = [2, 3, 5, 8]
      const params = {
        days: days,
        totalCostTimeLimit: costTime + '',
      }
      TrackService.getResponseTime(params)
        .then((res) => {
          if (res.data.length > 0) {
            this.pie.series[0].data = []
            this.pie.series[0].data = res.data
          }
        })
        .catch((e) => {})
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.box {
  position: absolute;
  width: 100%;
  height: 100%;
  color: $card-background;
  background: #0b3787;
  .opt {
    position: relative;
    flex-wrap: wrap;
    height: 100%;
    p {
      flex-basis: 100%;
      padding: 10px 0 5px 15px;
      margin-bottom: 0;
      font-size: $switch-height;
    }
  }
  .radio {
    position: absolute;
    z-index: 99;
    padding-top: 4px;
    margin: 40px 0 0 15px;
  }
  .picker {
    min-width: 170px;
    max-width: 170px;
    margin-left: 20px;
    :global(.ant-select) {
      width: 100%;
    }
  }
}
.echart {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: 100%;
  height: 100%;
  padding-top: 5px;
  padding-right: 20px;
  overflow: hidden;
  transform: translate(-50%, 0%);
}
</style>