springboot+vue+element：echarts开发遇见问题---vue前端(二)

<template>
  <u-grid>
    <u-grid-item caption="服务使用统计排行">
      <div class="u-grid-tools" slot="tools">
        <el-button @click="exportExcel">导 出</el-button>
      </div>
      <div class="app-main">
        <u-search-form
          :formOption="formOption"
          v-model="formValue"
          @form-submit="search"
          :tableLoading="tableLoading">
        </u-search-form>
        <u-grid class="u-grid-app">
          <u-grid-item
            caption="次数统计排行"
            :span="24">
            <div style="height: 420px">
              <eCharts
                ref="echartsColumnData"
                class="app-charts-chart"
                @click="triggerEvent"
                :options="chartColumnOptions"></eCharts>
            </div>
          </u-grid-item>
        </u-grid>
      </div>
    </u-grid-item>
  </u-grid>
</template>

<script>
  import uGrid from '@/components/ui/u-grid';
  import uGridItem from '@/components/ui/u-grid-item';
  import uSearchForm from '@/components/ui/u-search-form';
  import {mapActions} from "vuex";
  import eCharts from 'vue-echarts';

  export default {
    name: 'service-ranking',
    data() {
      return {

        list: [],

        tableLoading: false,

        Dic: {},
        formOption: {
          dic: ['RANKING'],
          column: [
            {
              // request_count/error_count/circuit_count/rate_limit_count
              label: '排行选择',
              prop: 'ranking_select',
              type: "select",
              dicData: "RANKING"
            },
            {
              label: '时间选择',
              prop: 'time_select',
              type: 'select',
              overHidden: true,
              dicData: [
                {
                  label: "3日排行",
                  value: "3"
                },
                {
                  label: "7日排行",
                  value: "7"
                },
                {
                  label: "月排行",
                  value: "30"
                },
                {
                  label: "历史排行",
                  value: "90"
                }
              ]
            },
            {
              label: '数量选择',
              prop: 'top_row',
              type: 'select',
              overHidden: true,
              dicData: [
                {
                  label: "TOP 5",
                  value: "5"
                },
                {
                  label: "TOP 10",
                  value: "10"
                },
                {
                  label: "TOP 15",
                  value: "15"
                },
                {
                  label: "TOP 20",
                  value: "20"
                }
              ]
            },
            {
              label: '顺序选择',
              prop: 'sortord',
              type: 'select',
              overHidden: true,
              dicData: [
                {
                  label: "倒序",
                  value: "asc"
                },
                {
                  label: "顺序",
                  value: "desc"
                }
              ]
            }
          ]
        },

        formValue: {
          id: this.$route.params.id,
          ranking_select: '',
          time_select: '',

          begin_time: '',
          end_time: '',

          top_row: '',
          sortord: '',
        },
        chartColumnOptions: {},
        echartsColumnData: [],

        serviceId: [],
        serName: [],
        serCount: [],
      };
    },
    components: {
      uGrid,
      uGridItem,
      uSearchForm,
      eCharts
    },

    created() {
      this.changeBars();
      this.GetDic(['RANKING']).then(data => {
        this.Dic = data;
      });
      this.getTimeSelect();
    },
    computed: {
      // ...mapGetters(['GetDic']),
    },
    is_submit: false,
    methods: {
      ...mapActions(["GetDic"]),

      triggerEvent(a) {
        let name = a.value;
        this.list.forEach(item => {
          if (name == item.name) {
            this.serviceId = item.ser_id;
          } else {
          }
        })
        this.$router.push('/service-ranking/detail/' + this.serviceId);
      },

      exportExcel() {
        this.getTimeSelect();
        this.exportData();
      },

      exportData() {
        if (this.formValue.ranking_select == '' || this.formValue.time_select == '' ||
          this.formValue.top_row == '' || this.formValue.sortord == '') {
          this.$message({
            showClose: true,
            message: "所有条件必选！",
            type: "error"
          });
          return;
        } else {
          axios.get('/service-ranking-excel/export-ranking-search?rankingSelect=' + this.formValue.ranking_select + '&topRow=' + this.formValue.top_row + '&Sortord=' + this.formValue.sortord + '&beginTime=' + this.formValue.begin_time + '&endTime=' + this.formValue.end_time, {
            responseType: 'blob',
          }).then((response) => {
            let url = window.URL.createObjectURL(response.data)
            let link = document.createElement('a')
            link.style.display = 'none';
            link.href = url;
            //配置下载的文件名
            link.setAttribute('download', '服务使用排行统计列表.xls');
            document.body.appendChild(link);
            link.click()
          })
        }
      },

      search() {
        this.getTimeSelect()
        this.getChange();
      },

      changeDateType(date) {
        let seperator = "-";
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let strDate = date.getDate();
        let hours = date.getHours();
        let minutes = date.getMinutes();
        let seconds = date.getSeconds();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        if (hours >= 0 && hours <= 9) {
          hours = "0" + hours;
        }
        if (minutes >= 0 && minutes <= 9) {
          minutes = "0" + minutes;
        }
        if (seconds >= 0 && seconds <= 9) {
          seconds = "0" + seconds;
        }
        return (year + seperator + month + seperator + strDate
          + " " + hours + ":" + minutes
          + ":" + seconds);
      },

      getTimeSelect() {
        this.formValue.end_time = this.changeDateType(new Date(Date.now()));
        if (this.formValue.time_select == 3) {
          this.formValue.begin_time = this.GetPrevDay(3);
        }
        if (this.formValue.time_select == 7) {
          this.formValue.begin_time = this.GetPrevDay(7);
        }
        if (this.formValue.time_select == 30) {
          this.formValue.begin_time = this.GetPrevDay(30);
        }
        if (this.formValue.time_select == 90) {
          this.formValue.begin_time = this.GetPrevDay(90);
        }
      },

      GetPrevDay(str) {
        let yesterday = new Date(new Date() - 24 * 60 * 60 * 1000 * str);
        return this.changeDateType(yesterday);
      },

      getChange() {
        //查询排行-及时间选择
        if (this.formValue.ranking_select == '' || this.formValue.time_select == '' ||
          this.formValue.top_row == '' || this.formValue.sortord == '') {
          this.$message({
            showClose: true,
            message: "所有条件必选！",
            type: "error"
          });
          return;
        } else {
          axios.post('/service-invoke-ranking/get-sum-request-ranking-count', {
            ranking_select: this.formValue.ranking_select,
            top_row: this.formValue.top_row,
            sortord: this.formValue.sortord,
            end_time: this.formValue.end_time,
            begin_time: this.formValue.begin_time,
          }).then(res => {
            if (res != null && this.GLOBAL.respSuc == res.data.result_code) {
              let data = res.data.data;
              this.list = data;
              this.serName = [];
              this.serCount = [];
              this.serviceId = [];
              data.forEach(item => {
                this.serName.push(item.name);
              });
              data.forEach(item => {
                this.serCount.push(item.count);
              });
              data.forEach(item => {
                this.serviceId.push(item.serId);
              });
              if (this.list != '') {
                this.changeBars();
              } else {
                // alert("查询结果为空");
                this.$message({
                  showClose: true,
                  message: "查询结果为空！",
                  type: "error"
                });
                this.changeBars();
              }
            } else {
              //查询失败
            }
          });
        }
      },

      getColor(x = 0, y = 0, x2 = 0, y2 = 1) {
        return {
          color: {
            type: 'linear',
            x,
            y,
            x2,
            y2,
            colorStops: [{
              offset: 0, color: '#CFDEED'
            }, {
              offset: 1, color: '#E7EBEF'
            }],
          }
        };
      },

      changeBars: function () {
        return this.chartColumnOptions = {
          legend: {
            right: 0,
            data: ['统计次数']
          },
          title: {
            subtext: '服务名称',
          },
          textStyle: {
            color: '#888F95',
            fontFamily: 'Microsoft YaHei',
            fontSize: 14
          },
          grid: {
            top: 35,
            right: 0,
            bottom: 5,
            left: 0,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            offset: 5,//第一个服务跟x轴的距离
            nameLocation: 'end',
            axisLabel: {
              interval: 0,
              rotate: 30
            },
            splitLine: {
              show: true,
              lineStyle: this.getColor(0, 0, 1)
            },
            axisLine: {
              show: true,
              symbol: ['none', 'arrow'],
              lineStyle: {
                color: '#CFDEED'
              }
            },
            axisTick: {
              show: true,
              alignWithLabel: true,
              lineStyle: {
                color: '#75BBFF'
              }
            },
          },
          yAxis: {
            splitLine: {
              show: false
            },
            //触发事件，为y轴标签/文字添加点击事件
            triggerEvent: true,
            componentType: String,
            axisLabel: {
              interval: 0,
              color: "#000",
              formatter: function (value) {
                if (value.length > 6) {
                  return value.substring(0, 6) + "...";
                } else {
                  return value;
                }
              },
            },

            axisLine: {
              show: true,
              lineStyle: {
                color: '#CFDEED'
              }
            },
            axisTick: {
              show: true,
              alignWithLabel: true,
              lineStyle: {
                color: '#75BBFF'
              }
            },
            type: 'category',
            data: this.serName
          },
          series: [
            {
              name: '统计次数',
              type: 'bar',
              data: this.serCount,
              itemStyle: {
                color: '#51A5DE'
              },
              barWidth: 20,
              barGap: '0',
            },
          ]
        }
      },
    },
  }
</script>

<style scoped>

</style>