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