613bf9a0 by yangwei

图表数据数量显示

1 parent 7cacbee6
......@@ -57,7 +57,7 @@ import efficient from "@/api/efficient";
import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
export default {
name: "jktj",
data () {
data() {
return {
// 开始日期限制
pickerOptionsStart: {
......@@ -83,7 +83,7 @@ export default {
pieChartsData: [],
};
},
created () {},
created() {},
mounted() {
this.getProcessCounts();
},
......@@ -91,11 +91,11 @@ export default {
...mapGetters(["dicData"]),
},
methods: {
endTimeChange(val){
this.form.endTime = timeFormat(new Date(val),true)
endTimeChange(val) {
this.form.endTime = timeFormat(new Date(val), true);
},
//查询各区县办件数量
async getProcessCounts () {
async getProcessCounts() {
this.pieChartsData = [];
let { result: res } = await efficient.getProcessCounts(
this.form.startTime,
......@@ -113,14 +113,15 @@ export default {
groupId: item.recType,
});
});
res.length && this.$nextTick(() => {
res.length &&
this.$nextTick(() => {
// 初始化图表
this.echartInit();
this.barChartInit(res[0].recType);
});
},
// 重置
resetForm () {
resetForm() {
this.form = {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
......@@ -128,7 +129,7 @@ export default {
this.getProcessCounts();
},
//玫瑰图初始化
echartInit () {
echartInit() {
let _this = this;
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
......@@ -189,7 +190,7 @@ export default {
});
},
//柱图初始化
async barChartInit (recType) {
async barChartInit(recType) {
//请求recType对应业务的各区县数据
let { result: res } = await efficient.getProcessDays(
recType,
......@@ -274,19 +275,46 @@ export default {
series: [
{
type: "bar",
barMaxWidth: '60',
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
},
},
barMaxWidth: "60",
name: "最短用时",
data: dealArr.map((item) => item.minDay),
},
{
type: "bar",
barMaxWidth: '60',
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
},
},
barMaxWidth: "60",
name: "平均用时",
data: dealArr.map((item) => item.avgDay),
},
{
type: "bar",
barMaxWidth: '60',
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
},
},
barMaxWidth: "60",
name: "最长用时",
data: dealArr.map((item) => item.maxDay),
},
......
......@@ -246,6 +246,15 @@ export default {
{
name: "成功",
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
},
},
barMaxWidth: '60',
data: this.chartData.map((item) => {
return item.success;
......@@ -254,6 +263,15 @@ export default {
{
name: "失败",
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
},
},
barMaxWidth: '60',
data: this.chartData.map((item) => {
return item.failure;
......@@ -261,6 +279,15 @@ export default {
},
{
name: "成功率",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
},
},
type: "line",
barMaxWidth: '60',
yAxisIndex: 1,
......
......@@ -210,9 +210,18 @@ export default {
],
series: [
{
data: chartArr.map(item=>item.counts),
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
},
},
barMaxWidth: '60',
data: chartArr.map(item=>item.counts),
},
],
});
......