elink-star
/
epmet-work-mp
19
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改统计页面图表加载方式

jw-featrue-zhanlibiao
战立标 2 years ago
parent
dc8b3cc481
commit
68c87ee78c
6 changed files with 442 additions and 389 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 185
      pages/statistics/modules/HotlineComplaints/HotlineComplaints.js
  2. 298
      pages/statistics/modules/SmyddcSqmydzc/SmyddcSqmydzc.js
  3. 212
      pages/statistics/modules/Trend/Trend.js
  4. 128
      subpages/statistics/pages/qzbmy/qzbmy.js
  5. 2
      subpages/statistics/pages/qzbmy/qzbmy.wxml
  6. 6
      subpages/statistics/pages/qzbmy/qzbmy.wxss

185
pages/statistics/modules/HotlineComplaints/HotlineComplaints.js
View File

@ -38,7 +38,8 @@ Component({
},
data: {
ec: {
onInit: initChart
lazyLoad: true
// onInit: initChart
},
tabList: [{
label: "问题突出类别",
@ -55,102 +56,110 @@ Component({
}
},
methods: {
tabChange(index) {
tabChange({detail}) {
this.setData({
tabValue: this.tabList[index].value
tabValue: this.data.tabList[detail].value
})
this.getData()
},
getData() {
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))
}
event12345Group(params).then(({data}) => {
data = data.map(item => {
return {
name: item.name,
value: item.blueNum
}
this.selectComponent('#hotlineComplaints').init((canvas, width, height, dpr) => {
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // 像素比
});
let color = ["#4F94FF", "#A182FB", "#27D1A7", "#FCBF06", "#FF7108"]
canvas.setChart(chart);
var option = {
color,
tooltip: {
show: true,
textStyle: {
color: '#fff',
fontSize: 14
},
backgroundColor: "#04229a",
formatter(params) {
// console.log(params)
if (params.name === '') {
return '';
}
return `${params.name} : ${params.percent}%`;
},
},
series: [
{
name: '',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '50%'], // 修改为居中
avoidLabelOverlap: true,
label: {
color: '#333333',
alignTo: 'labelLine',
formatter: '{num|{c}}\n{name|{b}}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
num: {
fontSize: 17,
color: '#333333'
},
zb: {
fontSize: 14,
color: '#333333'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
data: data
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))
}
event12345Group(params).then(({data}) => {
data = data.map(item => {
return {
name: item.name,
value: item.blueNum
}
]
};
chart.setOption(option);
})
});
let color = ["#4F94FF", "#A182FB", "#27D1A7", "#FCBF06", "#FF7108"]
var option = {
color,
tooltip: {
show: true,
textStyle: {
color: '#fff',
fontSize: 14
},
formatter(params) {
// console.log(params)
if (params.name === '') {
return '';
}
return `${params.name} : ${params.percent}%`;
},
},
series: [
{
name: '',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '50%'], // 修改为居中
avoidLabelOverlap: true,
label: {
color: '#333333',
alignTo: 'labelLine',
formatter: '{num|{c}}\n{name|{b}}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
num: {
fontSize: 17,
color: '#333333'
},
zb: {
fontSize: 14,
color: '#333333'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
data: data
}
]
};
chart.setOption(option);
})
return chart;
});
}
}
});

298
pages/statistics/modules/SmyddcSqmydzc/SmyddcSqmydzc.js
View File

@ -35,167 +35,187 @@ Component({
},
data: {
ec: {
onInit: initChart
lazyLoad: true
// onInit: initChart
}
},
lifetimes: {
ready() {
this.getData()
this.getData()
}
},
methods: {
getData() {
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)
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));
}
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],
})
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))
}
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: false,
trigger: "item",
},
legend: {
show: true,
textStyle: {
color: '#999999',
rich: {
name: {
fontSize: 14,
lineHeight: 19,
padding: [20, 0, 0, 0]
},
console.log(params)
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)',
}
},
itemWidth: 6,
itemHeight: 6,
y: 'bottom',
x: 'center',
formatter: name => {
return `{name|${name}}`
itemStyle: {
color: '#3A80E7',
borderColor: '#3AB7FF',
borderWidth: 1,
},
data: legendName,
},
radar: {
center: ["50%", "40%"],
radius: "50%",
startAngle: 90,
splitNumber: 5,
splitArea: {
areaStyle: {
color: 'transparent'
lineStyle: {
normal: {
color: "#3AB7FF",
width: 2
}
},
axisLabel: {
show: false,
data: [datavaule]
}, {
name: "社区满意度自查各项\n不满意人数",
type: "radar",
symbol: "circle",
symbolSize: 0,
areaStyle: {
normal: {
color: 'rgba(170, 216, 255, 0)',
}
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(226,226,226,0.28)"
itemStyle: {
color: '#EB8E16',
borderColor: '#EF9700',
borderWidth: 1,
},
lineStyle: {
normal: {
color: "#EF9700",
width: 2
}
},
splitLine: {
data: [datavaule2]
}]
var option = {
tooltip: {
show: true,
lineStyle: {
color: "rgba(226,226,226,0.61)"
}
textStyle: {
color: '#fff',
fontSize: 14
},
formatter(params) {
// console.log(params)
if (params.name === '') {
return '';
}
return `${params.name} : ${params.percent}%`;
},
},
name: {
legend: {
show: true,
textStyle: {
color: '#333333',
fontSize: 14,
borderRadius: 3,
}
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
},
indicator: indicator
},
series
};
chart.setOption(option,true);
series
};
chart.setOption(option, true);
})
return chart;
})
}
}

212
pages/statistics/modules/Trend/Trend.js
View File

@ -18,128 +18,138 @@ Component({
properties: {},
data: {
ec: {
onInit: initChart
lazyLoad: true
// onInit: initChart
}
},
lifetimes: {
ready() {
this.getData()
this.getData()
}
},
methods: {
getData() {
notSatisfactionTrend().then(({data}) => {
let xData = data.monthTimes.map(item => (item.split('-')[1] - 0) + '月');
let series = []
let color = ['#3A80E7', '#EB8E16', '#10B2A5',]
data.series.forEach((item,index) => {
series.push({
name:item.name,
type: 'line',
showAllSymbol: true,
symbol: 'circle',
symbolSize: 0,
lineStyle: {
normal: {
color: color[index],
this.selectComponent('#Trend').init((canvas, width, height, dpr) => {
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // 像素比
});
canvas.setChart(chart);
notSatisfactionTrend().then(({data}) => {
let xData = data.monthTimes.map(item => (item.split('-')[1] - 0) + '月');
let series = []
let color = ['#3A80E7', '#EB8E16', '#10B2A5',]
data.series.forEach((item, index) => {
series.push({
name: item.name,
type: 'line',
showAllSymbol: true,
symbol: 'circle',
symbolSize: 0,
lineStyle: {
normal: {
color: color[index],
},
},
},
label: {
show: false,
},
itemStyle: {
show: false,
color: '#FFF',
borderColor: color[index],
borderWidth: 1,
},
data: item.data,
},)
})
var option = {
title: {
show: false,
text: '',
x: 'center',
top: '15px',
textStyle: {
color: '#333333',
fontWeight: 500,
fontSize: 18,
},
},
legend: {
// icon: 'circle',
data: data.series.map(item => item.name),
itemGap: 12,
itemWidth: 12,
itemHeight: 5,
x: 'left',
top: '0%',
textStyle: {
color: '#999999',
fontSize: 10,
// padding:[0, 10, 0, 10],
}
},
grid: {
top: '18%',
left: '2%',
right: '4%',
bottom: '8%',
containLabel: true
},
xAxis: [
{
type: 'category',
axisTick: {
label: {
show: false,
},
splitLine: {
itemStyle: {
show: false,
color: '#FFF',
borderColor: color[index],
borderWidth: 1,
},
axisLine: {
lineStyle: {
color: '#323c41'
}
},
axisLabel: {
interval: 0,
align: 'center',
textStyle: {
fontSize: 11,
color: '#C1C1C1'
}
data: item.data,
},)
})
var option = {
title: {
show: false,
text: '',
x: 'center',
top: '15px',
textStyle: {
color: '#333333',
fontWeight: 500,
fontSize: 18,
},
boundaryGap: true,
data: xData,
},
],
yAxis: [
{
type: 'value',
splitLine: {
show: false
},
axisLabel: {
show: true,
legend: {
// icon: 'circle',
data: data.series.map(item => item.name),
itemGap: 12,
itemWidth: 12,
itemHeight: 5,
x: 'left',
top: '0%',
textStyle: {
color: '#999999',
textStyle: {
fontSize: 11
}
fontSize: 10,
// padding:[0, 10, 0, 10],
}
},
grid: {
top: '18%',
left: '2%',
right: '4%',
bottom: '8%',
containLabel: true
},
xAxis: [
{
type: 'category',
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLine: {
lineStyle: {
color: '#323c41'
}
},
axisLabel: {
interval: 0,
align: 'center',
textStyle: {
fontSize: 11,
color: '#C1C1C1'
}
},
boundaryGap: true,
data: xData,
},
axisTick: {
show: false
],
yAxis: [
{
type: 'value',
splitLine: {
show: false
},
axisLabel: {
show: true,
color: '#999999',
textStyle: {
fontSize: 11
}
},
axisTick: {
show: false
}
}
}
],
series,
};
chart.setOption(option);
],
series,
};
chart.setOption(option);
})
return chart
})
}
}

128
subpages/statistics/pages/qzbmy/qzbmy.js
View File

@ -1,67 +1,75 @@
import {getPotentialDissatisfiedCountDetail, maporg} from "../../../../utils/statisticsApi";
import { getPotentialDissatisfiedCountDetail, maporg } from "../../../../utils/statisticsApi";
Page({
data: {
orgList: [],
orgIndex: 0,
pageNo: 1,
pageSize: 10,
list: [],
total: 0,
mobile: "",
name: ""
},
data: {
orgList: [],
orgIndex: 0,
pageNo: 1,
pageSize: 10,
list: [],
total: 0,
mobile: "",
name: ""
},
onLoad(options) {
this.getOrg()
},
getOrg() {
onLoad(options) {
this.getOrg()
},
getOrg() {
maporg().then(async ({data}) => {
let parent = {value: data.id, label: data.name}
this.setData({
orgList: [
parent, ...data.children.map(item => {
return {
value: item.id,
label: item.name
}
})
]
})
this.getList()
})
},
maporg().then(async ({ data }) => {
let parent = { value: data.id, label: data.name }
this.setData({
orgList: [
parent, ...data.children.map(item => {
return {
value: item.id,
label: item.name
}
})
]
})
this.getList()
})
},
gotopage({currentTarget: {dataset}}) {
const {url} = dataset;
wx.navigateTo({url})
},
setVal(e) {
this.setData({
[e.currentTarget.dataset.key]: e.detail.value
})
},
getList() {
getPotentialDissatisfiedCountDetail({
pageNo: this.data.pageNo,
pageSize: this.data.pageSize,
agencyId: this.data.orgList[this.data.orgIndex].value,
name: this.data.name,
mobile: this.data.mobile,
}).then(({data}) => {
this.setData({
list: this.data.list.concat(data.list),
total: data.total
})
});
},
onReachBottom() {
if (this.data.list.length < this.data.total) {
this.setData({
pageNo: this.data.pageNo + 1
})
this.getList()
}
gotopage({ currentTarget: { dataset } }) {
const { url } = dataset;
wx.navigateTo({ url })
},
setVal(e) {
this.setData({
[e.currentTarget.dataset.key]: e.detail.value
})
},
search() {
this.setData({
pageNo: 1,
list: [],
total: 0,
})
this.getList()
},
getList() {
getPotentialDissatisfiedCountDetail({
pageNo: this.data.pageNo,
pageSize: this.data.pageSize,
agencyId: this.data.orgList[this.data.orgIndex].value,
name: this.data.name,
mobile: this.data.mobile,
}).then(({ data }) => {
this.setData({
list: this.data.list.concat(data.list),
total: data.total
})
});
},
onReachBottom() {
if (this.data.list.length < this.data.total) {
this.setData({
pageNo: this.data.pageNo + 1
})
this.getList()
}
}
})

2
subpages/statistics/pages/qzbmy/qzbmy.wxml
View File

@ -14,7 +14,7 @@
</picker>
<input placeholder="按姓名" bind:input="setVal" data-key="name" class="picker-type"/>
<input placeholder="按电话" bind:input="setVal" data-key="mobile" class="picker-type"/>
<view class="btn">筛选</view>
<view class="btn" bind:tap="search">筛选</view>
</view>
<view class="qz-container">

6
subpages/statistics/pages/qzbmy/qzbmy.wxss
View File

@ -28,6 +28,12 @@ page {
justify-content: space-between;
padding: 0 30rpx;
box-sizing: border-box;
}
.picker text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.picker-type image,

Write Preview
Loading…
Cancel
Save