diantou/src_custom/performance-tracking/xm-time-compare.vue

<template>
  <div id="fullChart" :class="[$style.box, $style.chartswrap]" bordered>
    <div :class="$style.opt">
      <a-radio-group
        v-model="radioVal"
        button-style="solid"
        :class="$style.radio"
        @change="getdata(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 :class="$style.echartclass">
        <div ref="echart" :options="line" autoresize :class="$style.echart"> </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import components from './_import-components/xm-time-compare-import'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/dataZoom'
import TrackService from './track-service'
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
const line = {
  title: {
    text: '关键用户打开时长对比',
    textStyle: {
      color: 'white',
      fontSize: '20',
      fontFamily: fontFamily,
      fontWeight: 200,
    },
    left: 'left',
    padding: [10, 0, 0, 15],
    show: true,
    textAlign: 'left',
    textVerticalAlign: 'left',
  },
  backgroundColor: '#0B3787',
  grid: { left: '10%', top: '30%', right: '10%', bottom: '15%' },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
    padding: [10, 10, 10, 10],
    backgroundColor: 'rgba(255,255,255,0.9)',
    textStyle: {
      color: 'black',
    },
    formatter(params) {
      const val0 = params[0].data[1]
      const val1 = params[1].data[1]
      const val2 = params[2].data[1]
      const color = ['#5DBDEF', '#DC9F69', '#CB03FF']
      const circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`
      const data0 = `${circle}${color[0]}"></span> ${params[0].seriesName}: ${val0}s`
      const data1 = `${circle}${color[1]}"></span> ${params[1].seriesName}: ${val1}s`
      const data2 = `${circle}${color[2]}"></span> ${params[2].seriesName}: ${val2}s`
      return `${params[0].axisValueLabel}<br/>${data0}<br/>${data1}<br/>${data2}<br/>`
    },
  },
  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: ' ' },
      myTool: {
        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.isfull === false) {
            _this.full = true
            _this.timer = null
            _this.$emit('fullcompare', true)
          } else {
            _this.full = false
            _this.$emit('fullcompare', false)
          }
        },
      },
    },
  },
  legend: {
    orient: 'vertical',
    x: 'right',
    y: 'center',
    padding: [10, 0, 20, 10],
    itemGap: 40,
    textStyle: {
      color: 'rgba(255,255,255,0.7)',
    },
  },
  dataZoom: [
    {
      type: 'slider',
      startValue: 0,
      endValue: 5,
      borderColor: '#134690',
      backgroundColor: '#0B3787',
      fillerColor: '#1465BB',
      height: '4%',
      bottom: '2%',
      handleSize: 0,
      showDetail: false, // 不显示拖动条的文字
    },
  ],
  xAxis: [
    {
      type: 'category',
      axisLine: {
        show: false,
        lineStyle: {
          color: '#fff',
          width: 1,
          type: 'solid',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        fontSize: 13,
        color: 'rgba(255,255,255,0.7)',
        interval: 0,
        formatter: function(value) {
          if (value.length > 7) {
            return `${value.slice(0, 4)}...`
          }
          return value
        },
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        show: true,
        color: 'rgba(255,255,255,0.7)',
        fontSize: 13,
        formatter: '{value} s',
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.2)',
          width: 1,
          type: 'solid',
        },
      },
      scale: true,
    },
  ],
  series: [
    {
      name: '平均',
      type: 'bar',
      barWidth: 20,
      barGap: 0,
      emphasis: {
        focus: 'series',
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: 'rgba(38,178,244,.2)' },
          { offset: 0.5, color: 'rgb(0,204,255)' },
          { offset: 1, color: 'rgb(0,204,255)' },
        ]),
      },
      data: [],
    },
    {
      name: '90%',
      type: 'bar',
      barWidth: 20,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: 'rgba(255,117,61,.2)' },
          { offset: 1, color: 'rgb(255,219,128)' },
        ]),
      },
      data: [],
    },
    {
      name: '最大',
      type: 'bar',
      barWidth: 20,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: 'rgba(182,0,241,.2)' },
          { offset: 1, color: 'rgb(255,60,235)' },
        ]),
      },
      data: [],
    },
  ],
}
export default {
  name: 'XmTimeCompare',
  metaInfo: {
    title: 'TimeCompare',
  },
  components,
  props: {
    isfull: {
      type: Boolean,
    },
    fullradio: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      min: [],
      avg: [],
      max: [],
      timer: null,
      timerfull: null,
      chart: null,
      show: false,
      radioVal: '1',
      full: false,
      line: line,
    }
  },
  mounted() {
    this.initData()
    this.automove()
  },
  created() {
    _this = this
    clearInterval(this.timer)
    clearInterval(this.timerfull)
  },
  beforeDestroy() {
    clearInterval(this.timer)
    clearInterval(this.timerfull)
  },
  methods: {
    initData() {
      let params
      if (this.fullradio !== null) {
        params = {
          days: this.fullradio,
        }
      } else {
        params = {
          days: 1,
        }
      }
      TrackService.getOpenTime(params)
        .then((res) => {
          let avglist = []
          let minlist = []
          let maxlist = []
          avglist = res.data.avg.map((item, index) => {
            return ([index] = [item.name, item.val / 1000])
          })
          minlist = res.data.min.map((item, index) => {
            return ([index] = [item.name, item.val / 1000])
          })
          maxlist = res.data.max.map((item, index) => {
            return ([index] = [item.name, item.val / 1000])
          })
          this.line.series[0].data = avglist
          this.line.series[1].data = minlist
          this.line.series[2].data = maxlist
          this.initChart()
          this.listenhover()
        })
        .catch((e) => {})
    },
    listenhover() {
      this.chart.on('mouseover', 'datazoom', function(params) {
        if (!this.timer == null) {
          clearInterval(this.timer)
        } else if (!this.timerfull == null) {
          clearInterval(this.timer)
        }
        this.line.dataZoom[0].endValue = this.chart.getModel().option.dataZoom[0].endValue
        this.line.dataZoom[0].startValue = this.chart.getModel().option.dataZoom[0].startValue
        this.chart.setOption(this.line)
        this.automove()
      })
      this.chart.getZr().on('mouseover', this.stop)
      this.chart.getZr().on('mouseout', this.goMove)
    },
    getdata(days) {
      this.$emit('radiochange', parseInt(days))
      const params = {
        days: days,
      }
      TrackService.getOpenTime(params)
        .then((res) => {
          let avglist = []
          let minlist = []
          let maxlist = []
          avglist = res.data.avg.map((item, index) => {
            return ([index] = [item.name, (item.val / 1000).toFixed(1)])
          })
          minlist = res.data.min.map((item, index) => {
            return ([index] = [item.name, (item.val / 1000).toFixed(1)])
          })
          maxlist = res.data.max.map((item, index) => {
            return ([index] = [item.name, (item.val / 1000).toFixed(1)])
          })
          this.line.series[0].data = avglist
          this.line.series[1].data = minlist
          this.line.series[2].data = maxlist
          if (this.timer) {
            clearInterval(this.timer)
            this.line.dataZoom[0].endValue = 5
            this.line.dataZoom[0].startValue = 0
            this.chart.setOption(this.line)
            // this.automove()
          }
        })
        .catch((e) => {})
    },
    initChart(line) {
      this.$refs.echart.style.width = '100%'
      this.$refs.echart.style.height = '100%'
      this.chart = echarts.init(this.$refs.echart)
      this.chart.setOption(this.line)
    },
    automove() {
      // 两个定时器
      if (this.full === false) {
        this.timer = setInterval(() => {
          // 每次向后滚动一个，最后一个从头开始。
          if (this.line.dataZoom[0].endValue === this.line.series[0].data.length - 1) {
            this.line.dataZoom[0].endValue = 5
            this.line.dataZoom[0].startValue = 0
          } else {
            this.line.dataZoom[0].endValue = this.chart.getModel().option.dataZoom[0].endValue + 1
            this.line.dataZoom[0].startValue =
              this.chart.getModel().option.dataZoom[0].startValue + 1
          }
          this.chart.setOption(this.line)
        }, 2000)
      } else {
        this.timerfull = setInterval(() => {
          if (this.line.dataZoom[0].endValue === this.line.series[0].data.length - 1) {
            this.line.dataZoom[0].endValue = 5
            this.line.dataZoom[0].startValue = 0
          } else {
            this.line.dataZoom[0].endValue = this.chart.getModel().option.dataZoom[0].endValue + 1
            this.line.dataZoom[0].startValue =
              this.chart.getModel().option.dataZoom[0].startValue + 1
          }
          this.chart.setOption(this.line)
        }, 2000)
      }
    },
    stop() {
      if (this.timer) {
        clearInterval(this.timer)
      } else {
        clearInterval(this.timerfull)
      }
    },
    goMove() {
      this.stop()
      this.automove()
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.chartswrap {
  margin-right: 10px;
}
.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: 100px;
    max-width: 100px;
    margin-left: 20px;
    :global(.ant-select) {
      width: 100%;
    }
  }
}
.echartclass {
  position: relative;
  width: 100%;
  height: 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>