ToB企服应用市场:ToB评测及商务社交产业平台

标题: Vue.js ECharts使用 [打印本页]
作者: 尚未崩坏    时间: 2024-6-28 17:00
标题: Vue.js ECharts使用
一、介绍

        ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。ECharts 提供了丰富的图表类型和交互能力，使用户能够通过简朴的设置生成各种各样的图表，包括但不限于折线图、柱状图、散点图、饼图、雷达图、地图等。安装方式：

二、使用echarts展示每日网站访问量

        通过查询登录日记表展示为如下样式：

        前端vue代码，一共有两个分别是每日访问量的折线图和性别人数的柱状图。访问量请求后端数据，性别则使用了假数据。
  1. <script lang="ts" setup>
  2. import {onMounted, ref} from "vue";
  3. import * as echarts from "echarts";
  4. import api from "@/axios";
  6. const loginLogChartDiv = ref();
  7. const genderChartDiv = ref();
  9. onMounted(() => {
  10.   initLoginLogECharDiv(); // 网站访问量
  11.   initGenderChart(); // 员工性别对比图
  12. })
  14. function initLoginLogECharDiv() {
  15.   const myChart = echarts.init(loginLogChartDiv.value);// 图标初始化
  16.   let dateList = [];
  17.   let countList = [];
  18.   api({url: '/selLoginLogChart'}).then(resp => {
  19.     dateList = resp.data.dateList;
  20.     countList = resp.data.countList.map(Number);
  21.     // 需要在后端获取数据之后绘制图表
  22.     myChart.setOption({
  23.       title: {
  24.         text: '网站访问量'
  25.       },
  26.       tooltip: {},
  27.       xAxis: {
  28.         data: dateList
  29.       },
  30.       yAxis: {},
  31.       series: [{
  32.         name: '访问量',
  33.         type: 'line',
  34.         data: countList
  35.       }]
  36.     });
  37.   });
  38. }
  40. function initGenderChart() {
  41.   const myChart = echarts.init(genderChartDiv.value);// 图标初始化
  42. // 绘制图表
  43.   myChart.setOption({
  44.     title: {
  45.       text: '员工性别对比图'
  46.     },
  47.     tooltip: {},
  48.     xAxis: {
  49.       data: ['男', '女']
  50.     },
  51.     yAxis: {},
  52.     series: [{
  53.       name: '人数',
  54.       type: 'bar',
  55.       data: [5, 20]
  56.     }]
  57.   });
  58. }
  60. </script>
  62. <template>
  63.   <el-row>
  64.     <el-col :span="24">
  65.       <div ref="loginLogChartDiv" :style="{ float: 'left', width: '100%', height: '350px' }"></div>
  66.     </el-col>
  67.   </el-row>
  68.   <el-row>
  69.     <el-col :span="12">
  70.       <div ref="genderChartDiv" :style="{ float: 'left', width: '100%', height: '350px' }"></div>
  71.     </el-col>
  72.     <el-col :span="12">
  73.     </el-col>
  74.   </el-row>
  76. </template>
  78. <style scoped>
  80. </style>
复制代码
        业务层逻辑处置处罚
  1. @Override
  2.     public Map<String, List<String>> selLoginLogChart(String s) {
  3.         List<Map<String, Object>> list = logoMapper.selLoginLogChart(s);
  4.         // 查询结果是Date类型，需要格式化
  5.         SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
  6.         Map<String, List<String>> resultMap = new HashMap<>();
  7.         List<String> dateList = new ArrayList<>();
  8.         List<String> countList = new ArrayList<>();
  9.         for (Map<String, Object> map : list) {
  10.             dateList.add(dateFormat.format(map.get("date")));
  11.             countList.add(map.get("count") + "");
  12.         }
  13.         resultMap.put("dateList", dateList);
  14.         resultMap.put("countList", countList);
  15.         return resultMap;
  16.     }
复制代码
        sql语句，由于日期是年月日时分秒，所以须要使用DATE()提取出年月日举行分组查询。
  1. <select id="selLoginLogChart" resultType="java.util.Map">
  2.         select DATE(logintime) as date, count(*) as count
  3.         from loginlog
  4.         where logintime >= #{s}
  5.         group by date
  6.     </select>
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4