vue折线图（按时间查询）

1.vue前端

//查询条件
<template>
<el-date-picker
    v-model="listQuery.toptime"
    :picker-options="pickerOptions"
    style="width: 380px"
    type="daterange"
    clearable
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"/>
  <el-select
    v-model="listQuery.xAxis"
    placeholder="统计粒度"
    clearable
    style="width: 150px"
  >
    <el-option
      v-for="(item, index) in xAxisList"
      :key="index"
      :label="item.value"
      :value="item.id"
    />
  </el-select>
//折线图
	<el-card class="box-card">
	     <div slot="header" class="clearfix">
	          <span>折线图</span>
	     </div>
	     <div id="myChart3" :style="{width: '1400px', height: '600px'}"/>
	</el-card>
</template>

2.对应script代码

// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
require('echarts/lib/chart/pie')

// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')

export default {
data() {
    return {
      listQuery: {
        page: 0,
        limit: 20,
        toptime: null,
        xAxis: null
      },
      XList: [],
      XListName: '',
      YList: [],
      YListName: '',
      xAxisList: [
        { id: 1, value: '年' }, { id: 2, value: '月' }, { id: 3, value: '周' }
      ],
      temp: {
        id: undefined,
        }
    }
  },
  methods: {
  handleFilter1() {
  const listQueryData = Object.assign({}, this.listQuery)
  if (listQueryData.toptime !== null) {
    listQueryData.toptime = JSON.stringify(this.listQuery.toptime)
  } else if (listQueryData.toptime === null) {
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)//默认按周查询
    this.listQuery.toptime = [start, end]
    listQueryData.toptime = JSON.stringify([start, end])
  }
  switch (listQueryData.xAxis) {
    case 1: {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)//按年查询
      this.listQuery.toptime = [start, end]
      listQueryData.toptime = JSON.stringify([start, end])
      break
    }
    case 2: {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)//按月查询
      this.listQuery.toptime = [start, end]
      listQueryData.toptime = JSON.stringify([start, end])
      break
    }
    case 3: {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)//按周查询
      this.listQuery.toptime = [start, end]
      listQueryData.toptime = JSON.stringify([start, end])
      break
    }
  }
  getShareTripCount(listQueryData).then(response => {
    this.XList = response.data.data.XList
    this.YList = response.data.data.YList
    this.YListName = response.data.data.YListName
    this.XListName = response.data.data.XListName
    this.drawLine()
  })
},
//重点
drawLine() {
  const myChart3 = echarts.init(document.getElementById('myChart3'))
  myChart3.showLoading() // 数据加载完之前先显示一段简单的loading动画
  myChart3.hideLoading() // 隐藏加载动画
  // 绘制折线图
  const option = {
    title: {
      text: '分享行程数据统计',
      subtext: ''
    },
    // tooltip: {
    //   trigger: 'axis'
    // },
    legend: {
      data: ['总分享次数', '通过分享注册用户数', '今日分享次数', '今日通过注册分享数']
    },
    // toolbox: {
    //   show: true,
    //   feature: {
    //     mark: { show: true },
    //     dataView: { show: true, readOnly: false },
    //     magicType: { show: true, type: ['line', 'bar'] },
    //     restore: { show: true },
    //     saveAsImage: { show: true }
    //   }
    // },
    calculable: true,
    xAxis: {
      name: this.XListName,
      type: 'category',
      data: this.XList
    },
    yAxis: {
      name: this.YListName,
      type: 'value'
    },
    series: [
      {
        name: '总分享次数',
        type: 'line',
        data: this.YList.sharenumList
        // markPoint: {
        //   data: [
        //     { type: 'max', name: '最大值' },
        //     { type: 'min', name: '最小值' }
        //   ]
        // }
        // markLine: {
        //   data: [
        //     { type: 'average', name: '平均值' }
        //   ]
        // }
      },
      {
        name: '通过分享注册用户数',
        type: 'line',
        data: this.YList.shareUserRegisterList
        // markPoint: {
        //   data: [
        //     { type: 'max', name: '最大值' },
        //     { type: 'min', name: '最小值' }
        //   ]
        // }
        // markLine: {
        //   data: [
        //     { type: 'average', name: '平均值' }
        //   ]
        // }
      },
      {
        name: '今日分享次数',
        type: 'line',
        data: this.YList.shareNumByDayList
        // markPoint: {
        //   data: [
        //     { name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
        //   ]
        // }
        // markLine: {
        //   data: [
        //     { type: 'average', name: '平均值' }
        //   ]
        // }
      },
      {
        name: '今日通过注册分享数',
        type: 'line',
        data: this.YList.shareUserRegisterByDayList
        // markPoint: {
        //   data: [
        //     { name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
        //   ]
        // }
        // markLine: {
        //   data: [
        //     { type: 'average', name: '平均值' }
        //   ]
        // }
      }
    ]
  }
  myChart3.setOption(option)
}
  }
}

3.对应后端controller代码

@RequestMapping(value = "/getShareTripCount", method = RequestMethod.POST)
    @ResponseBody
    public JSONResult getShareTripCount(HttpServletRequest request) {
        try {
            String topTime = request.getParameter("toptime");
            String xAxis = request.getParameter("xAxis");
            Map map = new HashMap();
            if(!StringUtils.isEmpty(xAxis)){
                switch (xAxis){
                    case "1":{
                        break;
                    }
                    case "2":{
                        map= getShareTripCountByTime(topTime);
                        break;
                    }
                    case "3":{
                        map= getShareTripCountByTime(topTime);
                        break;
                    }
                    default:{
                        map= getShareTripCountByTime(topTime);
                        break;
                    }
                }
            }else{
                map=getShareTripCountByTime(topTime);
            }
            return new JSONResult(map, 0, "成功", true);
        } catch (Exception e) {
            e.printStackTrace();
            return new JSONResult(null, 101, "服务器获取失败", false);
        }
    }

private Map getShareTripCountByTime(String topTime) throws ParseException {
    Map map=new HashMap();
    Sort.Order so = new Sort.Order(Sort.Direction.DESC, "id");
    Sort sort = new Sort(so);
    if (!StringUtils.isEmpty(topTime)) {
        topTime = topTime.replace("Z", " UTC");
        Gson gson = new Gson();
        List<String> timeList = gson.fromJson(topTime, new TypeToken<List<String>>() {
        }.getType());
        SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSS Z");
        Date endTime = format.parse(timeList.get(1));
        Date beginTime = format.parse(timeList.get(0));
        List<ShareCount> shareCountList = mongoTemplate.find(Query.query(Criteria.where("createTime").gte(beginTime).lte(endTime)).with(sort), ShareCount.class);
        Calendar c = Calendar.getInstance();
        c.setTime(beginTime);
        int month = c.get(Calendar.MONTH);
        int year = c.get(Calendar.YEAR);
        int day = c.get(Calendar.DATE);
        int dayMax = DateUtil.daysBetween(beginTime, endTime);
        List<String> dayList = new ArrayList<>();
        int monthMaxDay = DateUtil.getDaysByYearMonth(year, month);
        List<String> sharenumList = new ArrayList<>();
        List<String> shareUserRegisterList = new ArrayList<>();
        List<String> shareNumByDayList = new ArrayList<>();
        List<String> shareUserRegisterByDayList = new ArrayList<>();
        int j = 1;
        for (int i = 1; i <= dayMax; i++) {
            String sub = "";
            int yue;
            int di;
            if (monthMaxDay >= i + day) {
                di = day + i;
                yue = month + 1;
                sub = yue + "-" + di;
            } else {
                yue = month + 2;
                di = j;
                sub = yue + "-" + di;
                j++;
            }
            int sharenum = 0;
            String sharenums ="";
            int shareUserRegister = 0;
            String shareUserRegisters ="";
            int shareNumByDay = 0;
            String shareNumByDays ="";
            int shareUserRegisterByDay = 0;
            String shareUserRegisterByDays ="";
            for (ShareCount shareCount : shareCountList) {
                c.setTime(shareCount.getCreateTime());
                int months = c.get(Calendar.MONTH) + 1;
                int years = c.get(Calendar.YEAR);
                int days = c.get(Calendar.DATE);
                if (year == years && yue == months && di == days) {
                    sharenum = sharenum + shareCount.getShareNum();
                    shareUserRegister = shareUserRegister + shareCount.getShareUserRegister();
                    shareNumByDay=shareNumByDay+ shareCount.getShareNumByDay();
                    shareUserRegisterByDay=shareUserRegisterByDay+shareCount.getShareUserRegisterByDay();
                }
            }
            sharenums=String.valueOf(sharenum);
            shareUserRegisters=String.valueOf(shareUserRegister);
            shareNumByDays=String.valueOf(shareNumByDay);
            shareUserRegisterByDays=String.valueOf(shareUserRegisterByDay);
            dayList.add(sub);
            sharenumList.add(sharenums);
            shareUserRegisterList.add(shareUserRegisters);
            shareNumByDayList.add(shareNumByDays);
            shareUserRegisterByDayList.add(shareUserRegisterByDays);
        }
        Map maps=new HashMap();
        maps.put("sharenumList", sharenumList);
        maps.put("shareUserRegisterList", shareUserRegisterList);
        maps.put("shareNumByDayList", shareNumByDayList);
        maps.put("shareUserRegisterByDayList", shareUserRegisterByDayList);

        map.put("type", "month");
        map.put("YList", maps);
        map.put("YListName", "次");
        map.put("XListName", "日期");
        map.put("XList", dayList);
    }
    return map;
}