前言
人生没有对错,只有选择后的坚持,不后悔,走下去,就是对的。走着走着,花就开了， 终于完成这个需求。
首页 头部
<div class="top-view">
<el-row :gutter="20">
<el-col :span="6">
<el-card shadow="hover" class="card">
<div class="common-card" v-if=".length">
<div class="title">{{}}(元)</div>
<div class="value">￥{{}}</div>
<template>
<div class="compare">
<span>{{}}%</span>
<div v-if="Number()>=0" class="increase"></div>
<div v-else class="decrease"></div>
</div>
</template>
\
</div>
<div
id="today-money"
:style="{ width: '50%', height: '55%', marginLeft: '50%' }"
></div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" class="card1">
<div class="common-card" v-if=".length">
<div class="title" >{{ }}/{{}}</div>
<div class="value">{{}}/{{}}</div>
<template>
<div class="compare">
<span>{{}}% /{{}}%</span>
<div v-if="Number()>=0" class="increase"></div>
<div v-else class="decrease"></div>
</div>
</template>
\
</div>
<div
id=""
:style="{ width: '50%', height: '55%', marginLeft: '50%' }"
></div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" class="card2">
<div class="common-card" v-if="topList.length">
<div class="title">{{}}</div>
<div class="value">{{}}</div>
<template>
<div class="compare">
<span>{{}}%</span>
<div v-if="Number()>=0" class="increase"></div>
<div v-else class="decrease"></div>
</div>
</template>
\
</div>
<div
id=""
:style="{ width: '50%', height: '55%', marginLeft: '50%' }"
></div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" class="card3">
<div class="common-card" v-if="length">
<div class="title">{{}}(min)</div>
<div class="value">{{}}</div>
<template>
<div class="compare">
<span>{{}}%</span>
<div v-if="Number()>=0" class="increase"></div>
<div v-else class="decrease"></div>
</div>
</template>
</div>
<div
id=""
:style="{ width: '50%', height: '55%', marginLeft: '50%' }"
></div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
List: [],
};
},
mounted() {
this.getdate();
},
methods: {
//数据交互
async getdate() {
获取当前时间的处理
let current_datetime = new Date();
let current_date =
current_datetime.getFullYear() +
"-" +
(current_datetime.getMonth() + 1) +
"-" +
current_datetime.getDate();
console.log(current_date, "时间");
await axios
.get("", {
params: {
date: current_date,
},
})
.then((res) => {
this.List = res.data.data;
console.log(this.pList, "top");
\
};
</script>
<style lang='less' scoped>
.top-view {
width: 100%;
height: 100%;
}
.common-card {
width: 100%;
height: 100%;
}
.title {
font-size: 23px;
color: #999;
}
\
.value {
font-size: 20px;
color: #000;
font-weight: 600;
margin-top: 10px;
letter-spacing: 1px;
}
\
.chart {
width: 60%;
display: inline-block;
margin-left: 35%;
}
.per {
font-size: 20px;
color: #999;
margin-top: 20px;
}
\
.compare {
display: flex;
align-items: center;
font-size: 16px;
margin-top: 3px;
color: #666;
//三角形
.increase {
width: 0;
height: 0;
border-width: 4px;
border-color: transparent transparent red transparent;
border-style: solid;
margin: 0 0 3px 6px;
}
.decrease {
width: 0;
height: 0;
border-width: 3px;
border-color: green transparent transparent transparent;
border-style: solid;
margin: 4px 0 0 6px;
}
}
图形前一条竖线
.card {
border-left: 8px solid #3395ec;
}
.card1 {
border-left: 8px solid #5fab24;
}
.card2 {
border-left: 8px solid #ef8931;
}
.card3 {
border-left: 8px solid red;
}
.el-tabs__item {
font-size: 24px !important;
font-weight: 600 !important;
}
</style>
可视化图表一
日月年 切换
<template>
<div style="width: 100%; height: 100%">
<el-card shadow="hover" :body-style="{ padding: '0 0 20px 0' }">
<template v-slot:header>
<div class="menu-right">
<el-radio-group
v-model="dateType"
size="small"
@change="changeDateFormat"
>
<el-radio-button label="01">日</el-radio-button>
<el-radio-button label="02">月</el-radio-button>
<el-radio-button label="03">年</el-radio-button>
</el-radio-group>
<span style="margin: 0 20xp">统计时间:</span>
<el-date-picker
v-model="dateRange"
:type="dateDict[Number(dateType) - 1].type"
:value-format="dateDict[Number(dateType) - 1].format"
:format="dateDict[Number(dateType) - 1].format"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束结束"
unlink-panels
@change="handleDateRange"
>
</el-date-picker>
</div>
</template>
<template>
<div>
<div id="" style="width: 100%; height: 500px"></div>
</div>
<div>
<div id="" style="width: 100%; height: 500px"></div>
</div>
</template>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
dateType: "02",
dateDict: [
{
type: "daterange",
format: "yyyy-MM-dd",
},
{
type: "monthrange",
format: "yyyy-MM",
},
{
type: "daterange",
format: "yyyy",
},
],
radioSelect: "2",
dateRange: null,
};
},
mounted() {
this.getmediumScalar();
this.getsituation();
},
methods: {
// 时间范围
handleDateRange(e) {
console.log(e);
console.log(this.dateRange);
this.getmediumScalar();
this.getsituation();
},
// 切换年月日
changeDateFormat(e) {
console.log('切换年月日',e);
this.getmediumScalar();
this.getsituation();
},
getmediumScalar() {
axios
.get("", {
params: {
type: this.dateType,
startDate: this.dateRange ? this.dateRange[0] : "",
endDate: this.dateRange ? this.dateRange[1] : "",
},
})
.then((res) => {
let scalarList = res.data.data;
let dateList = [];
let valueList = [];
scalarList.map((item) => {
dateList.push(item.date);
valueList.push(item.number);
});
this.rendermediumScalar(dateList, valueList);
});
},
\
//
rendermediumScalar(dateList, valueList) {
let base = +new Date();
let oneDay = 24 * 3600 * 1000;
let date = [];
let data = [Math.random() * 300];
for (let i = 1; i < 20000; i++) {
var now = new Date((base += oneDay));
date.push(
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
);
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}
const chartDom1 = document.getElementById("");
const vochart = echarts.init(chartDom1);
vochart.setOption({
title: {
text: "",
},
xAxis: {
type: "category",
\
data: dateList,
},
dataZoom: [
{
type: "inside",
start: 5,
end: 10,
preventDefaultMouseMove: true,
},
{
start: 5,
end: 10,
},
],
yAxis: {
type: "value",
},
series: [
{
data: valueList,
type: "bar",
},
],
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
});
window.onresize = vochart.resize;
},
\
//
getsituation() {
axios
.get("", {
params: {
type: this.dateType,
startDate: this.dateRange ? this.dateRange[0] : "",
endDate: this.dateRange ? this.dateRange[1] : "",
},
})
.then((res) => {
let situation=res.data.data
let accountList=[]
let claimAmountList=[]
let caseNumsList=[]
let timeLineList=[]
situation.map((item)=>{
accountList.push(item.accountNums)
claimAmountList.push(item.claimAmount)
caseNumsList.push(item.caseNums)
timeLineList.push(item.timeLine)
})
this.vote(accountList,claimAmountList,caseNumsList,timeLineList)
console.log(situation, "zic");
});
},
\
vote(accountList,claimAmountList,caseNumsList,timeLineList) {
let base = +new Date();
let oneDay = 24 * 3600 * 1000;
let date = [];
let data = [Math.random() * 300];
for (let i = 1; i < 20000; i++) {
var now = new Date((base += oneDay));
date.push(
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
);
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}
const chartDom = document.getElementById("after-property");
const votechart = echarts.init(chartDom);
votechart.setOption({
title: {
text: "",
},
tooltip: {
trigger: "axis",
},
legend: {
data: ["户数", "笔数", "金额"],
},
series: [
{
name: "户数",
type: "line",
stack: "Total",
data: accountList,
},
{
name: "笔数",
type: "line",
stack: "Total",
data: caseNumsList,
},
{
name: "金额",
type: "line",
stack: "Total",
data: claimAmountList,
},
],
xAxis: {
type: "category",
boundaryGap: false,
data: timeLineList,
},
dataZoom: [
{
type: "inside",
start: 5,
end: 10,
preventDefaultMouseMove: true,
},
{
start: 5,
end: 10,
},
],
yAxis: {
type: "value",
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
});
},
},
};
</script>
\
可视化图二
<template>
<div style="width: 100%; height: 100%">
<el-card shadow="hover" :body-style="{ padding: '0 0 20px 0' }">
<template v-slot:header>
<div class="menu-right">
<el-radio-group
v-model="dateType"
size="small"
@change="changeDateFormat"
>
<el-radio-button label="01">日</el-radio-button>
\
<el-radio-button label="02">月</el-radio-button>
<el-radio-button label="03">年</el-radio-button>
</el-radio-group>
<span style="margin: 0 20xp">统计时间:</span>
\
<el-date-picker
v-model="dateRange"
:type="dateDict[Number(dateType) - 1].type"
:value-format="dateDict[Number(dateType) - 1].format"
:format="dateDict[Number(dateType) - 1].format"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束结束"
unlink-panels
@change="handleDateRange"
>
</el-date-picker>
</div>
</template>
<template>
<div>
<div id="" style="width: 100%; height: 500px"></div>
</div>
<div>
<div id="" style="width: 100%; height: 500px"></div>
</div>
<div>
<div id="" style="width: 100%; height: 500px"></div>
</div>
</template>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
dateType: "02",
dateDict: [
{
type: "daterange",
format: "yyyy-MM-dd",
},
{
type: "monthrange",
format: "yyyy-MM",
},
{
type: "daterange",
format: "yyyy",
},
],
radioSelect: "2",
dateRange: null,
};
},
mounted() {
this.middlechart();
this.getProportion();
this.getTransferor();
},
methods: {
// 时间范围
handleDateRange(e) {
console.log(e);
console.log(this.dateRange);
this.middlechart();
this.getProportion();
this.getTransferor();
},
// 切换年月日
changeDateFormat(e) {
console.log(e);
this.middlechart();
this.getProportion();
this.getTransferor();
},
\
getTransferor() {
axios
.get("", {
params: {
type: this.dateType,
startDate: this.dateRange ? this.dateRange[0] : "",
endDate: this.dateRange ? this.dateRange[1] : "",
},
})
.then((res) => {
let tranList = res.data.data;
let transferorlegend=[];
let transferorList=[];
//数据处理
tranList.map((item) => {
transferorlegend.push(item.transferorName);
transferorList.push({
value: item.assetNumber,
name: item.transferorName,
});
});
this.renderTransferor(transferorlegend,transferorList)
\
});
},
//
renderTransferor(transferorlegend,transferorList){
let base = +new Date();
let oneDay = 24 * 3600 * 1000;
let date = [];
let data = [Math.random() * 300];
for (let i = 1; i < 20000; i++) {
var now = new Date((base += oneDay));
date.push(
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
);
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}
const chartDom2 = document.getElementById("middle-pie1");
const chart2 = echarts.init(chartDom2);
chart2.setOption({
title: {
text: "",
},
tooltip: {
trigger: "item",
formatter: "{b}: {c} ({d}%)",
},
legend: {
top: "5%",
left: "center",
data: transferorlegend,
},
\
series: [
{
type: "pie",
label: {
formatter: "{b}: {c} ({d}%)",
},
\
data:transferorList,
radius: "50%",
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
});
window.onresize = chart2.resize
},
//
getProportion() {
axios
.get("", {
params: {
type: this.dateType,
startDate: this.dateRange ? this.dateRange[0] : "",
endDate: this.dateRange ? this.dateRange[1] : "",
},
})
.then((res) => {
let List = res.data.data;
let resultList=[]
List.map((item) => {
resultList.push({ value: item.number, name: item.typeName });
});
console.log(resultList,'资产')
this.renderProportion(resultList)
\
});
},
\
//
renderProportion(resultList){
const chartDom1 = document.getElementById("");
const michart1 = echarts.init(chartDom1);
let base = +new Date();
let oneDay = 24 * 3600 * 1000;
let date = [];
let data = [Math.random() * 300];
for (let i = 1; i < 20000; i++) {
var now = new Date((base += oneDay));
date.push(
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
);
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}
\
michart1.setOption({
title: {
text: "",
},
tooltip: {
trigger: "item",
},
legend: {
top: "5%",
left: "center",
},
series: [
{
type: "pie",
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
data:resultList,
radius: ["40%", "70%"],
},
],
});
window.onresize = michart1.resize
},
renderPayment(dateList, numberList) {
var chartDom = document.getElementById("");
var myChart = echarts.init(chartDom);
var option;
let base = +new Date(2021, 3, 30);
let oneDay = 24 * 3600 * 1000;
let date = [];
let data = [Math.random() * 300];
for (let i = 1; i < 20000; i++) {
var now = new Date((base += oneDay));
date.push(
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
);
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}
option = {
tooltip: {
trigger: "axis",
position: function (pt) {
return [pt[0], "10%"];
},
},
title: {
left: "center",
text: "",
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: "none",
},
restore: {},
saveAsImage: {},
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: dateList,
},
yAxis: {
type: "value",
boundaryGap: [0, "100%"],
},
dataZoom: [
{
type: "inside",
start: 0,
end: 10,
},
{
start: 0,
end: 10,
},
],
series: [
{
name: "",
type: "line",
symbol: "none",
sampling: "lttb",
itemStyle: {
color: "rgb(255, 70, 131)",
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(255, 158, 68)",
},
{
offset: 1,
color: "rgb(255, 70, 131)",
},
]),
},
data: numberList,
},
],
};
\
option && myChart.setOption(option);
window.onresize = myChart.resize
},
middlechart() {
console.log(this.dateRange);
axios
.get("", {
params: {
type: this.dateType,
startDate: this.dateRange ? this.dateRange[0] : "",
endDate: this.dateRange ? this.dateRange[1] : "",
},
})
.then((res) => {
console.log(res, "3333");
let result = res.data.data;
let dateList = result.map((i) => i.date);
let numberList = result.map((i) => i.number);
console.log(dateList, "日期集合");
this.renderPayment(dateList, numberList);
});
},
},
};
</script>
可视化图表三 折线图饼图联动
<template>
<div style="width: 100%; height: 100%">
<el-card shadow="hover" :body-style="{ padding: '0 0 20px 0' }">
<template v-slot:header>
<div class="menu-right">
<el-radio-group
v-model="dateType"
size="small"
@change="changeDateFormat"
>
<el-radio-button label="01">日</el-radio-button>
\
<el-radio-button label="02">月</el-radio-button>
<el-radio-button label="03">年</el-radio-button>
</el-radio-group>
<span style="margin: 0 20xp">统计时间:</span>
\
<el-date-picker
v-model="dateRange"
:type="dateDict[Number(dateType) - 1].type"
:value-format="dateDict[Number(dateType) - 1].format"
:format="dateDict[Number(dateType) - 1].format"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束结束"
unlink-panels
@change="handleDateRange"
>
</el-date-picker>
</div>
</template>
<template>
<div>
<div id="after-vote" style="width: 100%; height: 800px"></div>
</div>
</template>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
dateType: "02",
dateDict: [
{
type: "daterange",
format: "yyyy-MM-dd",
},
{
type: "monthrange",
format: "yyyy-MM",
},
{
type: "daterange",
format: "yyyy",
},
],
date: null,
paymentList: [],
};
},
mounted() {
this.getpayment();
},
methods: {
// 时间范围
handleDateRange(e) {
console.log(e);
console.log(this.dateRange);
this.getpayment();
},
// 切换年月日
changeDateFormat(e) {
console.log("切换年月日", e);
this.getpayment();
},
\
getpayment() {
axios
.get("", {
params: {
type: this.dateType,
startDate: this.dateRange ? this.dateRange[0] : "",
endDate: this.dateRange ? this.dateRange[1] : "",
},
})
.then((res) => {
if (res.data.code == "200") {
console.log("touhou");
console.log(res.data);
this.paymentList = res.data.data;
let payList = [];
let paymentItem = [];
let timeList = [];
let timedata = ["organ"];
let series=[]
let pie=[{
type: "pie",
id: "pie",
radius: "30%",
center: ["50%", "35%"],
emphasis: {
focus: "self",
},
label: {
formatter: "{b}: {@2021} ({d}%)",
},
encode: {
itemName: "organ",
value: "2021",
tooltip: "2021",
},
}]
let seriesList=[]
//数据处理
for (let i = 0; i <this.paymentList[0].companys.length ; i++) {
let paymentItem1 = [];
for (let f = 0; f < this.paymentList.length; f++) {
paymentItem[i] = this.paymentList[f].companys[i].companyName;
paymentItem1.push(this.paymentList[f].companys[i].repayment);
}
payList.push(paymentItem1);
}
//把数据处理成这样的数组
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
]
},
payList.forEach((item, index) => {
item.unshift(paymentItem[index]);
});
console.log(payList);
//时间数据的提取
this.paymentList.forEach((item) => {
timeList.push(item.timeLine);
});
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
console.log(timeList, "时间");
\
let timedataList = timedata.concat(timeList);
\
console.log("timedataList", timedataList);
console.log("payList", payList);
//处理 series 数据
payList.map(()=>{
series.push( {
type: "line",
smooth: true,
seriesLayoutBy: "row",
emphasis: { focus: "series" },
})
})
动态折线图的数据处理
seriesList=series.concat(pie)
console.log(seriesList)
console.log(series)
this.renderAfterVote(timedataList, payList,seriesList);
}
\
console.log(res, "结构数据"); //合并数组
});
},
\
renderAfterVote(timedataList, payList,seriesList) {
//日期处理
let base = +new Date();
let oneDay = 24 * 3600 * 1000;
let date = [];
let data = [Math.random() * 300];
for (let i = 1; i < 20000; i++) {
var now = new Date((base += oneDay));
date.push(
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
);
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}
\
//echarts 图片
var chartDom = document.getElementById("");
var myChart = echarts.init(chartDom);
var option;
setTimeout(function () {
let source = [timedataList, ...payList];
console.log("crtdATA", source);
option = {
title: {
text: "",
textStyle: {
color: "#F18E31",
fontStyle: "normal",
},
},
legend: {
x: "center",
y: "top",
padding: 40,
},
tooltip: {
trigger: "axis",
showContent: true,
},
dataset: {
source: source,
},
xAxis: { type: "category" },
dataZoom: [
{
type: "inside",
start: 5,
end: 10,
preventDefaultMouseMove: true,
},
{
start: 5,
end: 10,
},
],
yAxis: { gridIndex: 0 },
grid: { top: "55%" },
series:seriesList
};
myChart.on("updateAxisPointer", function (event) {
const xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
const dimension = xAxisInfo.value + 1;
myChart.setOption({
series: {
id: "pie",
label: {
formatter: "{b}: {@[" + dimension + "]} ({d}%)",
},
encode: {
value: dimension,
tooltip: dimension,
},
},
});
}
});
myChart.setOption(option);
});
option && myChart.setOption(option);
},
},
};
</script>
<style scoped>
</style>
总结
通过几天的努力，终于完成了这个需求任务，可以好好放松一下，继续坚持学习，不断进步。
