天天看點
傳回

Vue-Echarts 頁面開發及背景實作執行個體

一、介紹

用走勢圖展示使用者資料

二、實作圖解

Vue-Echarts 頁面開發及背景實作執行個體

三、Vue技術要點

  1.頭部布局采用Element ¶Layout 布局基礎布局 el-row

  2.cart 采用Element el-card元件

    由于el-card 元件頭部插槽影響布局效果需要去除

<el-card :header="false"  class="card">

  3.時間選取Element  el-date-picker元件

  4.走勢圖 根據背景傳回的資料動态顯示

四、視圖展示介紹

1.走勢圖配置

<div class="user_body_bottom_b">
        <v-chart :options="chart" :auto-resize="true" :style="{width:'100%'}" >
        </v-chart>
      </div>


data () {
    return {
      countImgsrc: require('../../assets/[email protected]'),
      actualImgsrc: require('../../assets/[email protected]'),
      recentImgsrc: require('../../assets/[email protected]'),
      loading: false,
      userTotal: null,
      sevenTotal: null,
      platData: null,
      chartDate: null,
      chartData: null,
      pickDate: null,
      chart: {
        tooltip: {
          trigger: 'axis'
        },
        title: {
          text: '使用者增長統計',
          left: -5,
          size: 10,
          fontSize: 11,
          show: false
        },
        //x軸配置
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: this.chartData,
          nameTextStyle: {
            fontWeight: 600,
            fontSize: 11,
            align: 'center'
          },
          axisLine: {
            show: true,
            onZero: false
          },
          axisTick: {
            show: true,
            interval: 1
          },
          axisLabel: {
            fontSize: 12
          }
        },
        //走勢圖布局配置
        grid: {
          left: '3%',
          right: '5%',
          top: '20%',
          bottom: '15%',
          containLabel: true
        },
        //y軸設定
        yAxis: {
          type: 'value',
          nameTextStyle: {
            fontWeight: 600,
            fontSize: 18
          },
          splitLine: { // 網格線
            lineStyle: {
              type: 'dashed' // 設定網格線類型 dotted：虛線   solid:實線
            },
            show: true // 隐藏或顯示
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: true
          }
        },
        legend: {
          data: ['iOS', '安卓', '小程式', '微信公衆号'],
          right: '30',
          top: '5%'
        },
        series: [
          {
            name: 'iOS',
            data: null,
            type: 'line',
            smooth: false,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
              show: true,
              normal: {
                color: 'rgb(255, 70, 131)'
              }
            }
          },
          {
            name: '安卓',
            data: null,
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
              show: true,
              normal: {
                color: '#0707FF'
              }
            }
          },
          {
            name: '小程式',
            data: null,
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
              show: true,
              normal: {
                color: '#00FF00'
              }
            }
          },
          {
            name: '微信公衆号',
            data: null,
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
              show: true,
              normal: {
                color: '#FFD700'
              }
            }
          }
        ],
        animationDuration: 2000
      }
    }
  }

  2.在頁面 mounted方法中資料請求

mounted () {
    this.initUserStatisticsData()
  },
  methods: {
    initUserStatisticsData () {
      this.loading = true
      let url = '/zm/user/doQueryPlatData'
      getRequest(url).then(resp => {
        if (resp) {
          this.userTotal = resp.count
          this.sevenTotal = resp.sevenCount
          this.platData = resp.platdata
          this.chartDate = resp.date
          this.chartData = resp.data
          this.chartDataProcessing()
        }
        this.loading = false
      })
    },
    chartDataProcessing () {
      this.chart.xAxis.data = this.chartDate
      for (var item of this.platData) {
        var index = this.platData.indexOf(item)
        this.chart.series[index].data = this.chartData[item.platname]
        console.log(item)
      }
    },
    getMyDateTime (t) {
      if (t == null) {
        return
      }
      console.log(t)
      this.loading = true
      var listdate = pickerAllDate(t[0], t[1])
      let url = '/zm/user/doQueryDatePlatUser/?beginDateScope=' + t
      getRequest(url).then(resp => {
        if (resp) {
          this.chartDate = listdate
          this.chartData = resp
          this.chartDataProcessing()
        }
        this.loading = false
      })
      console.log(listdate)
    }
  }
  •   資料請求成功後 在處理方法  chartDataProcessing 複制給走勢圖需要的資料
  •   時間選取回調方法 getMyDateTime 向背景資料請求

五.背景介紹

1.Controller

@RestController
@RequestMapping("/zm/user")
public class UserMgrController {
    @Resource
    UserService userService;
    @RequestMapping("/doQuery")
    public RespPageBean getUsersByPage(@RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "10") Integer size, @RequestBody User user,Date[] beginDateScope)
    {
        return userService.getUsers(page,size,beginDateScope,user);
    }

    @RequestMapping("/doQueryPlatData")
    public Map getPlatUserData(){
      return userService.getPlatUserData();
    }

    @RequestMapping("/doQueryDatePlatUser")
    public Map getUserDataByDate(Date[] beginDateScope) throws QueryDateException {
        return userService.getPlatUserDataByDate(beginDateScope);
    }
}

2.service

@Service
public class UserService {
    @Resource
    UserMapper userMapper;

    public RespPageBean getUsers(Integer page, Integer size, Date[] beginDateScope,User user)
    {
        if (page != null && size != null) {
            page = (page - 1) * size;
        }
        List<User> data = userMapper.getUserList(page,size,beginDateScope,user);
        Long total = userMapper.getTotal(user,beginDateScope);
        RespPageBean bean = new RespPageBean();
        bean.setData(data);
        bean.setTotal(total);
        return  bean;
    }

    //使用者資料初始化擷取的資料
    public Map getPlatUserData(){
        Map map = new HashMap();
        List<UserAtatistics> platdata = userMapper.getPlatUserData();
        long usercount = userMapper.getUserCount();
        //平台類型統計
        map.put("platdata",platdata);
        //使用者總數
        map.put("count",usercount);
        //最近七天的使用者總數
        long sevenCount = userMapper.getUserLastSevenDaysCount();
        map.put("sevenCount",sevenCount);
        //放入最近七天日期
        String [] arr = new String[7];
        List  servendate = new ArrayList();
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        Calendar c = null;
        for (int i=0;i<7;i++){
            c=Calendar.getInstance();
            c.add(Calendar.DAY_OF_MONTH, - i-1);
            arr[6-i] =sdf.format(c.getTime());
        }
        Map sevendatamap = new HashMap();
        //統計每個平台最近七天的資料，沒有的日期補零
        for( UserAtatistics item : platdata )
        {
            List dt = userMapper.getPlatUserDataLastSevenDaysByPid(item.getPid());
            sevendatamap.put(item.getPlatname(),dt);
        }

        map.put("date",arr);
        map.put("data",sevendatamap);
        return  map;

    }

    public Map getPlatUserDataByDate(Date[] beginDateScope) throws QueryDateException {
        if (beginDateScope == null) {
            throw new QueryDateException("查詢日期不能為空");
        }
        List<UserAtatistics> platdata = userMapper.getPlatUserData();
        Map map = new HashMap();
        for( UserAtatistics item : platdata )
        {
            List dt = userMapper.getUserCountByDateId(item.getPid(),beginDateScope);
            map.put(item.getPlatname(),dt);
        }
        return  map;

    }
}

3.mapper映射檔案

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.kxg.zhz.mapper.UserMapper" >
    <sql id="User_Base_Column_List" >
     uid,nickname,userface,authstatus,regdate,cvstatus,wxbind,phone,nameZh as platname
    </sql>

    <select id="getUserList" parameterType="com.kxg.zhz.model.User" resultType="com.kxg.zhz.model.User">
        select
        <include refid="User_Base_Column_List"/>
        from zuser z,platform p
        <where>
            <if test="user.uid !=null">
                and z.uid = #{user.uid}
            </if>
            <if test="user.nickname !=null">
                and z.nickname = #{user.nickname}
            </if>
            <if test="user.authstatus !=null">
                and z.authstatus = #{user.authstatus}
            </if>
            <if test="user.cvstatus !=null">
                and z.cvstatus = #{user.cvstatus}
            </if>
            <if test="user.wxbind !=null">
                and z.wxbind= #{user.wxbind}
            </if>
            <if test="user.platname !=null">
                and p.nameZh= #{user.platname}
            </if>
            <if test="beginDateScope !=null">
                and z.regdate between #{beginDateScope[0]} and #{beginDateScope[1]}
            </if>
            and z.pid = p.id
        </where>
        <if test="page !=null and size!=null">
            limit #{page},#{size}
        </if>
    </select>
    <select id="getTotal" parameterType="com.kxg.zhz.model.User" resultType="java.lang.Long">
        select count(*) from zuser z,platform p
        <where>
            <if test="user.uid !=null">
                and z.uid = #{user.uid}
            </if>
            <if test="user.nickname !=null">
                and z.nickname = #{user.nickname}
            </if>
            <if test="beginDateScope !=null">
                and z.regdate between #{beginDateScope[0]} and #{beginDateScope[1]}
            </if>
            <if test="user.authstatus !=null">
                and z.authstatus = #{user.authstatus}
            </if>
            <if test="user.cvstatus !=null">
                and z.cvstatus = #{user.cvstatus}
            </if>
            <if test="user.wxbind !=null">
                and z.wxbind= #{user.wxbind}
            </if>
            <if test="user.platname !=null">
                and p.nameZh= #{user.platname}
            </if>
            and z.pid = p.id
        </where>
    </select>
    <select id="getPlatUserData"  resultType="com.kxg.zhz.model.UserAtatistics">
        select p.id as pid,p.nameZh as platname,
        (select count(zuser.uid) from zuser where  zuser.pid  = p.id) count
        from platform p
    </select>
    <select id="getPlatUserDataLastSevenDays"  resultType="java.lang.String">
        select platname,regdate,count(*) from
        (select nameZh as platname ,date_format(z.regdate,"%Y-%m-%d") as regdate from
        platform  p,zuser z where p.id = z.pid  and date_sub(CURDATE(),INTERVAL 7 DAY)  <![CDATA[ <= ]]> DATE(regdate)) temp
        group by temp.platname,temp.regdate
    </select>
    <select id="getPlatUserDataLastSevenDaysByPid"  resultType="java.lang.Long">

        select ifnull(b.count,0) as count
          from (
            SELECT date_sub(curdate(), interval 7 day) as click_date
            union all
            SELECT date_sub(curdate(), interval 1 day) as click_date
            union all
            SELECT date_sub(curdate(), interval 2 day) as click_date
            union all
            SELECT date_sub(curdate(), interval 3 day) as click_date
            union all
            SELECT date_sub(curdate(), interval 4 day) as click_date
            union all
            SELECT date_sub(curdate(), interval 5 day) as click_date
            union all
            SELECT date_sub(curdate(), interval 6 day) as click_date
          ) a left join (
           select date(regdate) as datetime, count(*) as count
           from platform  p,zuser z where p.id = z.pid and p.id= #{pid}
           group by date(regdate)
        ) b on a.click_date = b.datetime ORDER BY a.click_date
    </select>

    <select id="getUserCountByDateId"  resultType="java.lang.Long">
        select ifnull(b.count,0) as count
        from (
        select @num:[email protected]+1,date_format(adddate(#{beginDateScope[0]}, INTERVAL @num DAY),'%Y-%m-%d') as date
        from zuser,(select @num:=0) t where adddate(#{beginDateScope[0]}, INTERVAL @num DAY) <![CDATA[ <= ]]> date_format(date_add(#{beginDateScope[1]}, interval 1 day) ,'%Y-%m-%d')
        order by date
        ) a left join (
        select date(regdate) as datetime, count(*) as count
        from platform  p,zuser z where p.id = z.pid and p.id=#{pid}
        group by date(regdate)
        ) b on a.date = b.datetime ORDER BY a.date
    </select>

    <select id="getUserCount"  resultType="java.lang.Long">
        select count(*)  from zuser
    </select>
    <select id="getUserLastSevenDaysCount"  resultType="java.lang.Long">
        select count(*) from zuser where date_sub(CURDATE(),INTERVAL 7 DAY) <![CDATA[ <= ]]> DATE(regdate)
    </select>
    <select id="getUserCountByDate"  resultType="java.lang.Long">
         select count(*)  from zuser where regdate between #{beginDateScope[0]} and #{beginDateScope[1]
    </select>
    <select id="getPlatUserDataByDate"  resultType="java.lang.String">
         select platname,regdate,count(*) from
                (select nameZh as platname ,date_format(z.regdate,"%Y-%m-%d") as regdate from
                        platform  p,zuser z where p.id = z.pid  and regdate between #{beginDateScope[0]} and #{beginDateScope[1]) temp
                           group by temp.platname,temp.regdate
    </select>
</mapper>           
  • <![CDATA[ <= ]]> mybaties <=解釋

 getUserCountByDateId 中聯合查詢時間選取和mysql工具中直接 sql語句查詢上有些差别 ，根據需要進行調整

​​​​​​
​
 
使用執行個體 element-ui vue-echarts vue.js java
上一篇: Element ui 日期時間今天，昨天，近七天，等快捷選擇及:default-time無效處理方法
下一篇: PermissionsDispatcher使用詳解1、添加依賴2、在Activity或Fragment中使用3、附：危險權限和權限組清單4、附：Demo下載下傳

繼續閱讀