You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1107 lines
32 KiB
1107 lines
32 KiB
<template>
|
|
<view class="statistics">
|
|
<!-- 行政区划下拉选择卡片 -->
|
|
<view class="cc-header">
|
|
<view class="cc-query-dropdowns">
|
|
<!-- <picker mode="selector" :range="districts" v-model="selectedDistrict">
|
|
<view class="dropdown">
|
|
行政区划
|
|
<image src="/static/images/icon/down.png" />
|
|
</view>
|
|
</picker> -->
|
|
<region-picker @trigge-method="handleRegionParams" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="chart-list">
|
|
<!-- <view class="chart-list">
|
|
<view class="cc-card card">
|
|
<view class="card-header">项目投资统计</view>
|
|
<echarts ref="echarts" :option="option" canvasId="echarts"></echarts>
|
|
</view> -->
|
|
|
|
<!-- 项目投资统计柱形图卡片 -->
|
|
<view class="cc-card card">
|
|
<view class="card-header">项目投资统计</view>
|
|
<echarts ref="investmentChart" :option="investmentChartOption" canvasId="investmentChart"></echarts>
|
|
<!-- <canvas id="investmentChart"></canvas> -->
|
|
</view>
|
|
|
|
<!-- 项目分类统计柱形图卡片 -->
|
|
<view class="cc-card card">
|
|
<view class="card-header">项目分类统计</view>
|
|
<echarts ref="categoryChart" :option="categoryChartOption" canvasId="categoryChart"></echarts>
|
|
<!-- <canvas id="categoryChart"></canvas> -->
|
|
</view>
|
|
|
|
<!-- 项目类型统计饼图卡片 -->
|
|
<view class="cc-card card">
|
|
<view class="card-header">项目类型统计</view>
|
|
<echarts ref="typeChart" :option="typeChartOption" canvasId="typeChart"></echarts>
|
|
<!-- <canvas id="typeChart"></canvas> -->
|
|
</view>
|
|
|
|
<!-- 项目状态统计饼图卡片 -->
|
|
<view class="cc-card card">
|
|
<view class="card-header">项目状态统计</view>
|
|
<echarts ref="statusChart" :option="statusChartOption" canvasId="statusChart"></echarts>
|
|
<!-- <canvas id="statusChart"></canvas> -->
|
|
</view>
|
|
|
|
<!-- 项目行政区划分布统计饼图卡片 -->
|
|
<view class="cc-card card">
|
|
<view class="card-header">项目行政区划分布统计</view>
|
|
<echarts ref="districtChart" :option="districtChartOption" canvasId="districtChart"></echarts>
|
|
<!-- <canvas id="districtChart"></canvas> -->
|
|
</view>
|
|
|
|
<!-- 项目预警统计饼图卡片 -->
|
|
<view class="cc-card card">
|
|
<view class="card-header">项目预警统计</view>
|
|
<echarts ref="warningChart" :option="warningChartOption" canvasId="warningChart"></echarts>
|
|
<!-- <canvas id="warningChart"></canvas> -->
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 操作按钮 -->
|
|
<view class="cc-operation-buttons">
|
|
<view class="buttons-group">
|
|
<view class="primary-button button" @click="handleGenerateProject()">生成报告</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// import * as echarts from 'echarts'; // 引入 echarts 库
|
|
// import * as echarts from '../../components/echarts-uniapp/echarts.min.js';
|
|
import RegionPicker from '@/components/region-picker/region-picker.vue'
|
|
import { getSourceFundsNumApi, getCategoryumApi, getProjectTypeApi, getCityNumApi, getWarningNumApi } from '@/api/system/projectStatistics'
|
|
import { addressList } from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/cityData.js'
|
|
export default {
|
|
components: {
|
|
RegionPicker,
|
|
},
|
|
data() {
|
|
return {
|
|
// 行政区划数据
|
|
districts: ['请选择', '北京市', '上海市', '广州市', '深圳市'],
|
|
selectedDistrict: 0,
|
|
|
|
// 图表配置
|
|
investmentChartOption: null,
|
|
categoryChartOption: null,
|
|
typeChartOption: null,
|
|
statusChartOption: null,
|
|
districtChartOption: null,
|
|
warningChartOption: null,
|
|
option: {},
|
|
// 项目投资统计
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
params: {orderBy: "create_time", sortBy: "desc"},
|
|
data: {
|
|
projectName: ''
|
|
}
|
|
},
|
|
projectInvestInfo: [],
|
|
sourceFound: {},
|
|
adcd: [],
|
|
// 省市区数据
|
|
addressTreeList: addressList,
|
|
addressList: [],
|
|
queryParams: {
|
|
"pageNum": 1,
|
|
"pageSize": 10,
|
|
"ids": null,
|
|
"data": {
|
|
"projectName": null,
|
|
"projectType": null,
|
|
"total": null,
|
|
"projectPhase": null
|
|
}
|
|
},
|
|
categoryData: {},
|
|
projectType: [],
|
|
acc: {},
|
|
zd: {},
|
|
ms: {},
|
|
zd_projectTypeOptions: [],
|
|
ms_projectTypeOptions: [],
|
|
zdTotal: 0,
|
|
msTotal: 0,
|
|
cityData: {},
|
|
newAddressList:[],
|
|
warningData: {}
|
|
}
|
|
},
|
|
// 页面加载完成后，初始化所有图表
|
|
created() {
|
|
this.handleAddressTreeData()
|
|
this.getDicts("major_project").then((response) => {
|
|
this.zd_projectTypeOptions = response.data
|
|
})
|
|
this.getDicts("general_project").then((response) => {
|
|
this.ms_projectTypeOptions = response.data
|
|
})
|
|
},
|
|
mounted() {
|
|
this.getProjectInvestData()
|
|
this.getProjectCategoryData()
|
|
this.getProjectTypeData()
|
|
this.getProjectCityData()
|
|
this.getProjectWarningData()
|
|
},
|
|
methods: {
|
|
// 处理区划请求
|
|
handleRegionParams(adcd) {
|
|
this.queryParams.pageNum = 1
|
|
this.queryParams.data.adcd = adcd
|
|
this.getProjectList('again')
|
|
},
|
|
|
|
// 获取项目投资统计数据
|
|
getProjectInvestData() {
|
|
getSourceFundsNumApi({ year: '2024' }).then(res => {
|
|
this.sourceFound = res.data
|
|
this.adcd = Object.keys(this.sourceFound)
|
|
this.barInit()
|
|
})
|
|
},
|
|
|
|
// 获取项目分类统计数据
|
|
getProjectCategoryData() {
|
|
getCategoryumApi(this.queryParams).then(res => {
|
|
this.categoryData = res.data
|
|
this.initCategoryChart()
|
|
})
|
|
},
|
|
|
|
// 获取项目类型统计数据
|
|
getProjectTypeData() {
|
|
getProjectTypeApi(this.queryParams).then(res => {
|
|
// this.projectTypeData = res.data
|
|
this.zd = res.data.zd;
|
|
this.ms = res.data.ms;
|
|
this.acc = res.data.acc;
|
|
Object.entries(this.zd).forEach(([key, value]) => {
|
|
this.zdTotal = this.zdTotal + Number(value);
|
|
let name = this.zdProjectTypeFormat(key);
|
|
let obj = {
|
|
name: name,
|
|
value: Number(value),
|
|
};
|
|
this.projectType.push(obj);
|
|
});
|
|
Object.entries(this.ms).forEach(([key, value]) => {
|
|
this.msTotal = this.msTotal + Number(value);
|
|
let name = this.msProjectTypeFormat(key);
|
|
let obj = {
|
|
name: name,
|
|
value: Number(value),
|
|
};
|
|
this.projectType.push(obj);
|
|
});
|
|
this.total = Number(this.acc["acc"]) + Number(this.acc["noAcc"]);
|
|
this.initTypeChart(this.projectType)
|
|
this.initStatusChart()
|
|
})
|
|
},
|
|
|
|
msProjectTypeFormat(key) {
|
|
return this.selectDictLabel(this.ms_projectTypeOptions, key);
|
|
},
|
|
zdProjectTypeFormat(key) {
|
|
return this.selectDictLabel(this.zd_projectTypeOptions, key);
|
|
},
|
|
|
|
// 获取项目城市统计数据
|
|
getProjectCityData() {
|
|
getCityNumApi().then(res => {
|
|
this.cityData = res.data
|
|
this.initDistrictChart()
|
|
})
|
|
},
|
|
|
|
// 获取项目投资预警数据
|
|
getProjectWarningData() {
|
|
getWarningNumApi().then(res => {
|
|
this.warningData = res.data
|
|
this.initWarningChart()
|
|
})
|
|
},
|
|
|
|
|
|
// 将省市区的树状数据分解成列表,并在后面补零
|
|
handleAddressTreeData() {
|
|
let result = [];
|
|
function traverse(node) {
|
|
result.push({ code: node.code, name: node.name, dictLabel: node.name, dictValue: node.code}); // 将当前节点添加到结果中
|
|
if (node.children) {
|
|
node.children.forEach(child => traverse(child)); // 递归遍历子节点
|
|
}
|
|
}
|
|
this.addressTreeList.forEach(node => traverse(node)); // 遍历树的每个根节点
|
|
this.addressList = result
|
|
this.newAddressList = JSON.parse(JSON.stringify(this.addressList))
|
|
this.newAddressList.forEach(item => {
|
|
if (item.code.length===2) {
|
|
item.code = item.code + '0000'
|
|
}
|
|
if (item.code.length===4) {
|
|
item.code = item.code + '00'
|
|
}
|
|
})
|
|
},
|
|
|
|
barInit() {
|
|
let keys = Object.keys(this.sourceFound)
|
|
// for (let i=0; i<keys.length; i++) {
|
|
// if (keys[i].length===2) {
|
|
// keys[i] += "0000"
|
|
// }
|
|
// if (keys[i].length===4) {
|
|
// keys[i] += "00"
|
|
// }
|
|
// }
|
|
// 创建一个城市代码到城市对象的映射
|
|
const cityMap = new Map(this.addressList.map(city => [city.code, city]));
|
|
let filteredData = keys
|
|
.filter(key => cityMap.has(key)) // 根据城市数据筛选
|
|
.map(key => ({ key: Number(key), ...this.sourceFound[key], ...cityMap.get(key) })) // 转换为数组格式
|
|
// 根据 actual 从大到小排序
|
|
filteredData.sort((a, b) => b.actual - a.actual)
|
|
let xData = filteredData.map(item => item.name)
|
|
let yData1 = filteredData.map(item => item.progressPlan)
|
|
let yData2 = filteredData.map(item => item.actual)
|
|
console.log(filteredData)
|
|
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow', // 使用阴影指示器
|
|
},
|
|
},
|
|
legend: {
|
|
data: ['年度计划', '实际完成'],
|
|
bottom: '0%', // 将legend显示在下方
|
|
itemWidth: 12, // 设置图例正方形的宽度
|
|
itemHeight: 12, // 设置图例正方形的高度
|
|
itemStyle: {
|
|
borderRadius: 0, // 确保图例为正方形
|
|
},
|
|
},
|
|
grid: {
|
|
left: '2%',
|
|
right: '2%',
|
|
top: '13%',
|
|
bottom: '15%',
|
|
containLabel: true, // 保证标签显示不超出范围
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xData,
|
|
axisLabel: {
|
|
interval: 0, // 确保X轴标签不重叠
|
|
rotate: 45, // 旋转X轴标签以适应长文本
|
|
},
|
|
axisTick: {
|
|
alignWithLabel: true,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#000',
|
|
},
|
|
},
|
|
boundaryGap: true, // 使得柱状图的起点和终点显示
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '金额/万元',
|
|
nameLocation: 'end', // 将标题放在轴的起始位置
|
|
nameGap: 20, // 设置标题与轴的间距
|
|
axisLabel: {
|
|
formatter: '{value}',
|
|
color: '#8C8C8C', // Y轴字体颜色
|
|
fontSize: 12, // Y轴字体大小
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#8C8C8C',
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#f0f0f0', // 灰色的分割线
|
|
},
|
|
},
|
|
splitNumber: 5, // 控制Y轴的分割数
|
|
// max: yAxisMax,
|
|
// interval: yAxisMax / 10
|
|
},
|
|
series: [
|
|
{
|
|
name: '年度计划',
|
|
type: 'bar',
|
|
data: yData1,
|
|
barWidth: '35%', // 设置柱状图的宽度
|
|
itemStyle: {
|
|
color: '#00b39d', // 年度计划的柱状图颜色
|
|
},
|
|
},
|
|
{
|
|
name: '实际完成',
|
|
type: 'bar',
|
|
data: yData2,
|
|
barWidth: '35%',
|
|
itemStyle: {
|
|
color: '#00a7ee', // 实际完成的柱状图颜色
|
|
},
|
|
},
|
|
],
|
|
}
|
|
this.investmentChartOption = option;
|
|
},
|
|
|
|
// 初始化项目投资统计柱形图
|
|
initInvestmentChart() {
|
|
// const chart = echarts.init(document.getElementById('investmentChart'));
|
|
|
|
},
|
|
|
|
// 初始化项目分类柱形图
|
|
initCategoryChart() {
|
|
let xData = Object.keys(this.categoryData)
|
|
let yArr = Object.values(this.categoryData)
|
|
let yData1 = yArr.map(item => item.zd)
|
|
let yData2 = yArr.map(item => item.ms)
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow', // 使用阴影指示器
|
|
},
|
|
},
|
|
legend: {
|
|
data: ['重大工程', '面上工程'],
|
|
bottom: '0%', // 将legend显示在下方
|
|
itemWidth: 12, // 设置图例正方形的宽度
|
|
itemHeight: 12, // 设置图例正方形的高度
|
|
itemStyle: {
|
|
borderRadius: 0, // 确保图例为正方形
|
|
},
|
|
},
|
|
grid: {
|
|
left: '2%',
|
|
right: '2%',
|
|
top: '13%',
|
|
bottom: '15%',
|
|
containLabel: true, // 保证标签显示不超出范围
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xData,
|
|
axisLabel: {
|
|
interval: 0, // 确保X轴标签不重叠
|
|
rotate: 45, // 旋转X轴标签以适应长文本
|
|
},
|
|
axisTick: {
|
|
alignWithLabel: true,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#000',
|
|
},
|
|
},
|
|
boundaryGap: true, // 使得柱状图的起点和终点显示
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '个',
|
|
nameLocation: 'end', // 将标题放在轴的起始位置
|
|
nameGap: 20, // 设置标题与轴的间距
|
|
axisLabel: {
|
|
formatter: '{value}',
|
|
color: '#8C8C8C', // Y轴字体颜色
|
|
fontSize: 12, // Y轴字体大小
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#8C8C8C'
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#f0f0f0', // 灰色的分割线
|
|
},
|
|
},
|
|
splitNumber: 5, // 控制Y轴的分割数
|
|
},
|
|
series: [
|
|
{
|
|
name: '重大工程',
|
|
type: 'bar',
|
|
data: yData1,
|
|
barWidth: '35%', // 设置柱状图的宽度
|
|
itemStyle: {
|
|
color: '#00b39d', // 年度计划的柱状图颜色
|
|
},
|
|
},
|
|
{
|
|
name: '面上工程',
|
|
type: 'bar',
|
|
data: yData2,
|
|
barWidth: '35%',
|
|
itemStyle: {
|
|
color: '#00a7ee', // 实际完成的柱状图颜色
|
|
},
|
|
},
|
|
],
|
|
};
|
|
this.categoryChartOption = option;
|
|
// chart.setOption(option);
|
|
},
|
|
|
|
// 初始化项目类型统计饼状图
|
|
initTypeChart(data) {
|
|
let chartData = data.map((item) => ({
|
|
...item,
|
|
// name: this.truncateName(item.name),
|
|
}));
|
|
let legendList = chartData.map(item => item.name)
|
|
// const data = [
|
|
// {
|
|
// value: 2088,
|
|
// name: '饮水工程',
|
|
// itemStyle: {
|
|
// color: '#00b39d',
|
|
// },
|
|
// },
|
|
// {
|
|
// value: 1000,
|
|
// name: '枢纽工程',
|
|
// itemStyle: {
|
|
// color: '#0073ee',
|
|
// },
|
|
// },
|
|
// {
|
|
// value: 1000,
|
|
// name: '新建水库',
|
|
// itemStyle: {
|
|
// color: '#00a7ee',
|
|
// },
|
|
// },
|
|
// {
|
|
// value: 800,
|
|
// name: '病险',
|
|
// itemStyle: {
|
|
// color: '#00b368',
|
|
// },
|
|
// },
|
|
// {
|
|
// value: 1000,
|
|
// name: '灌区',
|
|
// itemStyle: {
|
|
// color: '#ecb800',
|
|
// },
|
|
// },
|
|
// {
|
|
// value: 350,
|
|
// name: '水保',
|
|
// itemStyle: {
|
|
// color: '#ec7000',
|
|
// },
|
|
// },
|
|
// {
|
|
// value: 350,
|
|
// name: '其他',
|
|
// itemStyle: {
|
|
// color: '#e04040',
|
|
// },
|
|
// },
|
|
// ]
|
|
// 计算总量
|
|
const total = data.reduce((sum, item) => sum + item.value, 0)
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
show: true, // 去掉提示线
|
|
},
|
|
color: ['#00b39d', '#0073ee', '#00a7ee', '#00b368', '#ecb800', '#ec7000', '#e04040'],
|
|
legend: {
|
|
orient: 'vertical',
|
|
right: '5%', // 图例显示在右边
|
|
top: '15%', // 调整图例的垂直位置
|
|
// data: ['饮水工程', '枢纽工程', '新建水库', '病险', '灌区', '水保', '其他'],
|
|
data: legendList,
|
|
itemWidth: 12, // 图例宽度
|
|
itemHeight: 12, // 图例高度
|
|
itemStyle: {
|
|
borderRadius: 0, // 确保图例为正方形
|
|
},
|
|
formatter: function(name) {
|
|
const item = data.find(d => d.name === name);
|
|
return `${name} ${item.value}`; // 自定义图例显示内容
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '项目类别',
|
|
type: 'pie',
|
|
center: ['35%', '50%'], // 设置饼图中心位置
|
|
radius: ['70%', '50%'], // 设置饼图的内外半径
|
|
// avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 0,
|
|
borderColor: '#fff',
|
|
borderWidth: 1,
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'outside', // 标签在外部显示
|
|
formatter: '{b}\n{c} ({d}%)', // 显示标签内容：名称、数值、百分比
|
|
},
|
|
labelLine: {
|
|
show: true,
|
|
},
|
|
data: chartData,
|
|
// 设置饼图的厚度
|
|
roseType: false, // 确保饼图是圆形
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 0,
|
|
},
|
|
},
|
|
}
|
|
],
|
|
graphic: [
|
|
{
|
|
type: 'text',
|
|
top: '40%',
|
|
left: '30%',
|
|
style: {
|
|
text: '合计', // 显示“合计”
|
|
font: '16px Microsoft YaHei', // 字体样式
|
|
fill: '#333' // 字体颜色
|
|
},
|
|
// 使文本居中
|
|
// textAlign: 'center',
|
|
// textVerticalAlign: 'middle'
|
|
},
|
|
{
|
|
type: 'text',
|
|
top: '53%',
|
|
left: '30%',
|
|
style: {
|
|
text: total, // 显示总量
|
|
font: 'bold 24px Microsoft YaHei', // 字体样式
|
|
fill: '#262626' // 字体颜色
|
|
},
|
|
// 使文本居中
|
|
// textAlign: 'center',
|
|
// textVerticalAlign: 'middle'
|
|
// 使总量文字稍微下移以保持间距
|
|
// silent: true,
|
|
// top: 'center', // 这里可以调整以使其居中
|
|
// style: {
|
|
// textAlign: 'center',
|
|
// textVerticalAlign: 'middle',
|
|
// }
|
|
}
|
|
]
|
|
};
|
|
|
|
this.typeChartOption = option;
|
|
// chart.setOption(option);
|
|
},
|
|
|
|
// 初始化项目状态统计饼状图
|
|
initStatusChart() {
|
|
const data = [
|
|
{
|
|
value: this.acc.noAcc,
|
|
name: '施工中',
|
|
itemStyle: {
|
|
color: '#00b39d',
|
|
},
|
|
},
|
|
{
|
|
value: this.acc.acc,
|
|
name: '已完工',
|
|
itemStyle: {
|
|
color: '#ec7000',
|
|
},
|
|
}
|
|
]
|
|
// 计算总量
|
|
const total = Number(this.acc.noAcc) + Number(this.acc.acc)
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
show: true, // 去掉提示线
|
|
},
|
|
legend: {
|
|
orient: 'horizontal',
|
|
left: 'center', // 图例显示在右边
|
|
bottom: '0%', // 调整图例的垂直位置
|
|
data: ['施工中', '已完工'],
|
|
itemWidth: 12, // 图例宽度
|
|
itemHeight: 12, // 图例高度
|
|
itemStyle: {
|
|
borderRadius: 0, // 确保图例为正方形
|
|
},
|
|
formatter: function(name) {
|
|
const item = data.find(d => d.name === name);
|
|
return `${name} ${item.value}`; // 自定义图例显示内容
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '项目类别',
|
|
type: 'pie',
|
|
// center: ['50%', '50%'], // 设置饼图中心位置
|
|
radius: ['70%', '50%'], // 设置饼图的内外半径
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 0,
|
|
borderColor: '#fff',
|
|
borderWidth: 1,
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'outside', // 标签在外部显示
|
|
formatter: '{b}{c}', // 显示标签内容：名称、数值、百分比
|
|
},
|
|
// labelLine: {
|
|
// show: true,
|
|
// },
|
|
data,
|
|
// 设置饼图的厚度
|
|
roseType: false, // 确保饼图是圆形
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 0,
|
|
},
|
|
},
|
|
}
|
|
],
|
|
graphic: [
|
|
{
|
|
type: 'text',
|
|
top: '38%',
|
|
left: 'center',
|
|
style: {
|
|
text: '合计', // 显示“合计”
|
|
font: '16px Microsoft YaHei', // 字体样式
|
|
fill: '#333' // 字体颜色
|
|
},
|
|
// 使文本居中
|
|
// textAlign: 'center',
|
|
// textVerticalAlign: 'middle'
|
|
},
|
|
{
|
|
type: 'text',
|
|
top: '53%',
|
|
left: 'center',
|
|
style: {
|
|
text: total, // 显示总量
|
|
font: 'bold 24px Microsoft YaHei', // 字体样式
|
|
fill: '#262626' // 字体颜色
|
|
}
|
|
}
|
|
]
|
|
};
|
|
this.statusChartOption = option;
|
|
// chart.setOption(option);
|
|
},
|
|
|
|
// 初始化项目行政区划分布统计饼状图
|
|
initDistrictChart() {
|
|
let keys = Object.keys(this.cityData)
|
|
// 创建一个城市代码到城市对象的映射
|
|
const cityMap = new Map(this.newAddressList.map(city => [city.code, city]));
|
|
let filteredData = keys
|
|
.filter(key => cityMap.has(key)) // 根据城市数据筛选
|
|
.map(key => ({ name: cityMap.get(key).name, value: this.cityData[key] })) // 转换为数组格式
|
|
let legendList = filteredData.map(item => item.name )
|
|
let data = filteredData
|
|
// const data = [
|
|
// {
|
|
// value: 2088,
|
|
// name: '饮水工程',
|
|
// itemStyle: {
|
|
// color: '#00b39d',
|
|
// },
|
|
// },
|
|
// {
|
|
// value: 1000,
|
|
// name: '枢纽工程',
|
|
// itemStyle: {
|
|
// color: '#0073ee',
|
|
// },
|
|
// },
|
|
// {
|
|
// value: 1000,
|
|
// name: '新建水库',
|
|
// itemStyle: {
|
|
// color: '#00a7ee',
|
|
// },
|
|
// },
|
|
// {
|
|
// value: 800,
|
|
// name: '病险',
|
|
// itemStyle: {
|
|
// color: '#00b368',
|
|
// },
|
|
// },
|
|
// {
|
|
// value: 1000,
|
|
// name: '灌区',
|
|
// itemStyle: {
|
|
// color: '#ecb800',
|
|
// },
|
|
// },
|
|
// {
|
|
// value: 350,
|
|
// name: '水保',
|
|
// itemStyle: {
|
|
// color: '#ec7000',
|
|
// },
|
|
// },
|
|
// {
|
|
// value: 350,
|
|
// name: '其他',
|
|
// itemStyle: {
|
|
// color: '#e04040',
|
|
// },
|
|
// },
|
|
// ]
|
|
// 计算总量
|
|
const total = filteredData.reduce((sum, item) => sum + item.value, 0);
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
show: true, // 去掉提示线
|
|
},
|
|
color: ['#00b39d', '#0073ee', '#00a7ee', '#00b368', '#ecb800', '#ec7000', '#e04040',
|
|
"#FF5733", // 红色
|
|
"#33FF57", // 绿色
|
|
"#3357FF", // 蓝色
|
|
"#F1C40F", // 黄
|
|
"#8E44AD", // 紫色
|
|
"#E67E22", // 橙色
|
|
"#2ECC71", // 亮绿色
|
|
"#3498DB", // 天蓝色
|
|
"#9B59B6", // 淡紫色
|
|
"#34495E", // 深灰色
|
|
"#1ABC9C", // 青色
|
|
"#D35400", // 深橙色
|
|
"#C0392B", // 深红色
|
|
"#F39C12", // 金色
|
|
"#7D3C98", // 深紫色
|
|
"#2980B9", // 深蓝色
|
|
"#27AE60", // 深绿色
|
|
"#8E44AD", // 紫红色
|
|
"#F4D03F", // 浅黄
|
|
"#BDC3C7" // 浅灰色
|
|
],
|
|
legend: {
|
|
type: 'scroll',
|
|
orient: 'vertical',
|
|
right: '5%', // 图例显示在右边
|
|
top: '15%', // 调整图例的垂直位置
|
|
// data: ['饮水工程', '枢纽工程', '新建水库', '病险', '灌区', '水保', '其他'],
|
|
data: legendList,
|
|
itemWidth: 12, // 图例宽度
|
|
itemHeight: 12, // 图例高度
|
|
itemStyle: {
|
|
borderRadius: 0, // 确保图例为正方形
|
|
},
|
|
formatter: function(name) {
|
|
const item = data.find(d => d.name === name);
|
|
return `${name} ${item.value}`; // 自定义图例显示内容
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '项目类别',
|
|
type: 'pie',
|
|
center: ['35%', '50%'], // 设置饼图中心位置
|
|
radius: ['70%', '50%'], // 设置饼图的内外半径
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 0,
|
|
borderColor: '#fff',
|
|
borderWidth: 1,
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'outside', // 标签在外部显示
|
|
formatter: '{b}\n{c} ({d}%)', // 显示标签内容：名称、数值、百分比
|
|
},
|
|
labelLine: {
|
|
show: true,
|
|
},
|
|
data: filteredData,
|
|
// 设置饼图的厚度
|
|
roseType: false, // 确保饼图是圆形
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 0,
|
|
},
|
|
},
|
|
}
|
|
],
|
|
graphic: [
|
|
{
|
|
type: 'text',
|
|
top: '40%',
|
|
left: '29%',
|
|
style: {
|
|
text: '合计', // 显示“合计”
|
|
font: '16px Microsoft YaHei', // 字体样式
|
|
fill: '#333' // 字体颜色
|
|
},
|
|
// 使文本居中
|
|
// textAlign: 'center',
|
|
// textVerticalAlign: 'middle'
|
|
},
|
|
{
|
|
type: 'text',
|
|
top: '53%',
|
|
left: '28%',
|
|
style: {
|
|
text: total, // 显示总量
|
|
font: 'bold 24px Microsoft YaHei', // 字体样式
|
|
fill: '#262626' // 字体颜色
|
|
},
|
|
// 使文本居中
|
|
// textAlign: 'center',
|
|
// textVerticalAlign: 'middle'
|
|
// 使总量文字稍微下移以保持间距
|
|
// silent: true,
|
|
// top: 'center', // 这里可以调整以使其居中
|
|
// style: {
|
|
// textAlign: 'center',
|
|
// textVerticalAlign: 'middle',
|
|
// }
|
|
}
|
|
]
|
|
};
|
|
this.districtChartOption = option;
|
|
// chart.setOption(option);
|
|
},
|
|
|
|
// 初始化项目预警统计饼状图
|
|
initWarningChart() {
|
|
const data = [
|
|
{
|
|
name: '预警',
|
|
value: this.warningData.warn,
|
|
itemStyle: {
|
|
color: '#00b39d',
|
|
}
|
|
},
|
|
{
|
|
name: '提醒',
|
|
value: this.warningData.forewarning,
|
|
itemStyle: {
|
|
color: '#0073ee',
|
|
}
|
|
},
|
|
{
|
|
name: '正常',
|
|
value: this.warningData.normal,
|
|
itemStyle: {
|
|
color: '#00a7ee',
|
|
}
|
|
},
|
|
]
|
|
// const data = [
|
|
// {
|
|
// value: 2088,
|
|
// name: '饮水工程',
|
|
// itemStyle: {
|
|
// color: '#00b39d',
|
|
// },
|
|
// },
|
|
// {
|
|
// value: 1000,
|
|
// name: '枢纽工程',
|
|
// itemStyle: {
|
|
// color: '#0073ee',
|
|
// },
|
|
// },
|
|
// {
|
|
// value: 1000,
|
|
// name: '新建水库',
|
|
// itemStyle: {
|
|
// color: '#00a7ee',
|
|
// },
|
|
// },
|
|
// {
|
|
// value: 800,
|
|
// name: '病险',
|
|
// itemStyle: {
|
|
// color: '#00b368',
|
|
// },
|
|
// },
|
|
// {
|
|
// value: 1000,
|
|
// name: '灌区',
|
|
// itemStyle: {
|
|
// color: '#ecb800',
|
|
// },
|
|
// },
|
|
// {
|
|
// value: 350,
|
|
// name: '水保',
|
|
// itemStyle: {
|
|
// color: '#ec7000',
|
|
// },
|
|
// },
|
|
// {
|
|
// value: 350,
|
|
// name: '其他',
|
|
// itemStyle: {
|
|
// color: '#e04040',
|
|
// },
|
|
// },
|
|
// ]
|
|
// 计算总量
|
|
const total = data.reduce((sum, item) => sum + item.value, 0);
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
show: true, // 去掉提示线
|
|
},
|
|
legend: {
|
|
type: 'scroll',
|
|
orient: 'vertical',
|
|
right: '5%', // 图例显示在右边
|
|
top: '15%', // 调整图例的垂直位置
|
|
data: ['预警', '提醒', '正常'],
|
|
itemWidth: 12, // 图例宽度
|
|
itemHeight: 12, // 图例高度
|
|
itemStyle: {
|
|
borderRadius: 0, // 确保图例为正方形
|
|
},
|
|
formatter: function(name) {
|
|
const item = data.find(d => d.name === name);
|
|
return `${name} ${item.value}`; // 自定义图例显示内容
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '项目类别',
|
|
type: 'pie',
|
|
center: ['35%', '50%'], // 设置饼图中心位置
|
|
radius: ['70%', '50%'], // 设置饼图的内外半径
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 0,
|
|
borderColor: '#fff',
|
|
borderWidth: 1,
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'outside', // 标签在外部显示
|
|
formatter: '{b}\n{c} ({d}%)', // 显示标签内容：名称、数值、百分比
|
|
},
|
|
labelLine: {
|
|
show: true,
|
|
},
|
|
data,
|
|
// 设置饼图的厚度
|
|
roseType: false, // 确保饼图是圆形
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 0,
|
|
},
|
|
},
|
|
}
|
|
],
|
|
graphic: [
|
|
{
|
|
type: 'text',
|
|
top: '40%',
|
|
left: '29%',
|
|
style: {
|
|
text: '合计', // 显示“合计”
|
|
font: '16px Microsoft YaHei', // 字体样式
|
|
fill: '#333' // 字体颜色
|
|
},
|
|
// 使文本居中
|
|
// textAlign: 'center',
|
|
// textVerticalAlign: 'middle'
|
|
},
|
|
{
|
|
type: 'text',
|
|
top: '53%',
|
|
left: '27%',
|
|
style: {
|
|
text: total, // 显示总量
|
|
font: 'bold 24px Microsoft YaHei', // 字体样式
|
|
fill: '#262626' // 字体颜色
|
|
},
|
|
// 使文本居中
|
|
// textAlign: 'center',
|
|
// textVerticalAlign: 'middle'
|
|
// 使总量文字稍微下移以保持间距
|
|
// silent: true,
|
|
// top: 'center', // 这里可以调整以使其居中
|
|
// style: {
|
|
// textAlign: 'center',
|
|
// textVerticalAlign: 'middle',
|
|
// }
|
|
}
|
|
]
|
|
};
|
|
this.warningChartOption = option;
|
|
// chart.setOption(option);
|
|
},
|
|
|
|
// 跳转到生成报告页
|
|
handleGenerateProject() {
|
|
this.$tab.navigateTo(`/pages/statistics/generate`);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.statistics {
|
|
padding-bottom: 80px;
|
|
.chart-list {
|
|
padding: 64px 20px 16px;
|
|
.card {
|
|
canvas {
|
|
width: 100%;
|
|
height: 250px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.card-body {
|
|
padding: 20px;
|
|
font-size: 16px;
|
|
color: #333;
|
|
}
|
|
|
|
.ec-canvas {
|
|
height: 300px;
|
|
}
|
|
</style>
|
|
|
|
|