mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-12-23 16:53:06 +08:00
refactor: adjust chart code dir
This commit is contained in:
Uyarn
PY
parent
09c6b17b7e
commit
2a6bfa082c
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -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';
|
||||||
|
|
||||||
|
|
|
||||||
268
src/pages/dashboard/detail/index.ts
Normal file
268
src/pages/dashboard/detail/index.ts
Normal 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,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -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';
|
||||||
|
|
|
||||||
215
src/pages/detail/deploy/index.ts
Normal file
215
src/pages/detail/deploy/index.ts
Normal 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];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -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
157
src/pages/user/index.ts
Normal 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,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -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
40
src/utils/charts.ts
Normal 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
72
src/utils/color.ts
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user