Skip to content

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

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

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