Skip to content

W
wangxiaolu-sfa-ui
提交 d2635ee9 authored 作者: lidongxu's avatar lidongxu
浏览文件
操作

refactor(vue 版本，bi): 更新 Vue 版本，修改格式化数字的函数，并用在使用的地方

同上
上级 71b6af3b
隐藏空白字符变更
内嵌 并排
正在显示 包含 150 行增加 和 98 行删除
src/utils/color.js
浏览文件 @ d2635ee9
......@@ -41,6 +41,19 @@ export const getBrandColor = (brand, index = 0) => {
}
}
// 按顺序循环取颜色
export const getAdditionalColor = (index = 0) => {
const ADDITIONAL_COLORS = [
'#5470c6', '#00EFDC', '#91cc75', '#fac858', '#0062EB', '#c23531',
'#66ccff', '#CE09EB', '#00EF5A', '#EBE098', '#00DDEB', '#F0EA07',
'#3ba272', '#EF8912', '#fc8452', '#00cc99', '#ff6699', '#A1EB00',
'#cc0066', '#8409EB', '#0720F0', '#ee6666', '#E7A2EB', '#0099cc',
'#EB00B4'
];
return ADDITIONAL_COLORS[index % ADDITIONAL_COLORS.length];
}
// 生成 16 进制随机颜色
const getRandomColor = () => {
let color = Math.floor(Math.random() * 16777215).toString(16);
......
src/utils/math.js
浏览文件 @ d2635ee9
......@@ -21,67 +21,66 @@ export function divSafe(arg1, arg2) {
/**
* 将数值转换为带单位的字符串，并添加千分位逗号
* @param {number} value - 要转换的数值
* @param {string} extraDescription - 额外的描述字符串（没有直接返回数据）
* @param {bool} bool - 是否开启转换
* @param {bool} round - 是否取整
* @param {object} 配置对象
* @param {number} value - 要转换的数值
* @param {bool} carry - 是否开启亿万数量进位
* @param {number} fixed - 保留几位小数
* @param {bool} round - 是否取整（四舍五入）
* @param {bool} pos - 是否统一正数
* @param {bool} comma - 是否使用千分位逗号
* @param {string} des - 尾部额外添加描述字符（例如：人 / 元 / %等）
* @returns {string} 格式化后的字符串
*/
export function formatNumberWithUnit(value, extraDescription, bool, round) {
// if (typeof value !== 'number') {
// throw new Error('输入值必须是数字');
// }
// 如果 value 是空直接返回 0
if (value === 0 || value === '' || value === null || value === undefined) return 0;
export function formatNumberWithUnit({ value, carry = true, fixed = 2, round = true, pos = true, comma = true, des }) {
// console.log('传入', value, carry, fixed, round, pos, comma, des)
let resultNum = 0 // 保存计算后的结果
let unit = ''; // 保存转换后的单位（例如：万 / 亿）
// 不转换
if (!bool) {
if(!round){
if (!extraDescription) {
return value.toFixed(2)
} else {
return value.toFixed(2) + extraDescription
}
}else{
if (!extraDescription) {
return Math.round(value) + ''
} else {
return Math.round(value) + extraDescription
}
}
// 如果不是数字类型，先尝试转换
if (typeof value === 'number' || !isNaN(value)) {
value = Number(value);
} else {
return 0
}
// 转换单位
let unit;
let formattedValue;
if (value >= 100000000) {
unit = '亿';
formattedValue = (value / 100000000);
} else if (value >= 10000) {
unit = '万';
formattedValue = (value / 10000);
// 如果 value 是空直接返回 0
if (value === 0 || value === '' || value === null || value === undefined || isNaN(value)) {
resultNum = 0
}
if (carry) {
// 开启亿万数量进位
if (value >= 100000000) {
unit = '亿';
resultNum = (value / 100000000);
} else if (value >= 10000) {
unit = '万';
resultNum = (value / 10000);
} else {
unit = '';
resultNum = value;
}
} else {
unit = '';
formattedValue = value;
resultNum = value
}
if (fixed) {
// 保留几位小数
resultNum = parseFloat(resultNum.toFixed(fixed));
// console.log('保留小数', resultNum.toFixed(fixed), resultNum)
}
// 判断是否取整
if (round) {
formattedValue = Math.round(formattedValue) + '';
} else {
formattedValue = formattedValue.toFixed(2);
// 是否取整
resultNum = Math.round(resultNum)
// console.log('取整', resultNum)
}
// 如果没有额外描述，直接返回数值
if (!extraDescription) {
return formattedValue;
if (pos) {
// 是否取整
resultNum = Math.abs(resultNum);
}
// 添加千分位逗号
formattedValue = formattedValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return `${formattedValue}${unit}${extraDescription}`;
if (comma) {
// 是否添加千分位符号（从这里开始就是字符串了）
resultNum = resultNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
return `${resultNum} ${unit}${des}`;
}
/**
......
src/views/bi/competitor/cmm/LineAndBar.vue
浏览文件 @ d2635ee9
......@@ -46,13 +46,21 @@ const setOptions = () => {
},
axisLabel: {
formatter(value) {
return formatNumberWithUnit(value, '元', myThousand, true)
return formatNumberWithUnit({
value,
des: '元',
carry: myThousand
})
}
},
axisPointer: {
label: {
formatter: (params) => {
return formatNumberWithUnit(params.value, '元', myThousand, true)
return formatNumberWithUnit({
value: params.value,
des: '元',
carry: myThousand
})
}
}
}
......@@ -65,13 +73,21 @@ const setOptions = () => {
},
axisLabel: {
formatter(value) {
return formatNumberWithUnit(value, '人', myThousand, true)
return formatNumberWithUnit({
value,
des: '人',
carry: myThousand
})
}
},
axisPointer: {
label: {
formatter: (params) => {
return formatNumberWithUnit(params.value, '人', myThousand, true)
return formatNumberWithUnit({
value: params.value,
des: '人',
carry: myThousand
})
}
}
}
......@@ -134,9 +150,17 @@ const setOptions = () => {
var color = item.color;
// 拼接提示内容
if (item.seriesName.split('-')[1] === '销售额') {
tooltip += '<span style="display:inline-block;margin-right:5px;width:12px;height:6px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit(item.value, '元', myThousand) + '<br>';
tooltip += '<span style="display:inline-block;margin-right:5px;width:12px;height:6px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit({
value: item.value,
des: '元',
carry: myThousand
}) + '<br>';
} else if (item.seriesName.split('-')[1] === '观看人次') {
tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit(item.value, '人', myThousand) + '<br>';
tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit({
value: item.value,
des: '人',
carry: myThousand
}) + '<br>';
}
});
return tooltip;
......
src/views/bi/competitor/sycm_prd/GradientArea.vue
浏览文件 @ d2635ee9
......@@ -54,9 +54,18 @@ const setOptions = () => {
var color = item.color;
// 拼接提示内容
if (item.seriesName.split('-')[1].includes('速')) {
tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit(item.value, '%', false, false) + '<br>';
tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit({
value: item.value,
carry: false,
round: false,
pos: false,
des: '%'
}) + '<br>';
} else {
tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ':' + formatNumberWithUnit(item.value, '人', false, true) + '<br>';
tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ':' + formatNumberWithUnit({
value: item.value,
des: '人'
}) + '<br>';
}
});
return tooltip;
......
src/views/bi/competitor/sycm_prd/index.vue
浏览文件 @ d2635ee9
......@@ -72,7 +72,7 @@
import GradientArea from './GradientArea.vue';
import TableList from './TableList.vue';
import { getComPrdListAPI, getSycmListAPI } from '@/api'
import { generatorDayList, parseTime, getBrandColor, resetObjValue } from '@/utils'
import { generatorDayList, parseTime, getAdditionalColor, resetObjValue } from '@/utils'
import { useDatePickerOptions } from '@/hooks'
// 静态数据
......@@ -122,8 +122,9 @@ const initChartsData = (data) => {
resetObjValue(allChartData)
allChartData.xAxis = generatorDayList(queryParams.date[0], queryParams.date[1])
// 图表数据
data.forEach(list => {
// list: 每个店铺数据集合
data.forEach((list, index) => {
index = index * 4
// list: 每个商品数据集合
// 公共的配置
let commonObj = {
type: 'line',
......@@ -141,11 +142,11 @@ const initChartsData = (data) => {
let jyzsObj = {
...commonObj,
itemStyle: {
color: getBrandColor(list[0]?.platformStore, 0)
color: getAdditionalColor(index)
},
areaStyle: {
opacity: 0.8,
color: getBrandColor(list[0]?.platformStore, 0)
color: getAdditionalColor(index)
},
name: list[0]?.platformStore + '-交易增速',
data: []
......@@ -153,11 +154,11 @@ const initChartsData = (data) => {
let llzsObj = {
...commonObj,
itemStyle: {
color: getBrandColor(list[0]?.platformStore, 1)
color: getAdditionalColor(index + 1)
},
areaStyle: {
opacity: 0.8,
color: getBrandColor(list[0]?.platformStore, 1)
color: getAdditionalColor(index + 1)
},
name: list[0]?.platformStore + '-流量增速',
data: [],
......@@ -165,11 +166,11 @@ const initChartsData = (data) => {
let uvObj = {
...commonObj,
itemStyle: {
color: getBrandColor(list[0]?.platformStore, 2)
color: getAdditionalColor(index + 2)
},
areaStyle: {
opacity: 0.8,
color: getBrandColor(list[0]?.platformStore, 2)
color: getAdditionalColor(index + 2)
},
name: list[0]?.platformStore + '-独立访客范围',
data: []
......@@ -177,11 +178,11 @@ const initChartsData = (data) => {
let zfmjObj = {
...commonObj,
itemStyle: {
color: getBrandColor(list[0]?.platformStore, 3)
color: getAdditionalColor(index + 3)
},
areaStyle: {
opacity: 0.8,
color: getBrandColor(list[0]?.platformStore, 3)
color: getAdditionalColor(index + 3)
},
name: list[0]?.platformStore + '-支付买家数',
data: []
......@@ -207,25 +208,25 @@ const initChartsData = (data) => {
data: [{
name: jyzsObj.name,
type: 'circle',
color: getBrandColor(list[0]?.platformStore, 0),
color: getAdditionalColor(index),
effective: true,
show: true,
}, {
name: llzsObj.name,
type: 'circle',
color: getBrandColor(list[0]?.platformStore, 1),
color: getAdditionalColor(index + 1),
effective: true,
show: true
}, {
name: uvObj.name,
type: 'circle',
color: getBrandColor(list[0]?.platformStore, 2),
color: getAdditionalColor(index + 2),
effective: true,
show: true
}, {
name: zfmjObj.name,
type: 'circle',
color: getBrandColor(list[0]?.platformStore, 3),
color: getAdditionalColor(index + 3),
effective: true,
show: true
}],
......
src/views/bi/competitor/sycm_store/GradientArea.vue
浏览文件 @ d2635ee9
......@@ -54,9 +54,18 @@ const setOptions = () => {
var color = item.color;
// 拼接提示内容
if (item.seriesName.split('-')[1].includes('速')) {
tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit(item.value, '%', false, false) + '<br>';
tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit({
value: item.value,
carry: false,
round: false,
pos: false,
des: '%'
}) + '<br>';
} else {
tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ':' + formatNumberWithUnit(item.value, '人', false, true) + '<br>';
tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ':' + formatNumberWithUnit({
value: item.value,
des: '人'
}) + '<br>';
}
});
return tooltip;
......
src/views/bi/sale/LineChart.vue
浏览文件 @ d2635ee9
......@@ -50,13 +50,13 @@ const setOptions = () => {
chart.setOption({
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#444648', '#fc8452', '#9a60b4', '#ea7ccc'],
title: {
text: this.chartData.title,
text: props.chartData.title,
},
tooltip: {
trigger: 'axis'
},
legend: {
data: this.chartData.data?.map(o => o.name)
data: props.chartData.data?.map(o => o.name)
},
grid: {
left: '3%',
......@@ -65,7 +65,7 @@ const setOptions = () => {
containLabel: true
},
toolbox: {
show: this.showTool,
show: props.showTool,
feature: {
saveAsImage: {}, // 保存为图片
magicType: {
......@@ -76,9 +76,9 @@ const setOptions = () => {
title: '切换万单位',
icon: 'path://M50,50 L100,50 L100,100 L150,100 L150,150 L100,150 L100,200 L50,200 L50,150 L0,150 L0,100 L50,100 Z',
onclick: () => {
this.myThousand = !this.myThousand
this.lockThousand = !this.lockThousand
this.setOptions()
myThousand.value = !myThousand.value
lockThousand.value = !lockThousand.value
setOptions()
}
}
}
......@@ -86,23 +86,21 @@ const setOptions = () => {
xAxis: {
type: 'category',
boundaryGap: false,
data: this.chartData.xData
data: props.chartData.xData
},
yAxis: {
type: 'value',
name: (this.myThousand ? '（万）' : '') + this.chartData.yName
name: (myThousand.value ? '（万）' : '') + props.chartData.yName
},
series: [
...this.chartData.data?.map(o => {
return {
name: o.name,
type: 'line',
data: o.data.map(num => {
return parseFloat((this.myThousand ? num / 10000 : num).toFixed(2))
})
}
})
]
series: props.chartData.data?.map(o => {
return {
name: o.name,
type: 'line',
data: o.data.map(num => {
return parseFloat((myThousand.value ? num / 10000 : num).toFixed(2))
})
}
})
})
}
......
src/views/bi/sale/index.vue
浏览文件 @ d2635ee9
......@@ -112,7 +112,7 @@
align="center"
min-width="100px"
sortable
:formatter="(row, cell, cellValue) => formatNumberWithUnit(cellValue, '', true, false)"></el-table-column>
:formatter="(row, cell, cellValue) => formatNumberWithUnit(cellValue, '', false, true)"></el-table-column>
<el-table-column label="销售额"
prop="YTD.salePrice"
align="center"
......@@ -353,7 +353,7 @@ const getSaleList = async (item) => {
platformId: o.platformId,
targetSaleSum: o.targetSaleSum,
YTD: {
saleNum: o.saleCountY,
saleNum: 1398213.123,
salePrice: o.saleSumY,
goodsSupplyDemandCount: o.goodsSupplyDemandCountY,
// needNumPercentage: (formatNumberWithUnit(o.saleCountY, o.goodsSupplyDemandCountY) * 100).toFixed(2)
......@@ -513,7 +513,6 @@ const createTableAndECharts = () => {
item.queryParams.date = [new Date().setDate(1), new Date().setDate((new Date().getDate() - 1))] // 默认查询和显示的是当月 1 号到 T-1 日期
} else {
// 非第一套图表，滚动到底
console.log(document.querySelector('.main-container').scrollHeight)
nextTick(() => {
gsap.to(document.documentElement, {
duration: 1,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论