diantou/src_custom/performance-tracking/xm-open-fenbu.vue

<template>
  <div>
    <div :class="$style.box" bordered>
      <div :class="$style.echartclass">
        <sd-echart :options="line" autoresize :class="$style.echart"
      /></div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import moment from 'moment'
import TrackService from './track-service'
import components from './_import-components/xm-open-fenbu-import'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/dataZoom'
let _this
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'`
export default {
  name: 'XmOpenFenbu',
  metaInfo: {
    title: 'OpenFenbu',
  },
  components,
  props: {
    isfull: {
      type: Boolean,
    },
  },
  data() {
    return {
      radioVal: '0',
      resdata: [],
      cval: [],
      full: false,
      line: {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255,255,255,0.9)',
          padding: [5, 10, 10, 10],
          textStyle: {
            color: 'black',
          },
          formatter(params) {
            const color = '#0D9CC2'
            const newFormat = 'YYYY-MM-DD HH:mm'
            const timadata = moment(params[0].axisValue).format(newFormat)
            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[0].value[1]}次`
            return `${timadata}<br/>${data}<br/>`
          },
          axisPointer: {
            animation: true,
          },
        },
        backgroundColor: '#01267B',
        grid: [{ show: false }],
        title: {
          text: '打开次数分布',
          textStyle: {
            color: 'white',
            fontSize: '20',
            fontFamily: fontFamily,
            fontWeight: 'normal',
          },
          left: 'left',
          top: '8',
          show: true,
          textAlign: 'left',
          textVerticalAlign: 'left',
        },
        toolbox: {
          show: true,
          top: 5,
          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.full === false) {
                  _this.full = true
                  _this.$emit('fullfenbu', true)
                } else {
                  _this.full = false
                  _this.$emit('fullfenbu', false)
                }
              },
            },
          },
        },
        xAxis: {
          type: 'time',
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: 'rgba(255,255,255,0.7)',
            },
          },
          axisTick: {
            // 隐藏刻度尺
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)',
              width: 0,
              type: 'solid',
            },
          },
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
          axisLabel: {
            textStyle: {
              color: 'rgba(255,255,255,0.7)',
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)',
              width: 0,
              type: 'solid',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.2)',
            },
          },
          data: '',
        },
        dataZoom: [
          {
            type: 'inside',
            start: 100,
            end: 95,
            fillerColor: '#1465BB',
          },
          {
            type: 'slider',
            start: 100,
            end: 95,
            borderColor: '#134690',
            backgroundColor: '#0B3787',
            fillerColor: '#1465BB',
            height: '4%',
            bottom: '2%',
            handleSize: 0,
            showDetail: false, // 不显示拖动条的文字
          },
        ],
        series: [
          {
            name: '打开次数',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            itemStyle: {
              color: 'rgba(255,255,255,0.1)',
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 1,
                  color: '#01267B',
                },
                {
                  offset: 0.5,
                  color: '#12CEE1',
                },
                {
                  offset: 0,
                  color: '#12CEE1',
                },
              ]),
            },
            data: '',
          },
        ],
      },
    }
  },
  created() {
    _this = this
    this.initData()
  },
  mounted() {},
  methods: {
    initData() {
      const params = {
        days: 7,
      }
      TrackService.getOpenfenbu(params)
        .then((res) => {
          let data = []
          data = res.data.map((item) => {
            const obj = {}
            obj.name = item.time
            obj.value = [item.time, item.count]
            return obj
          })
          data.sort((a, b) => {
            return b.name - a.name
          })
          this.line.series[0].data = data
          this.cval = data.map((item) => {
            return item.value
          })
        })
        .catch((e) => {})
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.box {
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 10px;
  color: $card-background;
  p {
    margin-bottom: 0;
    font-size: $switch-height;
  }
  .opt {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 5px 15px;
  }
  .radio {
    padding-top: 4px;
  }
}
.echart {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  padding: 0 0 0 10px;
  margin-top: 10px;
  transform: translate(-50%, 0%);
}
</style>