/**
|
* ProdProblemCountSummary 逻辑代理
|
*/
|
import dayjs from 'dayjs';
|
import { barChartOption, downloadChartImage } from '@/utils/echart-util.js';
|
|
export default {
|
/**
|
* 合并数据
|
* @param {*} data1
|
* @param {*} data2
|
* @returns
|
*/
|
combineData(data1, data2) {
|
return data1.map((item) => {
|
const last = data2.find((item2) => item2.townCode === item.townCode);
|
item.ratio = Math.round(item.ratio * 10) / 10 || 0;
|
return {
|
...item,
|
lastSceneCount: last?.sceneCount || 0,
|
lastProblemCount: last?.problemCount || 0,
|
lastRatio: Math.round((last?.ratio || 0) * 10) / 10 || 0
|
};
|
});
|
},
|
|
|
/**
|
* 生成扬尘污染问题数对比柱状图配置
|
* @param {Object} opt1 - 第一个时间段的配置对象，包含startTime(开始时间)、districtName(区域名称)、sceneTypeName(场景类型名称)
|
* @param {Object} opt2 - 第二个时间段的配置对象，包含startTime(开始时间)
|
* @param {Array} data - 数据数组，每个元素包含townName(街道名称)、ratio(当前问题数均值)、lastRatio(对比问题数均值)
|
* @returns {Object} ECharts图表配置对象
|
*/
|
genChartOption(opt1, opt2, data) {
|
// 从第一个时间配置中获取年份
|
const year = dayjs(opt1.startTime).year();
|
// 从第一个时间配置中获取月份（注意：JavaScript的月份是0-11，所以加1）
|
const month1 = dayjs(opt1.startTime).month() + 1;
|
// 从第二个时间配置中获取月份
|
const month2 = dayjs(opt2.startTime).month() + 1;
|
// 格式化时间字符串，用于图表标题
|
const time = `${year}年${month2}月、${month1}月`;
|
// 获取基础柱状图配置模板
|
const option = barChartOption();
|
// 设置图表标题，包含时间段、区域名称、场景类型等信息
|
option.title.text = `${time}${opt1.districtName}各街道（镇）${opt1.sceneTypeName}扬尘污染问题数均值对比`;
|
|
// 设置X轴名称为街道（镇）
|
option.xAxis.name = '街道（镇）';
|
// 设置X轴数据为各街道名称
|
option.xAxis.data = data.map((item) => item.townName);
|
// 设置Y轴名称为问题数均值
|
option.yAxis.name = '问题数均值';
|
|
// 配置图表数据系列
|
option.series = [
|
{
|
name: `${month1}月`, // 当前月份数据系列名称
|
type: 'bar', // 图表类型为柱状图
|
data: data.map((item) => item.ratio), // 当前月份各街道问题数均值
|
label: {
|
show: true, // 显示数据标签
|
position: 'top', // 标签显示在柱子顶部
|
formatter: '{c}' // 标签格式：直接显示数值
|
}
|
},
|
{
|
name: `${month2}月`, // 对比月份数据系列名称
|
type: 'bar', // 图表类型为柱状图
|
data: data.map((item) => item.lastRatio), // 对比月份各街道问题数均值
|
label: {
|
show: true, // 显示数据标签
|
position: 'top', // 标签显示在柱子顶部
|
formatter: '{c}' // 标签格式：直接显示数值
|
}
|
}
|
];
|
|
// 返回完整的图表配置对象
|
return option;
|
}
|
};
|
