还原
This commit is contained in:
liuye
@@ -22,14 +22,14 @@
|
||||
</div>
|
||||
<div class="title">事件办结率</div>
|
||||
<div class="info-content">
|
||||
<canvas canvas-id="finish" id="finish" class="echart-content e-canvas" type="2d" v-if="showFinish"/>
|
||||
<canvas canvas-id="finish" id="finish" class="echart-content e-canvas" v-if="showFinish"/>
|
||||
<AiEmpty v-else></AiEmpty>
|
||||
</div>
|
||||
<div class="title">上报趋势图</div>
|
||||
<div class="info-content">
|
||||
|
||||
<AiEmpty v-if="!trendData.length"></AiEmpty>
|
||||
<canvas canvas-id="trend" id="trend" class="echart-content" type="2d" v-else/>
|
||||
<canvas canvas-id="trend" id="trend" class="echart-content" v-else/>
|
||||
</div>
|
||||
<div class="title">事件分类
|
||||
<!-- <div class="type-select" :style="statusInfo.name ? '' : 'color:#999;'" @click="show=true">{{statusInfo.name || '请选择'}}<u-icon name="arrow-right"></u-icon></div> -->
|
||||
@@ -38,7 +38,7 @@
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<AiEmpty v-if="!typeData.length"></AiEmpty>
|
||||
<canvas canvas-id="type" id="type" class="echart-content" type="2d" v-else/>
|
||||
<canvas canvas-id="type" id="type" class="echart-content" v-else/>
|
||||
</div>
|
||||
<div class="pad-b120"></div>
|
||||
</div>
|
||||
@@ -153,217 +153,193 @@ 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"
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
|
||||
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.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"
|
||||
}
|
||||
}
|
||||
});
|
||||
}else{
|
||||
console.error("[uCharts]: 未获取到 context");
|
||||
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",
|
||||
// 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"
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// }else{
|
||||
// console.error("[uCharts]: 未获取到 context");
|
||||
// }
|
||||
// });
|
||||
},
|
||||
trendChartInit(id) {
|
||||
// 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");
|
||||
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",
|
||||
},
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
typeChartInit(id) {
|
||||
// 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");
|
||||
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"
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
selectStatus(e) {
|
||||
this.statusInfo.name = e[0].label
|
||||
|
||||
Reference in New Issue
Block a user