Vue.js ECharts使用
一、介绍ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。ECharts 提供了丰富的图表类型和交互能力，使用户能够通过简朴的设置生成各种各样的图表，包括但不限于折线图、柱状图、散点图、饼图、雷达图、地图等。安装方式：
[*]CDN： https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js
[*]NPM：npm install echarts --save
二、使用echarts展示每日网站访问量
通过查询登录日记表展示为如下样式：
https://img-blog.csdnimg.cn/direct/5a7b30b5747f46ca9dba38230bcc3a68.png
前端vue代码，一共有两个分别是每日访问量的折线图和性别人数的柱状图。访问量请求后端数据，性别则使用了假数据。
<script lang="ts" setup>
import {onMounted, ref} from "vue";
import * as echarts from "echarts";
import api from "@/axios";
const loginLogChartDiv = ref();
const genderChartDiv = ref();
onMounted(() => {
initLoginLogECharDiv(); // 网站访问量
initGenderChart(); // 员工性别对比图
})
function initLoginLogECharDiv() {
const myChart = echarts.init(loginLogChartDiv.value);// 图标初始化
let dateList = [];
let countList = [];
api({url: '/selLoginLogChart'}).then(resp => {
dateList = resp.data.dateList;
countList = resp.data.countList.map(Number);
// 需要在后端获取数据之后绘制图表
myChart.setOption({
title: {
text: '网站访问量'
},
tooltip: {},
xAxis: {
data: dateList
},
yAxis: {},
series: [{
name: '访问量',
type: 'line',
data: countList
}]
});
});
}
function initGenderChart() {
const myChart = echarts.init(genderChartDiv.value);// 图标初始化
// 绘制图表
myChart.setOption({
title: {
text: '员工性别对比图'
},
tooltip: {},
xAxis: {
data: ['男', '女']
},
yAxis: {},
series: [{
name: '人数',
type: 'bar',
data:
}]
});
}
</script>
<template>
<el-row>
<el-col :span="24">
<div ref="loginLogChartDiv" :style="{ float: 'left', width: '100%', height: '350px' }"></div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div ref="genderChartDiv" :style="{ float: 'left', width: '100%', height: '350px' }"></div>
</el-col>
<el-col :span="12">
</el-col>
</el-row>
</template>
<style scoped>
</style> 业务层逻辑处置处罚
@Override
public Map<String, List<String>> selLoginLogChart(String s) {
List<Map<String, Object>> list = logoMapper.selLoginLogChart(s);
// 查询结果是Date类型，需要格式化
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
Map<String, List<String>> resultMap = new HashMap<>();
List<String> dateList = new ArrayList<>();
List<String> countList = new ArrayList<>();
for (Map<String, Object> map : list) {
dateList.add(dateFormat.format(map.get("date")));
countList.add(map.get("count") + "");
}
resultMap.put("dateList", dateList);
resultMap.put("countList", countList);
return resultMap;
} sql语句，由于日期是年月日时分秒，所以须要使用DATE()提取出年月日举行分组查询。
<select id="selLoginLogChart" resultType="java.util.Map">
select DATE(logintime) as date, count(*) as count
from loginlog
where logintime >= #{s}
group by date
</select>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]