战立标
2 years ago
15 changed files with 425 additions and 404 deletions
@ -1,353 +1,371 @@ |
|||
import * as echarts from '../../../../ec-canvas/echarts'; |
|||
import {satisfactionGroup, event12345Group} from "../../../../utils/statisticsApi"; |
|||
import { satisfactionGroup, event12345Group } from "../../../../utils/statisticsApi"; |
|||
|
|||
var chart; |
|||
|
|||
function initChart(canvas, width, height, dpr) { |
|||
chart = echarts.init(canvas, null, { |
|||
width: width, |
|||
height: height, |
|||
devicePixelRatio: dpr // 像素比
|
|||
}); |
|||
canvas.setChart(chart); |
|||
return chart; |
|||
chart = echarts.init(canvas, null, { |
|||
width: width, |
|||
height: height, |
|||
devicePixelRatio: dpr // 像素比
|
|||
}); |
|||
canvas.setChart(chart); |
|||
return chart; |
|||
} |
|||
|
|||
const formatTime = date => { |
|||
const year = date.getFullYear() |
|||
const month = date.getMonth() + 1 |
|||
const day = date.getDate() |
|||
return [year, month, day].map(formatNumber).join('-') |
|||
const year = date.getFullYear() |
|||
const month = date.getMonth() + 1 |
|||
const day = date.getDate() |
|||
return [year, month, day].map(formatNumber).join('-') |
|||
} |
|||
const formatNumber = n => { |
|||
n = n.toString() |
|||
return n[1] ? n : '0' + n |
|||
n = n.toString() |
|||
return n[1] ? n : '0' + n |
|||
} |
|||
Component({ |
|||
properties: { |
|||
typeCondition: { |
|||
type: Number, |
|||
value: 0, |
|||
observer(val) { |
|||
console.log(val, 11) |
|||
this.getData() |
|||
} |
|||
} |
|||
properties: { |
|||
typeCondition: { |
|||
type: Number, |
|||
value: 0, |
|||
observer(val) { |
|||
console.log(val, 11) |
|||
this.getData() |
|||
} |
|||
} |
|||
}, |
|||
data: { |
|||
ec: { |
|||
lazyLoad: true |
|||
// onInit: initChart
|
|||
}, |
|||
data: { |
|||
ec: { |
|||
lazyLoad: true |
|||
// onInit: initChart
|
|||
}, |
|||
tabList: [{ |
|||
label: "按满意度调查/社区自查结果", |
|||
value: 1 |
|||
}, { |
|||
label: '按12345热线投诉结果', |
|||
value: 2 |
|||
}], |
|||
tabValue: 1 |
|||
tabList: [{ |
|||
label: "按满意度调查/社区自查结果", |
|||
value: 1 |
|||
}, { |
|||
label: '按12345热线投诉结果', |
|||
value: 2 |
|||
}], |
|||
tabValue: 1 |
|||
}, |
|||
lifetimes: { |
|||
ready() { |
|||
this.getData() |
|||
} |
|||
}, |
|||
methods: { |
|||
tabChange({ detail }) { |
|||
this.setData({ |
|||
tabValue: this.data.tabList[detail].value |
|||
}) |
|||
this.getData() |
|||
}, |
|||
lifetimes: { |
|||
ready() { |
|||
this.getData() |
|||
getData() { |
|||
this.selectComponent('#smyddcSqmydzc').init((canvas, width, height, dpr) => { |
|||
chart = echarts.init(canvas, null, { |
|||
width: width, |
|||
height: height, |
|||
devicePixelRatio: dpr // 像素比
|
|||
}); |
|||
canvas.setChart(chart); |
|||
let params = { |
|||
startTime: '', |
|||
endTime: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
tabChange({detail}) { |
|||
this.setData({ |
|||
tabValue: this.data.tabList[detail].value |
|||
}) |
|||
this.getData() |
|||
}, |
|||
getData() { |
|||
this.selectComponent('#smyddcSqmydzc').init((canvas, width, height, dpr) => { |
|||
chart = echarts.init(canvas, null, { |
|||
width: width, |
|||
height: height, |
|||
devicePixelRatio: dpr // 像素比
|
|||
}); |
|||
canvas.setChart(chart); |
|||
let params = { |
|||
startTime: '', |
|||
endTime: '' |
|||
let now = new Date(); |
|||
if (this.data.typeCondition === 0) { |
|||
params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth(), 1)) |
|||
} |
|||
if (this.data.typeCondition === 1) { |
|||
params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 1)); |
|||
} |
|||
if (this.data.typeCondition === 2) { |
|||
params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 2)); |
|||
} |
|||
if (this.data.typeCondition === 3) { |
|||
params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 5)); |
|||
} |
|||
if (this.data.typeCondition === 4) { |
|||
params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 11)); |
|||
} |
|||
|
|||
if (this.data.typeCondition === 1) { |
|||
params.endTime = formatTime(new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59)) |
|||
} else { |
|||
params.endTime = formatTime(new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59)) |
|||
} |
|||
console.log(params) |
|||
console.log(this.data.tabValue, 'this.data.tabValue') |
|||
if (this.data.tabValue === 1) { |
|||
satisfactionGroup(params).then(({ data }) => { |
|||
var dataname = data.map(item => item.name) |
|||
var datavaule = data.map(item => item.blueNum ? item.blueNum : 0) |
|||
var datavaule2 = data.map(item => item.yellowNum ? item.yellowNum : 0) |
|||
var indicator = [] |
|||
let max = Math.max(...datavaule, ...datavaule2) |
|||
console.log(max) |
|||
var datamax = new Array(datavaule.length).fill(max) |
|||
for (var i = 0; i < dataname.length; i++) { |
|||
indicator.push({ |
|||
name: dataname[i], |
|||
max: datamax[i], |
|||
}) |
|||
} |
|||
indicator[0].axisLabel = {show: true} |
|||
|
|||
let legendName = ['省满意度调查各项\n不满意人数', '社区满意度自查各项\n不满意人数'] |
|||
let series = [{ |
|||
name: "省满意度调查各项\n不满意人数", |
|||
type: "radar", |
|||
symbol: "circle", |
|||
symbolSize: 0, |
|||
areaStyle: { |
|||
normal: { |
|||
color: 'rgba(58,128,231,0.36)', |
|||
} |
|||
let now = new Date(); |
|||
if (this.data.typeCondition === 0) { |
|||
params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth(), 1)) |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
}, |
|||
triggerEvent: true, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "transparent", |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "#527AA8", |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
color: '#3A80E7', |
|||
borderColor: '#3AB7FF', |
|||
borderWidth: 1, |
|||
}, |
|||
lineStyle: { |
|||
normal: { |
|||
color: "#3AB7FF", |
|||
width: 2 |
|||
} |
|||
if (this.data.typeCondition === 1) { |
|||
params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 1)); |
|||
}, |
|||
data: [datavaule] |
|||
}, { |
|||
name: "社区满意度自查各项\n不满意人数", |
|||
type: "radar", |
|||
symbol: "circle", |
|||
symbolSize: 0, |
|||
areaStyle: { |
|||
normal: { |
|||
color: 'rgba(170, 216, 255, 0)', |
|||
} |
|||
if (this.data.typeCondition === 2) { |
|||
params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 2)); |
|||
}, |
|||
itemStyle: { |
|||
color: '#EB8E16', |
|||
borderColor: '#EF9700', |
|||
borderWidth: 1, |
|||
}, |
|||
lineStyle: { |
|||
normal: { |
|||
color: "#EF9700", |
|||
width: 2 |
|||
} |
|||
if (this.data.typeCondition === 3) { |
|||
params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 5)); |
|||
}, |
|||
data: [datavaule2] |
|||
}] |
|||
var option = { |
|||
tooltip: { |
|||
show: true, |
|||
trigger: "item", |
|||
textStyle: { |
|||
color: '#000', |
|||
fontSize: 14 |
|||
}, |
|||
formatter(params) { |
|||
// console.log(params)
|
|||
if (params.name === '') { |
|||
return ''; |
|||
} |
|||
return `${params.name} : ${params.percent}%`; |
|||
}, |
|||
}, |
|||
legend: { |
|||
show: true, |
|||
textStyle: { |
|||
color: '#999999', |
|||
rich: { |
|||
name: { |
|||
fontSize: 14, |
|||
lineHeight: 19, |
|||
padding: [20, 0, 0, 0] |
|||
}, |
|||
} |
|||
}, |
|||
itemWidth: 6, |
|||
itemHeight: 6, |
|||
y: 'bottom', |
|||
x: 'center', |
|||
formatter: name => { |
|||
return `{name|${name}}` |
|||
}, |
|||
data: legendName, |
|||
}, |
|||
radar: { |
|||
center: ["50%", "40%"], |
|||
radius: "50%", |
|||
startAngle: 90, |
|||
splitNumber: 5, |
|||
splitArea: { |
|||
areaStyle: { |
|||
color: 'transparent' |
|||
} |
|||
}, |
|||
name: { |
|||
textStyle: { |
|||
color: '#333333', |
|||
fontSize: 14, |
|||
borderRadius: 3, |
|||
} |
|||
}, |
|||
indicator: indicator |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
}, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "rgba(226,226,226,0.28)" |
|||
} |
|||
if (this.data.typeCondition === 4) { |
|||
params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 11)); |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "rgba(226,226,226,0.61)" |
|||
} |
|||
|
|||
if (this.data.typeCondition === 1) { |
|||
params.endTime = formatTime(new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59)) |
|||
} else { |
|||
params.endTime = formatTime(new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59)) |
|||
}, |
|||
series |
|||
}; |
|||
chart.setOption(option, true); |
|||
}) |
|||
} else { |
|||
event12345Group().then(({ data }) => { |
|||
var dataname = data.map(item => item.name) |
|||
var datavaule = data.map(item => item.blueNum ? item.blueNum : 0) |
|||
var datavaule2 = data.map(item => item.yellowNum ? item.yellowNum : 0) |
|||
var indicator = [] |
|||
let max = Math.max(...datavaule, ...datavaule2) |
|||
console.log(max) |
|||
var datamax = new Array(datavaule.length).fill(max) |
|||
for (var i = 0; i < dataname.length; i++) { |
|||
indicator.push({ |
|||
name: datavaule[i] + '\n' + dataname[i], |
|||
max: datamax[i], |
|||
}) |
|||
} |
|||
let legendName = ['12345热线事件\n上报人数'] |
|||
let series = [{ |
|||
name: "12345热线事件\n上报人数", |
|||
type: "radar", |
|||
symbol: "circle", |
|||
symbolSize: 0, |
|||
areaStyle: { |
|||
normal: { |
|||
color: 'rgba(58,128,231,0.36)', |
|||
} |
|||
console.log(params) |
|||
console.log(this.data.tabValue,'this.data.tabValue') |
|||
if (this.data.tabValue === 1) { |
|||
satisfactionGroup(params).then(({data}) => { |
|||
var dataname = data.map(item => item.name) |
|||
var datavaule = data.map(item => item.blueNum ? item.blueNum : 0) |
|||
var datavaule2 = data.map(item => item.yellowNum ? item.yellowNum : 0) |
|||
var indicator = [] |
|||
let max = Math.max(...datavaule, ...datavaule2) |
|||
console.log(max) |
|||
var datamax = new Array(datavaule.length).fill(max) |
|||
for (var i = 0; i < dataname.length; i++) { |
|||
indicator.push({ |
|||
name: dataname[i], |
|||
max: datamax[i], |
|||
}) |
|||
} |
|||
let legendName = ['省满意度调查各项\n不满意人数', '社区满意度自查各项\n不满意人数'] |
|||
let series = [{ |
|||
name: "省满意度调查各项\n不满意人数", |
|||
type: "radar", |
|||
symbol: "circle", |
|||
symbolSize: 0, |
|||
areaStyle: { |
|||
normal: { |
|||
color: 'rgba(58,128,231,0.36)', |
|||
} |
|||
}, |
|||
itemStyle: { |
|||
color: '#3A80E7', |
|||
borderColor: '#3AB7FF', |
|||
borderWidth: 1, |
|||
}, |
|||
lineStyle: { |
|||
normal: { |
|||
color: "#3AB7FF", |
|||
width: 2 |
|||
} |
|||
}, |
|||
data: [datavaule] |
|||
}, { |
|||
name: "社区满意度自查各项\n不满意人数", |
|||
type: "radar", |
|||
symbol: "circle", |
|||
symbolSize: 0, |
|||
areaStyle: { |
|||
normal: { |
|||
color: 'rgba(170, 216, 255, 0)', |
|||
} |
|||
}, |
|||
itemStyle: { |
|||
color: '#EB8E16', |
|||
borderColor: '#EF9700', |
|||
borderWidth: 1, |
|||
}, |
|||
lineStyle: { |
|||
normal: { |
|||
color: "#EF9700", |
|||
width: 2 |
|||
} |
|||
}, |
|||
data: [datavaule2] |
|||
}] |
|||
var option = { |
|||
tooltip: { |
|||
show: true, |
|||
trigger: "item", |
|||
textStyle: { |
|||
color: '#000', |
|||
fontSize: 14 |
|||
}, |
|||
formatter(params) { |
|||
// console.log(params)
|
|||
if (params.name === '') { |
|||
return ''; |
|||
} |
|||
return `${params.name} : ${params.percent}%`; |
|||
}, |
|||
}, |
|||
legend: { |
|||
show: true, |
|||
textStyle: { |
|||
color: '#999999', |
|||
rich: { |
|||
name: { |
|||
fontSize: 14, |
|||
lineHeight: 19, |
|||
padding: [20, 0, 0, 0] |
|||
}, |
|||
} |
|||
}, |
|||
itemWidth: 6, |
|||
itemHeight: 6, |
|||
y: 'bottom', |
|||
x: 'center', |
|||
formatter: name => { |
|||
return `{name|${name}}` |
|||
}, |
|||
data: legendName, |
|||
}, |
|||
radar: { |
|||
center: ["50%", "40%"], |
|||
radius: "50%", |
|||
startAngle: 90, |
|||
splitNumber: 5, |
|||
splitArea: { |
|||
areaStyle: { |
|||
color: 'transparent' |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
show: false, |
|||
}, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "rgba(226,226,226,0.28)" |
|||
} |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "rgba(226,226,226,0.61)" |
|||
} |
|||
}, |
|||
name: { |
|||
textStyle: { |
|||
color: '#333333', |
|||
fontSize: 14, |
|||
borderRadius: 3, |
|||
} |
|||
}, |
|||
indicator: indicator |
|||
}, |
|||
series |
|||
}; |
|||
chart.setOption(option, true); |
|||
}) |
|||
} else { |
|||
event12345Group().then(({data}) => { |
|||
var dataname = data.map(item => item.name) |
|||
var datavaule = data.map(item => item.blueNum ? item.blueNum : 0) |
|||
var datavaule2 = data.map(item => item.yellowNum ? item.yellowNum : 0) |
|||
var indicator = [] |
|||
let max = Math.max(...datavaule, ...datavaule2) |
|||
console.log(max) |
|||
var datamax = new Array(datavaule.length).fill(max) |
|||
for (var i = 0; i < dataname.length; i++) { |
|||
indicator.push({ |
|||
name: dataname[i], |
|||
max: datamax[i], |
|||
}) |
|||
} |
|||
let legendName = ['12345热线事件\n上报人数'] |
|||
let series = [{ |
|||
name: "12345热线事件\n上报人数", |
|||
type: "radar", |
|||
symbol: "circle", |
|||
symbolSize: 0, |
|||
areaStyle: { |
|||
normal: { |
|||
color: 'rgba(58,128,231,0.36)', |
|||
} |
|||
}, |
|||
itemStyle: { |
|||
color: '#3A80E7', |
|||
borderColor: '#3AB7FF', |
|||
borderWidth: 1, |
|||
}, |
|||
lineStyle: { |
|||
normal: { |
|||
color: "#3AB7FF", |
|||
width: 2 |
|||
} |
|||
}, |
|||
data: [datavaule] |
|||
},] |
|||
var option = { |
|||
tooltip: { |
|||
show: true, |
|||
textStyle: { |
|||
color: '#fff', |
|||
fontSize: 14 |
|||
}, |
|||
formatter(params) { |
|||
// console.log(params)
|
|||
if (params.name === '') { |
|||
return ''; |
|||
} |
|||
return `${params.name} : ${params.percent}%`; |
|||
}, |
|||
}, |
|||
legend: { |
|||
show: true, |
|||
textStyle: { |
|||
color: '#999999', |
|||
rich: { |
|||
name: { |
|||
fontSize: 14, |
|||
lineHeight: 19, |
|||
padding: [20, 0, 0, 0] |
|||
}, |
|||
} |
|||
}, |
|||
itemWidth: 6, |
|||
itemHeight: 6, |
|||
y: 'bottom', |
|||
x: 'center', |
|||
formatter: name => { |
|||
return `{name|${name}}` |
|||
}, |
|||
data: legendName, |
|||
}, |
|||
radar: { |
|||
center: ["50%", "40%"], |
|||
radius: "50%", |
|||
startAngle: 90, |
|||
splitNumber: 5, |
|||
splitArea: { |
|||
areaStyle: { |
|||
color: 'transparent' |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
show: false, |
|||
}, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "rgba(226,226,226,0.28)" |
|||
} |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "rgba(226,226,226,0.61)" |
|||
} |
|||
}, |
|||
name: { |
|||
textStyle: { |
|||
color: '#333333', |
|||
fontSize: 14, |
|||
borderRadius: 3, |
|||
} |
|||
}, |
|||
indicator: indicator |
|||
}, |
|||
series |
|||
}; |
|||
chart.setOption(option, true); |
|||
}) |
|||
}, |
|||
itemStyle: { |
|||
color: '#3A80E7', |
|||
borderColor: '#3AB7FF', |
|||
borderWidth: 1, |
|||
}, |
|||
lineStyle: { |
|||
normal: { |
|||
color: "#3AB7FF", |
|||
width: 2 |
|||
} |
|||
return chart; |
|||
}) |
|||
}, |
|||
data: [datavaule] |
|||
},] |
|||
var option = { |
|||
tooltip: { |
|||
show: true, |
|||
textStyle: { |
|||
color: '#fff', |
|||
fontSize: 14 |
|||
}, |
|||
formatter(params) { |
|||
// console.log(params)
|
|||
if (params.name === '') { |
|||
return ''; |
|||
} |
|||
return `${params.name} : ${params.percent}%`; |
|||
}, |
|||
}, |
|||
legend: { |
|||
show: true, |
|||
textStyle: { |
|||
color: '#999999', |
|||
rich: { |
|||
name: { |
|||
fontSize: 14, |
|||
lineHeight: 19, |
|||
padding: [20, 0, 0, 0] |
|||
}, |
|||
} |
|||
}, |
|||
itemWidth: 6, |
|||
itemHeight: 6, |
|||
y: 'bottom', |
|||
x: 'center', |
|||
formatter: name => { |
|||
return `{name|${name}}` |
|||
}, |
|||
data: legendName, |
|||
}, |
|||
radar: { |
|||
center: ["50%", "40%"], |
|||
radius: "50%", |
|||
startAngle: 90, |
|||
splitNumber: 5, |
|||
splitArea: { |
|||
areaStyle: { |
|||
color: 'transparent' |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
show: false, |
|||
}, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "rgba(226,226,226,0.28)" |
|||
} |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "rgba(226,226,226,0.61)" |
|||
} |
|||
}, |
|||
name: { |
|||
textStyle: { |
|||
color: '#333333', |
|||
fontSize: 14, |
|||
borderRadius: 3, |
|||
} |
|||
}, |
|||
indicator: indicator |
|||
}, |
|||
series |
|||
}; |
|||
chart.setOption(option, true); |
|||
}) |
|||
} |
|||
return chart; |
|||
}) |
|||
} |
|||
} |
|||
}); |
|||
|
|||
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 606 B After Width: | Height: | Size: 2.6 KiB |
Loading…
Reference in new issue