refactor: adjust chart code dir

This commit is contained in:
Uyarn 2022-04-27 02:06:14 +08:00 committed by PY
parent 09c6b17b7e
commit 2a6bfa082c
11 changed files with 771 additions and 803 deletions

View File

@ -25,11 +25,11 @@
"pinia": "^2.0.11", "pinia": "^2.0.11",
"qrcode.vue": "^3.2.2", "qrcode.vue": "^3.2.2",
"tdesign-icons-vue-next": "^0.0.6", "tdesign-icons-vue-next": "^0.0.6",
"tdesign-vue-next": "~0.11.2", "tdesign-vue-next": "^0.13.0",
"tvision-color": "^1.3.1", "tvision-color": "^1.3.1",
"vue": "^3.2.31", "vue": "^3.2.31",
"vue-router": "^4.0.11", "vue-clipboard3": "^2.0.0",
"vue-clipboard3": "^2.0.0" "vue-router": "^4.0.11"
}, },
"devDependencies": { "devDependencies": {
"@commitlint/cli": "^16.2.1", "@commitlint/cli": "^16.2.1",

View File

@ -1,89 +1,7 @@
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import * as echarts from 'echarts/core'; import { TChartColor } from '@/config/color';
import { Color } from 'tvision-color'; import { getChartListColor } from '@/utils/color';
import { getBrandColor, defaultLightColor, defaultDarkColor, TChartColor } from '@/config/color'; import { getRandomArray } from '@/utils/charts';
import { getSettingStore } from '@/store';
/**
*
*
* @export
* @param {string} theme
* @returns {}
*/
export function getColorFromTheme(theme: string) {
const settingStore = getSettingStore();
const { colorList, mode } = settingStore;
const isDarkMode = mode === 'dark';
let themeColorList = [];
const themeColor = getBrandColor(theme, colorList);
if (!/^#[A-F\d]{6}$/i.test(theme)) {
theme = themeColor?.['@brand-color'] || '#0052D9';
const themIdx = defaultLightColor.indexOf(theme.toLocaleLowerCase());
const defaultGradients = !isDarkMode ? defaultLightColor : defaultDarkColor;
const spliceThemeList = defaultGradients.slice(0, themIdx);
themeColorList = defaultGradients.slice(themIdx, defaultGradients.length).concat(spliceThemeList);
} else {
theme = themeColor?.['@brand-color'];
themeColorList = Color.getRandomPalette({
color: theme,
colorGamut: 'bright',
number: 8,
});
}
return themeColorList;
}
/** 图表颜色 */
function chartListColor(): Array<string> {
const settingStore = getSettingStore();
const { brandTheme } = settingStore;
const res = getColorFromTheme(brandTheme);
return res;
}
/**
*
*
* @export
* @param {string[]} dateTime
* @param {number} divideNum
* @returns {string[]}
*/
export function getDateArray(dateTime: string[] = [], divideNum = 10): string[] {
const timeArray: string[] = [];
if (dateTime.length > 0) {
for (let i = 0; i < divideNum; i++) {
const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD'));
}
}
return timeArray;
}
/**
*
*
* @param {number} [num=100]
* @returns
*
* @memberOf DashboardBase
*/
export function getRandomArray(num = 100) {
let resultNum = Number((Math.random() * num).toFixed(0));
if (resultNum <= 1) {
resultNum = 1;
}
return resultNum;
}
/** 首页 dashboard 折线图 */ /** 首页 dashboard 折线图 */
export function constructInitDashboardDataset(type: string) { export function constructInitDashboardDataset(type: string) {
@ -137,7 +55,7 @@ export function constructInitDashboardDataset(type: string) {
} }
const barDataset = { const barDataset = {
...datasetAxis, ...datasetAxis,
color: chartListColor(), color: getChartListColor(),
series: [ series: [
{ {
data: [ data: [
@ -205,7 +123,7 @@ export function constructInitDataset({
// console.log('timeArray..', timeArray); // console.log('timeArray..', timeArray);
const dataset = { const dataset = {
color: chartListColor(), color: getChartListColor(),
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
}, },
@ -217,7 +135,7 @@ export function constructInitDataset({
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: chartListColor()[1], color: getChartListColor()[1],
width: 1, width: 1,
}, },
}, },
@ -270,267 +188,6 @@ export function constructInitDataset({
return dataset; return dataset;
} }
/** 平滑图数据 */
export function getSmoothLineDataSet({
dateTime = [],
placeholderColor,
borderColor,
}: { dateTime?: Array<string> } & TChartColor) {
let dateArray: Array<string> = ['00:00', '02:00', '04:00', '06:00'];
if (dateTime.length > 0) {
const divideNum = 7;
dateArray = getDateArray(dateTime, divideNum);
}
return {
color: chartListColor(),
tooltip: {
trigger: 'item',
},
grid: {
top: '10px',
left: '0',
right: '20px',
bottom: '36px',
containLabel: true,
},
xAxis: {
type: 'category',
data: dateArray,
boundaryGap: false,
axisLabel: {
color: placeholderColor,
},
axisLine: {
lineStyle: {
color: borderColor,
width: 1,
},
},
},
yAxis: {
type: 'value',
axisLabel: {
color: placeholderColor,
},
splitLine: {
lineStyle: {
color: borderColor,
},
},
},
legend: {
data: ['本月', '上月'],
icon: 'circle',
bottom: '0',
itemGap: 48,
itemHeight: 8,
itemWidth: 8,
textStyle: {
fontSize: 12,
color: placeholderColor,
},
},
series: [
{
name: '上月',
data: [
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
],
type: 'line',
smooth: true,
color: chartListColor()[0],
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
areaStyle: {
normal: {
opacity: 0.1,
},
},
},
{
name: '本月',
data: [
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
],
type: 'line',
smooth: true,
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
color: chartListColor()[1],
},
],
};
}
/** 折线图数据 */
export function getFolderLineDataSet({
dateTime = [],
placeholderColor,
borderColor,
}: { dateTime?: Array<string> } & TChartColor) {
let dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
if (dateTime.length > 0) {
const divideNum = 7;
dateArray = getDateArray(dateTime, divideNum);
}
return {
color: chartListColor(),
grid: {
top: '5%',
right: '10px',
left: '30px',
bottom: '60px',
},
legend: {
left: 'center',
bottom: '0',
orient: 'horizontal', // legend 横向布局。
data: ['杯子', '茶叶', '蜂蜜', '面粉'],
textStyle: {
fontSize: 12,
color: placeholderColor,
},
},
xAxis: {
type: 'category',
data: dateArray,
boundaryGap: false,
axisLabel: {
color: placeholderColor,
},
axisLine: {
lineStyle: {
color: borderColor,
width: 1,
},
},
},
yAxis: {
type: 'value',
axisLabel: {
color: placeholderColor,
},
splitLine: {
lineStyle: {
color: borderColor,
},
},
},
tooltip: {
trigger: 'item',
},
series: [
{
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: '杯子',
stack: '总量',
data: [
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
],
type: 'line',
itemStyle: {
normal: {
borderColor,
borderWidth: 1,
},
},
},
{
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: '茶叶',
stack: '总量',
data: [
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
],
type: 'line',
itemStyle: {
normal: {
borderColor,
borderWidth: 1,
},
},
},
{
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: '蜂蜜',
stack: '总量',
data: [
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
],
type: 'line',
itemStyle: {
normal: {
borderColor,
borderWidth: 1,
},
},
},
{
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: '面粉',
stack: '总量',
data: [
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
],
type: 'line',
itemStyle: {
normal: {
borderColor,
borderWidth: 1,
},
},
},
],
};
}
/** /**
* 线 * 线
* *
@ -566,7 +223,7 @@ export function getLineChartDataSet({
} }
const dataSet = { const dataSet = {
color: chartListColor(), color: getChartListColor(),
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
}, },
@ -652,419 +309,6 @@ export function getLineChartDataSet({
return dataSet; return dataSet;
} }
/**
*
*
* @export
* @param {string} productName
* @param {number} divideNum
*/
export function getSelftItemList(productName: string, divideNum: number): string[] {
const productArray: string[] = [productName];
for (let i = 0; i < divideNum; i++) {
productArray.push(getRandomArray(100 * i).toString());
}
return productArray;
}
/**
*
*
* @export
* @returns {}
*/
export function getScatterDataSet({
dateTime = [],
placeholderColor,
borderColor,
}: { dateTime?: Array<string> } & TChartColor): any {
const divideNum = 40;
const timeArray = [];
const inArray = [];
const outArray = [];
for (let i = 0; i < divideNum; i++) {
// const [timeArray, inArray, outArray] = dataset;
if (dateTime.length > 0) {
const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
timeArray.push(dayjs(enhandTime).format('MM-DD'));
} else {
timeArray.push(
dayjs()
.subtract(divideNum - i, 'day')
.format('MM-DD'),
);
}
inArray.push(getRandomArray().toString());
outArray.push(getRandomArray().toString());
}
return {
color: chartListColor(),
xAxis: {
data: timeArray,
axisLabel: {
color: placeholderColor,
},
splitLine: { show: false },
axisLine: {
lineStyle: {
color: borderColor,
width: 1,
},
},
},
yAxis: {
type: 'value',
// splitLine: { show: false},
axisLabel: {
color: placeholderColor,
},
nameTextStyle: {
padding: [0, 0, 0, 60],
},
axisTick: {
show: false,
axisLine: {
show: false,
},
},
axisLine: {
show: false,
},
splitLine: {
lineStyle: {
color: borderColor,
},
},
},
tooltip: {
trigger: 'item',
},
grid: {
top: '5px',
left: '25px',
right: '5px',
bottom: '60px',
},
legend: {
left: 'center',
bottom: '0',
orient: 'horizontal', // legend 横向布局。
data: ['按摩仪', '咖啡机'],
itemHeight: 8,
itemWidth: 8,
textStyle: {
fontSize: 12,
color: placeholderColor,
},
},
series: [
{
name: '按摩仪',
symbolSize: 10,
data: outArray.reverse(),
type: 'scatter',
},
{
name: '咖啡机',
symbolSize: 10,
data: inArray.concat(inArray.reverse()),
type: 'scatter',
},
],
};
}
/**
*
*
* @export
* @returns {}
*/
export function getAreaChartDataSet(): any {
const xAxisData = [];
const data1 = [];
const data2 = [];
for (let i = 0; i < 50; i++) {
xAxisData.push(`${i}`);
data1.push((getRandomArray() * Math.sin(i / 5) * (i / 5 - 5) + i / 6) * 2);
data2.push((getRandomArray() * Math.cos(i / 5) * (i / 5 - 5) + i / 6) * 2);
}
return {
color: chartListColor(),
// title: {
// text: '柱状图动画延迟',
// },
legend: {
left: 'center',
bottom: '5%',
orient: 'horizontal',
data: ['测试', '上线'],
},
tooltip: {
trigger: 'item',
},
xAxis: {
data: xAxisData,
splitLine: {
show: false,
},
},
yAxis: {},
series: [
{
name: '测试',
type: 'bar',
data: data1,
emphasis: {
focus: 'series',
},
animationDelay(idx: number) {
return idx * 10;
},
},
{
name: '上线',
type: 'bar',
data: data2,
emphasis: {
focus: 'series',
},
animationDelay(idx: number) {
return idx * 10 + 100;
},
},
],
animationEasing: 'elasticOut',
animationDelayUpdate(idx: number) {
return idx * 5;
},
};
}
/**
*
*
* @export
* @param {boolean} [isMonth=false]
* @returns {*}
*/
export function getColumnChartDataSet(isMonth = false) {
if (isMonth) {
return {
color: chartListColor(),
legend: {
left: 'center',
top: '10%',
orient: 'horizontal', // legend 横向布局。
data: ['直接访问'],
},
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: ['1', '4', '8', '12', '16', '20', '24'],
axisTick: {
alignWithLabel: true,
},
},
],
yAxis: [
{
type: 'value',
},
],
series: [
{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: [
getRandomArray(Math.random() * 100),
getRandomArray(Math.random() * 200),
getRandomArray(Math.random() * 300),
getRandomArray(Math.random() * 400),
getRandomArray(Math.random() * 500),
getRandomArray(Math.random() * 600),
getRandomArray(Math.random() * 700),
],
},
],
};
}
return {
color: chartListColor(),
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'
},
},
legend: {
left: 'center',
bottom: '0%',
orient: 'horizontal', // legend 横向布局。
data: ['直接访问'],
},
grid: {
left: '3%',
right: '4%',
bottom: '13%',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
axisTick: {
alignWithLabel: true,
},
},
],
yAxis: [
{
type: 'value',
},
],
series: [
{
name: '直接访问',
type: 'bar',
barWidth: '20%',
data: [
getRandomArray(Math.random() * 100),
getRandomArray(Math.random() * 200),
getRandomArray(Math.random() * 300),
getRandomArray(Math.random() * 400),
getRandomArray(Math.random() * 500),
getRandomArray(Math.random() * 600),
getRandomArray(Math.random() * 700),
],
},
],
};
}
export const lastYearList: Array<any> = [100, 120, 140, 160, 180, 200, 210];
/**
*
*
* @export
* @param {boolean} [isMonth=false]
* @returns {*}
*/
export function get2ColBarChartDataSet({
isMonth = false,
placeholderColor,
borderColor,
}: { isMonth?: boolean } & TChartColor) {
let lastYearListCopy = lastYearList.concat([]);
let thisYearListCopy = lastYearList.concat([]);
if (isMonth) {
lastYearListCopy = lastYearListCopy.reverse();
thisYearListCopy = thisYearListCopy.reverse();
}
return {
color: chartListColor(),
tooltip: {
trigger: 'item',
},
grid: {
top: '10px',
left: '0',
right: '0',
bottom: '36px',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
axisTick: {
alignWithLabel: true,
},
axisLabel: {
color: placeholderColor,
},
axisLine: {
lineStyle: {
color: borderColor,
width: 1,
},
},
},
],
yAxis: [
{
type: 'value',
axisLabel: {
color: placeholderColor,
},
splitLine: {
lineStyle: {
color: borderColor,
},
},
},
],
legend: {
data: ['去年', '今年'],
bottom: '0',
icon: 'rect',
itemGap: 48,
itemHeight: 4,
itemWidth: 12,
textStyle: {
fontSize: 12,
color: placeholderColor,
},
},
series: [
{
name: '去年',
type: 'bar',
barWidth: '30%',
data: lastYearListCopy,
itemStyle: {
color: '#BCC4D0',
},
},
{
name: '今年',
type: 'bar',
barWidth: '30%',
data: thisYearListCopy,
itemStyle: {
color: (params: { value: number }) => {
if (params.value >= 200) {
return chartListColor()[1];
}
return chartListColor()[0];
},
},
},
],
};
}
/** /**
* *
* *
@ -1079,7 +323,7 @@ export function getPieChartDataSet({
containerColor, containerColor,
}: { radius?: number } & Record<string, string>) { }: { radius?: number } & Record<string, string>) {
return { return {
color: chartListColor(), color: getChartListColor(),
tooltip: { tooltip: {
show: false, show: false,
trigger: 'axis', trigger: 'axis',
@ -1165,29 +409,3 @@ export function getPieChartDataSet({
], ],
}; };
} }
/**
*
*
* @export
* @param {Array<string>} chartsList
* @param {string} theme
*/
export function changeChartsTheme(chartsList: echarts.EChartsType[]) {
if (chartsList && chartsList.length) {
const chartChangeColor = chartListColor();
for (let index = 0; index < chartsList.length; index++) {
const elementChart = chartsList[index];
if (elementChart) {
const optionVal = elementChart.getOption();
// 更改主题颜色
optionVal.color = chartChangeColor;
elementChart.setOption(optionVal, true);
}
}
}
}

View File

@ -218,17 +218,12 @@ import { PieChart, LineChart, BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers'; import { CanvasRenderer } from 'echarts/renderers';
import { useSettingStore } from '@/store'; import { useSettingStore } from '@/store';
import { LAST_7_DAYS } from '@/utils/date'; import { LAST_7_DAYS } from '@/utils/date';
import { changeChartsTheme } from '@/utils/color';
// //
import Trend from '@/components/trend/index.vue'; import Trend from '@/components/trend/index.vue';
import Card from '@/components/card/index.vue'; import Card from '@/components/card/index.vue';
import { import { constructInitDataset, getPieChartDataSet, getLineChartDataSet, constructInitDashboardDataset } from './index';
changeChartsTheme,
constructInitDataset,
getPieChartDataSet,
getLineChartDataSet,
constructInitDashboardDataset,
} from './index';
import { PANE_LIST, SALE_TEND_LIST, BUY_TEND_LIST, SALE_COLUMNS, BUY_COLUMNS } from './constants'; import { PANE_LIST, SALE_TEND_LIST, BUY_TEND_LIST, SALE_COLUMNS, BUY_COLUMNS } from './constants';

View File

@ -0,0 +1,268 @@
import dayjs from 'dayjs';
import { TChartColor } from '@/config/color';
import { getChartListColor } from '@/utils/color';
import { getRandomArray, getDateArray } from '@/utils/charts';
/**
*
*
* @export
* @returns {}
*/
export function getScatterDataSet({
dateTime = [],
placeholderColor,
borderColor,
}: { dateTime?: Array<string> } & TChartColor) {
const divideNum = 40;
const timeArray = [];
const inArray = [];
const outArray = [];
for (let i = 0; i < divideNum; i++) {
// const [timeArray, inArray, outArray] = dataset;
if (dateTime.length > 0) {
const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
const endTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
timeArray.push(dayjs(endTime).format('MM-DD'));
} else {
timeArray.push(
dayjs()
.subtract(divideNum - i, 'day')
.format('MM-DD'),
);
}
inArray.push(getRandomArray().toString());
outArray.push(getRandomArray().toString());
}
return {
color: getChartListColor(),
xAxis: {
data: timeArray,
axisLabel: {
color: placeholderColor,
},
splitLine: { show: false },
axisLine: {
lineStyle: {
color: borderColor,
width: 1,
},
},
},
yAxis: {
type: 'value',
// splitLine: { show: false},
axisLabel: {
color: placeholderColor,
},
nameTextStyle: {
padding: [0, 0, 0, 60],
},
axisTick: {
show: false,
axisLine: {
show: false,
},
},
axisLine: {
show: false,
},
splitLine: {
lineStyle: {
color: borderColor,
},
},
},
tooltip: {
trigger: 'item',
},
grid: {
top: '5px',
left: '25px',
right: '5px',
bottom: '60px',
},
legend: {
left: 'center',
bottom: '0',
orient: 'horizontal', // legend 横向布局。
data: ['按摩仪', '咖啡机'],
itemHeight: 8,
itemWidth: 8,
textStyle: {
fontSize: 12,
color: placeholderColor,
},
},
series: [
{
name: '按摩仪',
symbolSize: 10,
data: outArray.reverse(),
type: 'scatter',
},
{
name: '咖啡机',
symbolSize: 10,
data: inArray.concat(inArray.reverse()),
type: 'scatter',
},
],
};
}
/** 折线图数据 */
export function getFolderLineDataSet({
dateTime = [],
placeholderColor,
borderColor,
}: { dateTime?: Array<string> } & TChartColor) {
let dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
if (dateTime.length > 0) {
const divideNum = 7;
dateArray = getDateArray(dateTime, divideNum);
}
return {
color: getChartListColor(),
grid: {
top: '5%',
right: '10px',
left: '30px',
bottom: '60px',
},
legend: {
left: 'center',
bottom: '0',
orient: 'horizontal', // legend 横向布局。
data: ['杯子', '茶叶', '蜂蜜', '面粉'],
textStyle: {
fontSize: 12,
color: placeholderColor,
},
},
xAxis: {
type: 'category',
data: dateArray,
boundaryGap: false,
axisLabel: {
color: placeholderColor,
},
axisLine: {
lineStyle: {
color: borderColor,
width: 1,
},
},
},
yAxis: {
type: 'value',
axisLabel: {
color: placeholderColor,
},
splitLine: {
lineStyle: {
color: borderColor,
},
},
},
tooltip: {
trigger: 'item',
},
series: [
{
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: '杯子',
stack: '总量',
data: [
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
],
type: 'line',
itemStyle: {
normal: {
borderColor,
borderWidth: 1,
},
},
},
{
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: '茶叶',
stack: '总量',
data: [
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
],
type: 'line',
itemStyle: {
normal: {
borderColor,
borderWidth: 1,
},
},
},
{
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: '蜂蜜',
stack: '总量',
data: [
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
],
type: 'line',
itemStyle: {
normal: {
borderColor,
borderWidth: 1,
},
},
},
{
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: '面粉',
stack: '总量',
data: [
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
],
type: 'line',
itemStyle: {
normal: {
borderColor,
borderWidth: 1,
},
},
},
],
};
}

View File

@ -73,10 +73,11 @@ import { LineChart, ScatterChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers'; import { CanvasRenderer } from 'echarts/renderers';
import ProductCard from '@/components/card/Card.vue'; import ProductCard from '@/components/card/Card.vue';
import { changeChartsTheme, getFolderLineDataSet, getScatterDataSet } from '../base/index'; import { getFolderLineDataSet, getScatterDataSet } from './index';
import { PANE_LIST_DATA, PRODUCT_LIST } from './constants'; import { PANE_LIST_DATA, PRODUCT_LIST } from './constants';
import { LAST_7_DAYS } from '@/utils/date'; import { LAST_7_DAYS } from '@/utils/date';
import { useSettingStore } from '@/store'; import { useSettingStore } from '@/store';
import { changeChartsTheme } from '@/utils/color';
import Trend from '@/components/trend/index.vue'; import Trend from '@/components/trend/index.vue';
import Card from '@/components/card/index.vue'; import Card from '@/components/card/index.vue';

View File

@ -0,0 +1,215 @@
import { TChartColor } from '@/config/color';
import { getChartListColor } from '@/utils/color';
import { getRandomArray, getDateArray } from '@/utils/charts';
/** 平滑图数据 */
export function getSmoothLineDataSet({
dateTime = [],
placeholderColor,
borderColor,
}: { dateTime?: Array<string> } & TChartColor) {
let dateArray: Array<string> = ['00:00', '02:00', '04:00', '06:00'];
if (dateTime.length > 0) {
const divideNum = 7;
dateArray = getDateArray(dateTime, divideNum);
}
return {
color: getChartListColor(),
tooltip: {
trigger: 'item',
},
grid: {
top: '10px',
left: '0',
right: '20px',
bottom: '36px',
containLabel: true,
},
xAxis: {
type: 'category',
data: dateArray,
boundaryGap: false,
axisLabel: {
color: placeholderColor,
},
axisLine: {
lineStyle: {
color: borderColor,
width: 1,
},
},
},
yAxis: {
type: 'value',
axisLabel: {
color: placeholderColor,
},
splitLine: {
lineStyle: {
color: borderColor,
},
},
},
legend: {
data: ['本月', '上月'],
icon: 'circle',
bottom: '0',
itemGap: 48,
itemHeight: 8,
itemWidth: 8,
textStyle: {
fontSize: 12,
color: placeholderColor,
},
},
series: [
{
name: '上月',
data: [
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
],
type: 'line',
smooth: true,
color: getChartListColor()[0],
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
areaStyle: {
normal: {
opacity: 0.1,
},
},
},
{
name: '本月',
data: [
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
],
type: 'line',
smooth: true,
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
color: getChartListColor()[1],
},
],
};
}
export const lastYearList: Array<any> = [100, 120, 140, 160, 180, 200, 210];
/**
*
*
* @export
* @param {boolean} [isMonth=false]
* @returns {*}
*/
export function get2ColBarChartDataSet({
isMonth = false,
placeholderColor,
borderColor,
}: { isMonth?: boolean } & TChartColor) {
let lastYearListCopy = lastYearList.concat([]);
let thisYearListCopy = lastYearList.concat([]);
if (isMonth) {
lastYearListCopy = lastYearListCopy.reverse();
thisYearListCopy = thisYearListCopy.reverse();
}
return {
color: getChartListColor(),
tooltip: {
trigger: 'item',
},
grid: {
top: '10px',
left: '0',
right: '0',
bottom: '36px',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
axisTick: {
alignWithLabel: true,
},
axisLabel: {
color: placeholderColor,
},
axisLine: {
lineStyle: {
color: borderColor,
width: 1,
},
},
},
],
yAxis: [
{
type: 'value',
axisLabel: {
color: placeholderColor,
},
splitLine: {
lineStyle: {
color: borderColor,
},
},
},
],
legend: {
data: ['去年', '今年'],
bottom: '0',
icon: 'rect',
itemGap: 48,
itemHeight: 4,
itemWidth: 12,
textStyle: {
fontSize: 12,
color: placeholderColor,
},
},
series: [
{
name: '去年',
type: 'bar',
barWidth: '30%',
data: lastYearListCopy,
itemStyle: {
color: '#BCC4D0',
},
},
{
name: '今年',
type: 'bar',
barWidth: '30%',
data: thisYearListCopy,
itemStyle: {
color: (params: { value: number }) => {
if (params.value >= 200) {
return getChartListColor()[1];
}
return getChartListColor()[0];
},
},
},
],
};
}

View File

@ -84,8 +84,9 @@ import { BarChart, LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers'; import { CanvasRenderer } from 'echarts/renderers';
import { useSettingStore } from '@/store'; import { useSettingStore } from '@/store';
import { changeChartsTheme, getSmoothLineDataSet, get2ColBarChartDataSet } from '../../dashboard/base/index'; import { getSmoothLineDataSet, get2ColBarChartDataSet } from './index';
import { BASE_INFO_DATA, TABLE_COLUMNS as columns } from './constants'; import { BASE_INFO_DATA, TABLE_COLUMNS as columns } from './constants';
import { changeChartsTheme } from '@/utils/color';
import { prefix } from '@/config/global'; import { prefix } from '@/config/global';
import Card from '@/components/card/index.vue'; import Card from '@/components/card/index.vue';

157
src/pages/user/index.ts Normal file
View File

@ -0,0 +1,157 @@
import { TChartColor } from '@/config/color';
import { getChartListColor } from '@/utils/color';
import { getRandomArray, getDateArray } from '@/utils/charts';
/** 折线图数据 */
export function getFolderLineDataSet({
dateTime = [],
placeholderColor,
borderColor,
}: { dateTime?: Array<string> } & TChartColor) {
let dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
if (dateTime.length > 0) {
const divideNum = 7;
dateArray = getDateArray(dateTime, divideNum);
}
return {
color: getChartListColor(),
grid: {
top: '5%',
right: '10px',
left: '30px',
bottom: '60px',
},
legend: {
left: 'center',
bottom: '0',
orient: 'horizontal', // legend 横向布局。
data: ['杯子', '茶叶', '蜂蜜', '面粉'],
textStyle: {
fontSize: 12,
color: placeholderColor,
},
},
xAxis: {
type: 'category',
data: dateArray,
boundaryGap: false,
axisLabel: {
color: placeholderColor,
},
axisLine: {
lineStyle: {
color: borderColor,
width: 1,
},
},
},
yAxis: {
type: 'value',
axisLabel: {
color: placeholderColor,
},
splitLine: {
lineStyle: {
color: borderColor,
},
},
},
tooltip: {
trigger: 'item',
},
series: [
{
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: '杯子',
stack: '总量',
data: [
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
],
type: 'line',
itemStyle: {
normal: {
borderColor,
borderWidth: 1,
},
},
},
{
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: '茶叶',
stack: '总量',
data: [
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
],
type: 'line',
itemStyle: {
normal: {
borderColor,
borderWidth: 1,
},
},
},
{
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: '蜂蜜',
stack: '总量',
data: [
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
],
type: 'line',
itemStyle: {
normal: {
borderColor,
borderWidth: 1,
},
},
},
{
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: '面粉',
stack: '总量',
data: [
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
getRandomArray(),
],
type: 'line',
itemStyle: {
normal: {
borderColor,
borderWidth: 1,
},
},
},
],
};
}

View File

@ -104,11 +104,12 @@ import { useSettingStore } from '@/store';
import { LAST_7_DAYS } from '@/utils/date'; import { LAST_7_DAYS } from '@/utils/date';
import { USER_INFO_LIST, TEAM_MEMBERS, PRODUCT_LIST } from './constants'; import { USER_INFO_LIST, TEAM_MEMBERS, PRODUCT_LIST } from './constants';
import { changeChartsTheme, getFolderLineDataSet } from '@/pages/dashboard/base/index'; import { getFolderLineDataSet } from './index';
import ProductAIcon from '@/assets/assets-product-1.svg'; import ProductAIcon from '@/assets/assets-product-1.svg';
import ProductBIcon from '@/assets/assets-product-2.svg'; import ProductBIcon from '@/assets/assets-product-2.svg';
import ProductCIcon from '@/assets/assets-product-3.svg'; import ProductCIcon from '@/assets/assets-product-3.svg';
import ProductDIcon from '@/assets/assets-product-4.svg'; import ProductDIcon from '@/assets/assets-product-4.svg';
import { changeChartsTheme } from '@/utils/color';
import Card from '@/components/card/index.vue'; import Card from '@/components/card/index.vue';

40
src/utils/charts.ts Normal file
View File

@ -0,0 +1,40 @@
import dayjs from 'dayjs';
/**
*
*
* @export
* @param {string[]} dateTime
* @param {number} divideNum
* @returns {string[]}
*/
export function getDateArray(dateTime: string[] = [], divideNum = 10): string[] {
const timeArray: string[] = [];
if (dateTime.length > 0) {
for (let i = 0; i < divideNum; i++) {
const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD'));
}
}
return timeArray;
}
/**
*
*
* @param {number} [num=100]
* @returns
*
* @memberOf DashboardBase
*/
export function getRandomArray(num = 100) {
let resultNum = Number((Math.random() * num).toFixed(0));
if (resultNum <= 1) {
resultNum = 1;
}
return resultNum;
}

72
src/utils/color.ts Normal file
View File

@ -0,0 +1,72 @@
import { Color } from 'tvision-color';
import * as echarts from 'echarts/core';
import { getBrandColor, defaultLightColor, defaultDarkColor } from '@/config/color';
import { getSettingStore } from '@/store';
/**
*
*
* @export
* @param {string} theme
* @returns {}
*/
export function getColorFromTheme(theme: string) {
const settingStore = getSettingStore();
const { colorList, mode } = settingStore;
const isDarkMode = mode === 'dark';
let themeColorList = [];
const themeColor = getBrandColor(theme, colorList);
if (!/^#[A-F\d]{6}$/i.test(theme)) {
theme = themeColor?.['@brand-color'] || '#0052D9';
const themIdx = defaultLightColor.indexOf(theme.toLocaleLowerCase());
const defaultGradients = !isDarkMode ? defaultLightColor : defaultDarkColor;
const spliceThemeList = defaultGradients.slice(0, themIdx);
themeColorList = defaultGradients.slice(themIdx, defaultGradients.length).concat(spliceThemeList);
} else {
theme = themeColor?.['@brand-color'];
themeColorList = Color.getRandomPalette({
color: theme,
colorGamut: 'bright',
number: 8,
});
}
return themeColorList;
}
/** 图表颜色 */
export function getChartListColor(): Array<string> {
const settingStore = getSettingStore();
const { brandTheme } = settingStore;
const res = getColorFromTheme(brandTheme);
return res;
}
/**
*
*
* @export
* @param {Array<string>} chartsList
* @param {string} theme
*/
export function changeChartsTheme(chartsList: echarts.EChartsType[]) {
if (chartsList && chartsList.length) {
const chartChangeColor = getChartListColor();
for (let index = 0; index < chartsList.length; index++) {
const elementChart = chartsList[index];
if (elementChart) {
const optionVal = elementChart.getOption();
// 更改主题颜色
optionVal.color = chartChangeColor;
elementChart.setOption(optionVal, true);
}
}
}
}