vue后台系统管理项目-echarts柱状图实现订单统计
echarts柱状图实现订单统计
主要功能
- 不同订单状态切换显示不同的柱状图数据；
- 根据条件切换选择年度视图、月度视图；
- 根据条件切换指定年份、指定月份显示当前的数据；
- 根据搜索条件查询查看柱状图数据；
- 柱状图数据导出功能，可导出Excel、导出PDF；
- 柱状图实现，属性配置、页面自适应；
目录
echarts柱状图实现订单统计
页面布局
获取数据方法
1. 已完成订单、运输中tab切换，数据获取
2.getOrderFirstAP调用接口，获取柱状图图标数据
3.获取年份
4.获取默认月份
5.查询方法
6.重置功能
7.导出功能
8.柱状图数据配置
实现效果
页面布局
本项目使用的element-ui框架，可根据需求自行修改，功能都是都是一样的，通用。
<div class="main mt30">
<!-- 已完成订单 -->
<!-- 第一个图表 -->
<div class="ordersed">
<!-- tab 切换栏 -->
<el-row>
<el-col :span="24">
<div class="grid-content bg-purple">
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" text-color='black'
@select="handleSelect1">
<el-menu-item index="complete">已完成订单</el-menu-item>
<!-- <el-menu-item index="waiting">待签约订单</el-menu-item> -->
<el-menu-item index="transit">运输中</el-menu-item>
</el-menu>
</div>
</el-col>
</el-row>
<el-row>
<el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm" size="35">
<el-col :span="18">
<!-- 已完成订单搜索表单 -->
<!-- 条件选择 -->
<div class="mt20">
<el-row :gutter="20">
<!-- 选择查询条件 - 视图 -->
<el-col :span="3">
<el-form-item prop="period">
<el-select v-model="ruleForm.period" clearable placeholder="请选择" @change='selectChange1'>
<el-option label="年视图" value="year"></el-option>
<!-- <el-option label="半年视图" value="halfYear"></el-option> -->
<!-- <el-option label="季度视图" value="quarter"></el-option> -->
<el-option label="月度视图" value="month"></el-option>
</el-select>
</el-form-item>
</el-col>
<!-- 选择年份 -->
<el-col :span="3">
<el-form-item prop="year">
<el-select v-model="ruleForm.year" clearable placeholder="请选择年份">
<el-option v-for="(item,index) in yearList" :key="index" :label="item+'年'" :value='item'>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="3">
<!-- 第三个选框 -->
<!-- 选择了年视图时 -->
<!-- 默认月份 -->
<el-form-item prop="month" v-if="isChooseMonth">
<el-select v-model="ruleForm.month" clearable placeholder="请选择" :disabled="shouSearch">
<el-option v-for="item in modelList" :key="item.value" :label="item.label+'月'" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<!-- -->
<el-form-item prop="states" v-else>
<el-select v-model="ruleForm.states" clearable placeholder="请选择" :disabled="shouSearch">
<el-option v-for="item in modelList" :key="item.value" :label="item.label+'月'" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<!-- button 查询按钮 -->
<el-col :span="7">
<el-button type="primary" @click="submitForm1('ruleForm')">查找</el-button>
<el-button plain @click="resetForm1('ruleForm')">重置</el-button>
<!-- <el-button plain>导出</el-button> -->
<el-dropdown @command="handleCommand1" class="pl10">
<el-button plain>
导出<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="1">导出为 Excel</el-dropdown-item>
<el-dropdown-item command="2">导出为 PDF</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
</div>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="order_base" :style="{width: '100%', height: '350px'}"></div>
</el-col>
</el-form>
</el-row>
</div>
</div>接口引入
import {
baseUrl,
getOrderCount,//图表数据
getPeriodList,//获取年份
exportPDF,//导出pdf
exportExcel//导出excel
} from "../../api/userMG";获取数据方法
1. 已完成订单、运输中tab切换，数据获取
// 切换 已完成订单tab 的回调
handleSelect1(index) {
console.log(index,"切换");
this.ruleForm.orderStatus = index;
this.getOrderFirstAPI();
},2.getOrderFirstAP调用接口，获取柱状图图标数据
getOrderFirstAPI() {
this.ruleForm.year = parseInt(this.ruleForm.year).toString();
getOrderCount(this.ruleForm)
.then(res => {
if (res.code == 200) {
console.log(res, "订单统计--获取首行图表数据");
this.dataX1 = res.data.XData;
this.dataValue1 = res.data.YData;
this.tableData = res.data.XData;
this.drawLine();
} else {
this.$message({
type: "error",
text: res.msg
});
}
})
.catch(error => {});
},3.获取年份
getPeriodListAPI() {
this.yearList = [];
getPeriodList()
.then(res => {
if (res.code == 200) {
console.log(res, "年份");
// 运营年份赋值
this.yearList = res.data;
this.yearList.push("2020");
}
})
.catch(err => {
this.loading = false;
this.$message.error("运营年份加载失败，请稍后再试！");
});
},4.获取默认月份
created页面进来就要获取到
// 月份视图列表
monthList: [
{
value: "01",
label: "01"
},
{
value: "02",
label: "02"
},
{
value: "03",
label: "03"
},
{
value: "04",
label: "04"
},
{
value: "05",
label: "05"
},
{
value: "06",
label: "06"
},
{
value: "07",
label: "07"
},
{
value: "08",
label: "08"
},
{
value: "09",
label: "09"
},
{
value: "10",
label: "10"
},
{
value: "11",
label: "11"
},
{
value: "12",
label: "12"
}
],let aData = new Date();
// 默认月份列表
this.modelList = this.monthList;
this.ruleForm.year = aData.getFullYear() + "年"; //获取当前年份5.查询方法
//点击查询
submitForm1(ruleForm) {
if(!this.ruleForm.year){
this.$message.warning("请选择年份");
return;
}
this.$refs[ruleForm].validate(valid => {
if (valid) {
// 发送请求
this.getOrderFirstAPI();
console.log(this.ruleForm);
} else {
console.log("error submit!!");
return false;
}
});
},6.重置功能
//图表重置数据
resetForm1(ruleForm) {
this.$refs[ruleForm].resetFields();
// 重置后重新获取默认数据
this.shouSearch = false;
this.ruleForm.period = "month";
this.modelList = this.monthList;
this.ruleForm.year = globalVariable.yearValue;
this.ruleForm.month = globalVariable.monthValue;
this.ruleForm.orderStatus = "complete";
this.ruleForm.states = "";
this.getOrderFirstAPI();
},7.导出功能
//导出
handleCommand1(command) {
if (command == 1) {
console.log("导出为excel");
this.exportExcelFUN();
// this.downExcel();
} else {
console.log("导出为pdf");
this.exportPDFFUN();
}
},导出excel
这里实现了获取后台定义的文件名字的功能，一般情况只能前端自定义或者导出文件名是一串字符。
exportExcelFUN() {
let params = {
orderStatus: this.ruleForm.orderStatus,
period: this.ruleForm.period,
year: this.ruleForm.year,
month: this.ruleForm.month,
};
axios({
headers: {
Authorization: JSON.parse(localStorage.getItem("userdata")).token
},
method:"post",
url:`${this.baseUrl}/ordermanagement/exportExcel`,
data:params,
responseType:"blob"
}).then(res=>{
console.log(res);
const link = document.createElement("a");
let blob = new Blob([res.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
link.style.display = "none";
link.href = window.URL.createObjectURL(blob);
// 解码filename
let name = res.headers['content-disposition'];
let nameSplit = name.split(";")[1];
let filename = decodeURI(nameSplit.split("=")[1]);
console.log(filename,"filename");
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}).catch(()=>{
})
// exportExcel(params).then(res => {
// // 创建一个隐藏的 a 链接
// if(res){
// const link = document.createElement("a");
// // { type: "application/vnd.ms-excel" } {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}
// let blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
// link.style.display = "none";
// link.href = window.URL.createObjectURL(blob);
// link.download = "订单统计";
// document.body.appendChild(link);
// link.click();
// document.body.removeChild(link);
// }else{
// this.$message.warning("导出失败");
// }
// }).catch(err => {
// console.log(err);
// });
},导出pdf
前端封装方法，这里直接使用封装的方法调用即可。
本项目使用了html2canvas jspdf两个插件来实现，需要先进行安装，主要通过生成的canvas转化成pdf，这里封装的方法代码较多，后续会更新实现这个方法详细代码，请关注后续博客更新
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'exportPDFFUN() {
// let params = {
// base64Info:this.$echarts.init(document.getElementById("order_base")).getDataURL()
// };
// exportPDF(params).then(res => {
// // if (res) {
// // console.log("调用了导出PDF方法");
// // } else {
// // this.$message.warning("导出失败");
// // }
// }).catch(err => {});
// console.log(this.$echarts.init(document.getElementById("order_base")).getDataURL())
this.$util.downloadPDF(document.querySelector('#order_base'), '订单统计');
},8.柱状图数据配置
每项配置查看官方文档
drawLine() {
// 基于准备好的dom，初始化echarts实例
let order_base = this.$echarts.init(
document.getElementById("order_base")
);
// 第一个 绘制图表
order_base.setOption({
title: { text: this.echartsText },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
},
// 图表位置调整
grid: [
{
left: "3%",
bottom: "10%",
top: "15%",
right: "10%",
}
],
xAxis: {
data: this.dataX1,
splitLine: {}, //网格线
axisLine: {
// x轴线颜色及轴线文字颜色，但有单独设置文字颜色的，可以覆盖这个颜色
},
lineStyle: {
type: "dashed"
// color: "#b3b3af"
},
// 轴字体颜色
axisLabel: {
// color: "#b3b3af"
}
},
yAxis: {
//y轴刻度线
axisLine: {
show: true
},
// 网格线
splitLine: {
// lineStyle: {
// type: "dashed"
// },
// show: true
},
minInterval: 1 //设置y轴最小刻度为1,保证y轴以正整数显示
},
series: [
{
name: this.ruleForm.orderStatus == "complete"
? "已完成订单"
: this.ruleForm.orderStatus == "waiting"
? "待签约订单"
: this.ruleForm.orderStatus == "transit"
? "运输中订单"
: this.ruleForm.orderStatus == "exception"
? "异常订单"
: "新增订单",
type: "bar", //柱状体的类型
data: this.dataValue1, //每个柱体对应的数据
// 每个柱状体样式
itemStyle: {
normal: {
color: "#3ba1ff"
},
},
stack: 'Total',
label: {
show: true,
position: 'inside'
},
}
]
});
},
⭐️⭐️⭐️ 作者：船长在船上
🚩🚩🚩 主页：来访地址船长在船上的博客
🔨🔨🔨 简介：CSDN前端领域博客专家，CSDN前端领域优质创作者，资深前端开发工程师，专注web前端领域开发，在CSDN分享工作中遇到的问题以及问题解决方法和对项目开发的实际案例总结以及新技术的认识。