kubbo/dvcp_v2_wechat_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

canvas2d

Browse Source
This commit is contained in:
liuye
2024-08-06 17:40:59 +08:00
parent 9ffcd953c4
commit 6c318233e4
1 changed files with 214 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

340
src/project/weiyang/AppPatrolReport/Statistics.vue
View File

@@ -121,13 +121,19 @@ export default {
console.log(this.finishData)
if (this.showFinish) {
this.finishChartInit('finish')
this.$nextTick(() => {
this.finishChartInit('finish')
})
}
if (this.trendData.length) {
this.trendChartInit('trend')
this.$nextTick(() => {
this.trendChartInit('trend')
})
}
if (this.typeData.length) {
this.typeChartInit('type')
this.$nextTick(() => {
this.typeChartInit('type')
})
}
}
@@ -146,135 +152,219 @@ export default {
})
},
finishChartInit(id) {
console.log(this.finishData)
var ctx = uni.createCanvasContext(id, this);
uChartsInstance[id] = new uCharts({
type: "ring",
width: 350,
height: 250,
context: ctx,
series: [
{
data: this.finishData
}
],
animation: true,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ['#7E94F6', '#85E3D5', '#2891FF'],
padding: [5,5,5,5],
dataLabel: true,
enableScroll: false,
legend: {
show: true,
position: "bottom",
lineHeight: 25
},
title: {
name: "办结率",
fontSize: 12,
color: "#222"
},
subtitle: {
name: this.finshNum+'%',
fontSize: 20,
color: "#5C8FFA"
},
extra: {
ring: {
ringWidth: 40,
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: 0,
labelWidth: 5,
border: false,
borderWidth: 2,
borderColor: "#FFFFFF"
}
// console.log(this.finishData)
// var ctx = uni.createCanvasContext(id, this);
// uChartsInstance[id] = new uCharts({
// type: "ring",
// width: 350,
// height: 250,
// context: ctx,
// series: [
// {
// data: this.finishData
// }
// ],
// animation: true,
// rotate: false,
// rotateLock: false,
// background: "#FFFFFF",
// color: ['#7E94F6', '#85E3D5', '#2891FF'],
// padding: [5,5,5,5],
// dataLabel: true,
// enableScroll: false,
// legend: {
// show: true,
// position: "bottom",
// lineHeight: 25
// },
// title: {
// name: "办结率",
// fontSize: 12,
// color: "#222"
// },
// subtitle: {
// name: this.finshNum+'%',
// fontSize: 20,
// color: "#5C8FFA"
// },
// extra: {
// ring: {
// ringWidth: 40,
// activeOpacity: 0.5,
// activeRadius: 10,
// offsetAngle: 0,
// labelWidth: 5,
// border: false,
// borderWidth: 2,
// borderColor: "#FFFFFF"
// }
// }
// })
const query = uni.createSelectorQuery().in(this);
query.select('#' + id).fields({ node: true, size: true }).exec(res => {
console.log(res)
if (res[0]) {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
canvas.width = 350
canvas.height = 250
uChartsInstance[id] = new uCharts({
type: "ring",
context: ctx,
width: 350,
height: 250,
series: [
{
data: this.finishData
}
],
pixelRatio: this.pixelRatio,
animation: true,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ['#7E94F6', '#85E3D5', '#2891FF'],
padding: [5,5,5,5],
dataLabel: true,
enableScroll: false,
legend: {
show: true,
position: "bottom",
lineHeight: 25
},
title: {
name: "办结率",
fontSize: 12,
color: "#222"
},
subtitle: {
name: this.finshNum+'%',
fontSize: 20,
color: "#5C8FFA"
},
extra: {
ring: {
ringWidth: 40,
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: 0,
labelWidth: 5,
border: false,
borderWidth: 2,
borderColor: "#FFFFFF"
}
}
});
}else{
console.error("[uCharts]: 未获取到 context");
}
})
});
},
trendChartInit(id) {
const ctx = uni.createCanvasContext(id, this);
uChartsInstance[id] = new uCharts({
type: "line",
context: ctx,
width: 346,
height: 232,
categories: this.trendDataX,
series: [
{
name: '',
data: this.trendData
}
],
animation: true,
background: "#FFFFFF",
color: ["#2891FF"],
padding: [15, 10, 0, 15],
enableScroll: false,
legend: {
show: false
},
xAxis: {
disableGrid: true,
},
yAxis: {
gridType: "dash",
dashLength: 2,
},
linearType: 'custom',
serie: {
linearColor: '#5B8FF9'
},
extra: {
line: {
type: "straight",
width: 2,
activeType: "hollow",
},
// const ctx = uni.createCanvasContext(id, this);
const query = uni.createSelectorQuery().in(this);
query.select('#' + id).fields({ node: true, size: true }).exec(res => {
console.log(res)
if (res[0]) {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
canvas.width = 350
canvas.height = 250
uChartsInstance[id] = new uCharts({
type: "line",
context: ctx,
width: 346,
height: 232,
categories: this.trendDataX,
series: [
{
name: '',
data: this.trendData
}
],
animation: true,
background: "#FFFFFF",
color: ["#2891FF"],
padding: [15, 10, 0, 15],
enableScroll: false,
legend: {
show: false
},
xAxis: {
disableGrid: true,
},
yAxis: {
gridType: "dash",
dashLength: 2,
},
linearType: 'custom',
serie: {
linearColor: '#5B8FF9'
},
extra: {
line: {
type: "straight",
width: 2,
activeType: "hollow",
},
}
});
}else{
console.error("[uCharts]: 未获取到 context");
}
});
},
typeChartInit(id) {
var ctx = uni.createCanvasContext(id, this);
uChartsInstance[id] = new uCharts({
type: "ring",
width: 350,
height: 250,
context: ctx,
series: [
{
data: this.typeData
}
],
animation: true,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ['#2891FF', '#FF8700', '#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'],
padding: [5,5,5,5],
dataLabel: true,
enableScroll: false,
legend: {
show: true,
position: "bottom",
lineHeight: 25
},
extra: {
ring: {
ringWidth: 40,
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: 0,
labelWidth: 5,
border: false,
borderWidth: 2,
borderColor: "#FFFFFF"
}
// var ctx = uni.createCanvasContext(id, this);
const query = uni.createSelectorQuery().in(this);
query.select('#' + id).fields({ node: true, size: true }).exec(res => {
console.log(res)
if (res[0]) {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
canvas.width = 350
canvas.height = 250
uChartsInstance[id] = new uCharts({
type: "ring",
width: 350,
height: 250,
context: ctx,
series: [
{
data: this.typeData
}
],
animation: true,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ['#2891FF', '#FF8700', '#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'],
padding: [5,5,5,5],
dataLabel: true,
enableScroll: false,
legend: {
show: true,
position: "bottom",
lineHeight: 25
},
extra: {
ring: {
ringWidth: 40,
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: 0,
labelWidth: 5,
border: false,
borderWidth: 2,
borderColor: "#FFFFFF"
}
}
})
}else{
console.error("[uCharts]: 未获取到 context");
}
})
});
},
selectStatus(e) {
this.statusInfo.name = e[0].label
@@ -427,8 +517,6 @@ export default {
height: 500px;
padding: 0 32px;
box-sizing: border-box;
position: relative;
z-index: 1;
}
.num {