还原
This commit is contained in:
liuye
@@ -22,14 +22,14 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="title">事件办结率</div>
|
<div class="title">事件办结率</div>
|
||||||
<div class="info-content">
|
<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>
|
<AiEmpty v-else></AiEmpty>
|
||||||
</div>
|
</div>
|
||||||
<div class="title">上报趋势图</div>
|
<div class="title">上报趋势图</div>
|
||||||
<div class="info-content">
|
<div class="info-content">
|
||||||
|
|
||||||
<AiEmpty v-if="!trendData.length"></AiEmpty>
|
<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>
|
||||||
<div class="title">事件分类
|
<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> -->
|
<!-- <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>
|
||||||
<div class="info-content">
|
<div class="info-content">
|
||||||
<AiEmpty v-if="!typeData.length"></AiEmpty>
|
<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>
|
||||||
<div class="pad-b120"></div>
|
<div class="pad-b120"></div>
|
||||||
</div>
|
</div>
|
||||||
@@ -153,217 +153,193 @@ 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",
|
|
||||||
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");
|
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
|
// 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) {
|
trendChartInit(id) {
|
||||||
// const ctx = uni.createCanvasContext(id, this);
|
const ctx = uni.createCanvasContext(id, this);
|
||||||
const query = uni.createSelectorQuery().in(this);
|
uChartsInstance[id] = new uCharts({
|
||||||
query.select('#' + id).fields({ node: true, size: true }).exec(res => {
|
type: "line",
|
||||||
console.log(res)
|
context: ctx,
|
||||||
if (res[0]) {
|
width: 346,
|
||||||
const canvas = res[0].node;
|
height: 232,
|
||||||
const ctx = canvas.getContext('2d');
|
categories: this.trendDataX,
|
||||||
canvas.width = 350
|
series: [
|
||||||
canvas.height = 250
|
{
|
||||||
uChartsInstance[id] = new uCharts({
|
name: '',
|
||||||
type: "line",
|
data: this.trendData
|
||||||
context: ctx,
|
}
|
||||||
width: 346,
|
],
|
||||||
height: 232,
|
animation: true,
|
||||||
categories: this.trendDataX,
|
background: "#FFFFFF",
|
||||||
series: [
|
color: ["#2891FF"],
|
||||||
{
|
padding: [15, 10, 0, 15],
|
||||||
name: '',
|
enableScroll: false,
|
||||||
data: this.trendData
|
legend: {
|
||||||
}
|
show: false
|
||||||
],
|
},
|
||||||
animation: true,
|
xAxis: {
|
||||||
background: "#FFFFFF",
|
disableGrid: true,
|
||||||
color: ["#2891FF"],
|
},
|
||||||
padding: [15, 10, 0, 15],
|
yAxis: {
|
||||||
enableScroll: false,
|
gridType: "dash",
|
||||||
legend: {
|
dashLength: 2,
|
||||||
show: false
|
},
|
||||||
},
|
linearType: 'custom',
|
||||||
xAxis: {
|
serie: {
|
||||||
disableGrid: true,
|
linearColor: '#5B8FF9'
|
||||||
},
|
},
|
||||||
yAxis: {
|
extra: {
|
||||||
gridType: "dash",
|
line: {
|
||||||
dashLength: 2,
|
type: "straight",
|
||||||
},
|
width: 2,
|
||||||
linearType: 'custom',
|
activeType: "hollow",
|
||||||
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);
|
||||||
const query = uni.createSelectorQuery().in(this);
|
uChartsInstance[id] = new uCharts({
|
||||||
query.select('#' + id).fields({ node: true, size: true }).exec(res => {
|
type: "ring",
|
||||||
console.log(res)
|
width: 350,
|
||||||
if (res[0]) {
|
height: 250,
|
||||||
const canvas = res[0].node;
|
context: ctx,
|
||||||
const ctx = canvas.getContext('2d');
|
series: [
|
||||||
canvas.width = 350
|
{
|
||||||
canvas.height = 250
|
data: this.typeData
|
||||||
uChartsInstance[id] = new uCharts({
|
}
|
||||||
type: "ring",
|
],
|
||||||
width: 350,
|
animation: true,
|
||||||
height: 250,
|
rotate: false,
|
||||||
context: ctx,
|
rotateLock: false,
|
||||||
series: [
|
background: "#FFFFFF",
|
||||||
{
|
color: ['#2891FF', '#FF8700', '#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'],
|
||||||
data: this.typeData
|
padding: [5,5,5,5],
|
||||||
}
|
dataLabel: true,
|
||||||
],
|
enableScroll: false,
|
||||||
animation: true,
|
legend: {
|
||||||
rotate: false,
|
show: true,
|
||||||
rotateLock: false,
|
position: "bottom",
|
||||||
background: "#FFFFFF",
|
lineHeight: 25
|
||||||
color: ['#2891FF', '#FF8700', '#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'],
|
},
|
||||||
padding: [5,5,5,5],
|
extra: {
|
||||||
dataLabel: true,
|
ring: {
|
||||||
enableScroll: false,
|
ringWidth: 40,
|
||||||
legend: {
|
activeOpacity: 0.5,
|
||||||
show: true,
|
activeRadius: 10,
|
||||||
position: "bottom",
|
offsetAngle: 0,
|
||||||
lineHeight: 25
|
labelWidth: 5,
|
||||||
},
|
border: false,
|
||||||
extra: {
|
borderWidth: 2,
|
||||||
ring: {
|
borderColor: "#FFFFFF"
|
||||||
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
|
||||||
|
|||||||
Reference in New Issue
Block a user