股票k线图信息
This commit is contained in:
commit
a42e22161e
30
.gitignore
vendored
Normal file
30
.gitignore
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
33
README.md
Normal file
33
README.md
Normal file
@ -0,0 +1,33 @@
|
||||
# asideviewts
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||
|
||||
## Type Support for `.vue` Imports in TS
|
||||
|
||||
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vite.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Type-Check, Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
1
env.d.ts
vendored
Normal file
1
env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
20
index.html
Normal file
20
index.html
Normal file
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
<style>
|
||||
body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
3513
package-lock.json
generated
Normal file
3513
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
package.json
Normal file
32
package.json
Normal file
@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "asideviewts",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "run-p type-check \"build-only {@}\" --",
|
||||
"preview": "vite preview",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --build"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.7.9",
|
||||
"echarts": "^5.6.0",
|
||||
"element-plus": "^2.9.1",
|
||||
"pinia": "^2.3.1",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/node22": "^22.0.0",
|
||||
"@types/node": "^22.10.2",
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"@vue/tsconfig": "^0.7.0",
|
||||
"npm-run-all2": "^7.0.2",
|
||||
"typescript": "~5.6.3",
|
||||
"vite": "^6.0.5",
|
||||
"vite-plugin-vue-devtools": "^7.6.8",
|
||||
"vue-tsc": "^2.1.10"
|
||||
}
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
9
src/App.vue
Normal file
9
src/App.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import { RouterView } from 'vue-router'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
101
src/assets/base.css
Normal file
101
src/assets/base.css
Normal file
@ -0,0 +1,101 @@
|
||||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
--vt-c-white: #ffffff;
|
||||
--vt-c-white-soft: #f8f8f8;
|
||||
--vt-c-white-mute: #f2f2f2;
|
||||
|
||||
--vt-c-black: #181818;
|
||||
--vt-c-black-soft: #222222;
|
||||
--vt-c-black-mute: #282828;
|
||||
|
||||
--vt-c-indigo: #2c3e50;
|
||||
|
||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||
|
||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||
--vt-c-text-dark-1: var(--vt-c-white);
|
||||
--vt-c-text-dark-2: rgb(168, 168, 168);
|
||||
|
||||
|
||||
--my-common-bgc-1:#fff;
|
||||
--my-common-bgc-2:#1F1F1F;
|
||||
--my-common-fc-1:#fff;
|
||||
--my-common-fc-2:#000;
|
||||
|
||||
--my-light-bgc-1: #ffffff;
|
||||
--my-light-bgc-2: #000000;
|
||||
|
||||
--my-light-br-1: #e7ebf3;
|
||||
--my-light-br-2: #ffffff;
|
||||
|
||||
--my-light-fc-1: #414040;
|
||||
--my-light-fc-2: #414040;
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
/* :root {
|
||||
--color-background: var(--vt-c-white);
|
||||
--color-background-soft: var(--vt-c-white-soft);
|
||||
--color-background-mute: var(--vt-c-white-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-light-2);
|
||||
--color-border-hover: var(--vt-c-divider-light-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-light-1);
|
||||
--color-text: var(--vt-c-text-light-1);
|
||||
|
||||
--section-gap: 160px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--vt-c-black);
|
||||
--color-background-soft: var(--vt-c-black-soft);
|
||||
--color-background-mute: var(--vt-c-black-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-dark-2);
|
||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
--color-text: var(--vt-c-text-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition:
|
||||
color 0.5s,
|
||||
background-color 0.5s;
|
||||
line-height: 1.6;
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
'Fira Sans',
|
||||
'Droid Sans',
|
||||
'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-size: 15px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
} */
|
||||
1
src/assets/logo.svg
Normal file
1
src/assets/logo.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
After Width: | Height: | Size: 276 B |
35
src/assets/main.css
Normal file
35
src/assets/main.css
Normal file
@ -0,0 +1,35 @@
|
||||
@import './base.css';
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a,
|
||||
.green {
|
||||
text-decoration: none;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
transition: 0.4s;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
840
src/end/DayDesign.vue
Normal file
840
src/end/DayDesign.vue
Normal file
@ -0,0 +1,840 @@
|
||||
<script setup>
|
||||
import { onMounted, inject, ref, nextTick, onUnmounted, onBeforeUnmount } from 'vue'
|
||||
|
||||
// 引入pinia
|
||||
import useEcharts from '@/store/usethemestore'
|
||||
const echartsState = useEcharts()
|
||||
echartsState.optionConfigData()
|
||||
|
||||
//引入echarts
|
||||
let echarts = inject('echarts')
|
||||
|
||||
// 外层盒子容器，为了计算图形在内部的高度分配问题
|
||||
const chartsInfo = ref(null)
|
||||
// K线图的容器
|
||||
const mKline = ref(null)
|
||||
|
||||
// 存储各个图形所分配的高度信息
|
||||
let heightList = ref([])
|
||||
// 计算高度、设置高度
|
||||
const dynamicsHeight = () => {
|
||||
// 高度
|
||||
let domHeightList = chartsInfo.value.offsetHeight
|
||||
// 判断是否进行了底部选项的点击事件，如果点击了则会往数组中添加信息，则长度就会改变
|
||||
|
||||
if (clicklist.value.length) {
|
||||
// 先清空数组，避免
|
||||
heightList.value = []
|
||||
// 将处理过后的数据加入数组
|
||||
heightList.value.push(domHeightList * (1 - clicklist.value.length * 0.15))
|
||||
// 设置最上面K线图的高度
|
||||
mKline.value.style.height = `${heightList.value[0]}px`
|
||||
// 设置新添加图表的高度
|
||||
heightList.value.push(domHeightList * 0.15)
|
||||
|
||||
console.log(heightList.value)
|
||||
} else {
|
||||
// 先清空数组，避免之前的数据没有被清空
|
||||
heightList.value = []
|
||||
|
||||
// 设置只有K线图的高度的父容器的全部大小
|
||||
mKline.value.style.height = `${domHeightList}px`
|
||||
}
|
||||
}
|
||||
|
||||
// 定义图表配置数组
|
||||
let chartConfigs = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: 'MAVOL',
|
||||
attId: 'charts1',
|
||||
status: false,
|
||||
options: {
|
||||
tooltip: {
|
||||
trigger: 'axis', // 触发类型为坐标轴
|
||||
axisPointer: {
|
||||
// 坐标轴指示器
|
||||
type: 'cross', // 类型为交叉
|
||||
label: {
|
||||
backgroundColor: '#6a7985', // 标签背景色
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
xAxisIndex: [0, 0],
|
||||
start: 20,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Email',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},
|
||||
{
|
||||
name: 'Union Ads',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
},
|
||||
{
|
||||
name: 'Video Ads',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
{
|
||||
name: 'Direct',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [320, 332, 301, 334, 390, 330, 320],
|
||||
},
|
||||
{
|
||||
name: 'Search Engine',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'VOL',
|
||||
attId: 'charts2',
|
||||
status: false,
|
||||
options: {
|
||||
// title: {
|
||||
// text: 'Stacked Area Chart',
|
||||
// },
|
||||
// tooltip: {
|
||||
// trigger: 'axis',
|
||||
// axisPointer: {
|
||||
// type: 'cross',
|
||||
// label: {
|
||||
// backgroundColor: '#6a7985',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// legend: {
|
||||
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
|
||||
// },
|
||||
// toolbox: {
|
||||
// feature: {
|
||||
// saveAsImage: {},
|
||||
// },
|
||||
// },
|
||||
// grid: {
|
||||
// left: '3%',
|
||||
// right: '4%',
|
||||
// bottom: '3%',
|
||||
// containLabel: true,
|
||||
// },
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
xAxisIndex: [0, 0],
|
||||
start: 20,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Email',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},
|
||||
{
|
||||
name: 'Union Ads',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
},
|
||||
{
|
||||
name: 'Video Ads',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
{
|
||||
name: 'Direct',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: [320, 332, 301, 334, 390, 330, 320],
|
||||
},
|
||||
{
|
||||
name: 'Search Engine',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
},
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'MACD',
|
||||
attId: 'charts3',
|
||||
status: false,
|
||||
options:{
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
xAxisIndex: [0, 0],
|
||||
start: 20,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'KDJ',
|
||||
attId: 'charts4',
|
||||
status: false,
|
||||
options:{
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
xAxisIndex: [0, 0],
|
||||
start: 20,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'RSI',
|
||||
attId: 'charts5',
|
||||
status: false,
|
||||
options:{
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
xAxisIndex: [0, 0],
|
||||
start: 20,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
])
|
||||
|
||||
// 储存点击底部选项的状态的数据
|
||||
const clicklist = ref([])
|
||||
|
||||
// 处理点击事件并添加图表
|
||||
const addChart = (item) => {
|
||||
// 判断当前点击的图表的状态，如果已经存在则不进行操作
|
||||
if (clicklist.value.includes(item.name)) {
|
||||
// 移除图表
|
||||
echarts.dispose(item.name)
|
||||
// 先移除当前的图表信息
|
||||
clicklist.value = clicklist.value.filter((content) => content !== item.name)
|
||||
// 遍历数组，找到对应名称的图表并设置状态为false
|
||||
chartConfigs.value.forEach((element) => {
|
||||
if (element.name == item.name) {
|
||||
element.status = false
|
||||
}
|
||||
})
|
||||
// 调用高度计算函数，重新分配高度
|
||||
dynamicsHeight()
|
||||
// 延迟执行，确保图表已经创建
|
||||
nextTick(() => {
|
||||
chartConfigs.value.forEach((element) => {
|
||||
if (element.name == item.name) {
|
||||
element.status = false
|
||||
// 调用configecharts函数，刷新图表，防止图形重叠
|
||||
configecharts()
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
// 往数组里面添加参数信息
|
||||
clicklist.value.push(item.name)
|
||||
// 遍历数组，找到对应名称的图表并设置状态为true
|
||||
chartConfigs.value.forEach((element) => {
|
||||
if (element.name == item.name) {
|
||||
element.status = true
|
||||
}
|
||||
})
|
||||
// 调用高度计算函数，重新分配高度
|
||||
dynamicsHeight()
|
||||
// 延迟执行，确保图表已经创建
|
||||
nextTick(() => {
|
||||
chartConfigs.value.forEach((element) => {
|
||||
if (element.name == item.name) {
|
||||
element.status = true
|
||||
// 调用configecharts函数，刷新图表，防止图形重叠
|
||||
configecharts()
|
||||
// 调用commonecharts函数，会根据传入的参数进行图表的绘制
|
||||
commonecharts(item.attId, item.options)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const upColor = '#ec0000';
|
||||
const upBorderColor = '#8A0000';
|
||||
const downColor = '#00da3c';
|
||||
const downBorderColor = '#008F28';
|
||||
// Each item: open，close，lowest，highest
|
||||
const data0 = splitData([
|
||||
['2013/1/24', 2320.26, 2320.26, 2287.3, 2362.94],
|
||||
['2013/1/25', 2300, 2291.3, 2288.26, 2308.38],
|
||||
['2013/1/28', 2295.35, 2346.5, 2295.35, 2346.92],
|
||||
['2013/1/29', 2347.22, 2358.98, 2337.35, 2363.8],
|
||||
['2013/1/30', 2360.75, 2382.48, 2347.89, 2383.76],
|
||||
['2013/1/31', 2383.43, 2385.42, 2371.23, 2391.82],
|
||||
['2013/2/1', 2377.41, 2419.02, 2369.57, 2421.15],
|
||||
['2013/2/4', 2425.92, 2428.15, 2417.58, 2440.38],
|
||||
['2013/2/5', 2411, 2433.13, 2403.3, 2437.42],
|
||||
['2013/2/6', 2432.68, 2434.48, 2427.7, 2441.73],
|
||||
['2013/2/7', 2430.69, 2418.53, 2394.22, 2433.89],
|
||||
['2013/2/8', 2416.62, 2432.4, 2414.4, 2443.03],
|
||||
['2013/2/18', 2441.91, 2421.56, 2415.43, 2444.8],
|
||||
['2013/2/19', 2420.26, 2382.91, 2373.53, 2427.07],
|
||||
['2013/2/20', 2383.49, 2397.18, 2370.61, 2397.94],
|
||||
['2013/2/21', 2378.82, 2325.95, 2309.17, 2378.82],
|
||||
['2013/2/22', 2322.94, 2314.16, 2308.76, 2330.88],
|
||||
['2013/2/25', 2320.62, 2325.82, 2315.01, 2338.78],
|
||||
['2013/2/26', 2313.74, 2293.34, 2289.89, 2340.71],
|
||||
['2013/2/27', 2297.77, 2313.22, 2292.03, 2324.63],
|
||||
['2013/2/28', 2322.32, 2365.59, 2308.92, 2366.16],
|
||||
['2013/3/1', 2364.54, 2359.51, 2330.86, 2369.65],
|
||||
['2013/3/4', 2332.08, 2273.4, 2259.25, 2333.54],
|
||||
['2013/3/5', 2274.81, 2326.31, 2270.1, 2328.14],
|
||||
['2013/3/6', 2333.61, 2347.18, 2321.6, 2351.44],
|
||||
['2013/3/7', 2340.44, 2324.29, 2304.27, 2352.02],
|
||||
['2013/3/8', 2326.42, 2318.61, 2314.59, 2333.67],
|
||||
['2013/3/11', 2314.68, 2310.59, 2296.58, 2320.96],
|
||||
['2013/3/12', 2309.16, 2286.6, 2264.83, 2333.29],
|
||||
['2013/3/13', 2282.17, 2263.97, 2253.25, 2286.33],
|
||||
['2013/3/14', 2255.77, 2270.28, 2253.31, 2276.22],
|
||||
['2013/3/15', 2269.31, 2278.4, 2250, 2312.08],
|
||||
['2013/3/18', 2267.29, 2240.02, 2239.21, 2276.05],
|
||||
['2013/3/19', 2244.26, 2257.43, 2232.02, 2261.31],
|
||||
['2013/3/20', 2257.74, 2317.37, 2257.42, 2317.86],
|
||||
['2013/3/21', 2318.21, 2324.24, 2311.6, 2330.81],
|
||||
['2013/3/22', 2321.4, 2328.28, 2314.97, 2332],
|
||||
['2013/3/25', 2334.74, 2326.72, 2319.91, 2344.89],
|
||||
['2013/3/26', 2318.58, 2297.67, 2281.12, 2319.99],
|
||||
['2013/3/27', 2299.38, 2301.26, 2289, 2323.48],
|
||||
['2013/3/28', 2273.55, 2236.3, 2232.91, 2273.55],
|
||||
['2013/3/29', 2238.49, 2236.62, 2228.81, 2246.87],
|
||||
['2013/4/1', 2229.46, 2234.4, 2227.31, 2243.95],
|
||||
['2013/4/2', 2234.9, 2227.74, 2220.44, 2253.42],
|
||||
['2013/4/3', 2232.69, 2225.29, 2217.25, 2241.34],
|
||||
['2013/4/8', 2196.24, 2211.59, 2180.67, 2212.59],
|
||||
['2013/4/9', 2215.47, 2225.77, 2215.47, 2234.73],
|
||||
['2013/4/10', 2224.93, 2226.13, 2212.56, 2233.04],
|
||||
['2013/4/11', 2236.98, 2219.55, 2217.26, 2242.48],
|
||||
['2013/4/12', 2218.09, 2206.78, 2204.44, 2226.26],
|
||||
['2013/4/15', 2199.91, 2181.94, 2177.39, 2204.99],
|
||||
['2013/4/16', 2169.63, 2194.85, 2165.78, 2196.43],
|
||||
['2013/4/17', 2195.03, 2193.8, 2178.47, 2197.51],
|
||||
['2013/4/18', 2181.82, 2197.6, 2175.44, 2206.03],
|
||||
['2013/4/19', 2201.12, 2244.64, 2200.58, 2250.11],
|
||||
['2013/4/22', 2236.4, 2242.17, 2232.26, 2245.12],
|
||||
['2013/4/23', 2242.62, 2184.54, 2182.81, 2242.62],
|
||||
['2013/4/24', 2187.35, 2218.32, 2184.11, 2226.12],
|
||||
['2013/4/25', 2213.19, 2199.31, 2191.85, 2224.63],
|
||||
['2013/4/26', 2203.89, 2177.91, 2173.86, 2210.58],
|
||||
['2013/5/2', 2170.78, 2174.12, 2161.14, 2179.65],
|
||||
['2013/5/3', 2179.05, 2205.5, 2179.05, 2222.81],
|
||||
['2013/5/6', 2212.5, 2231.17, 2212.5, 2236.07],
|
||||
['2013/5/7', 2227.86, 2235.57, 2219.44, 2240.26],
|
||||
['2013/5/8', 2242.39, 2246.3, 2235.42, 2255.21],
|
||||
['2013/5/9', 2246.96, 2232.97, 2221.38, 2247.86],
|
||||
['2013/5/10', 2228.82, 2246.83, 2225.81, 2247.67],
|
||||
['2013/5/13', 2247.68, 2241.92, 2231.36, 2250.85],
|
||||
['2013/5/14', 2238.9, 2217.01, 2205.87, 2239.93],
|
||||
['2013/5/15', 2217.09, 2224.8, 2213.58, 2225.19],
|
||||
['2013/5/16', 2221.34, 2251.81, 2210.77, 2252.87],
|
||||
['2013/5/17', 2249.81, 2282.87, 2248.41, 2288.09],
|
||||
['2013/5/20', 2286.33, 2299.99, 2281.9, 2309.39],
|
||||
['2013/5/21', 2297.11, 2305.11, 2290.12, 2305.3],
|
||||
['2013/5/22', 2303.75, 2302.4, 2292.43, 2314.18],
|
||||
['2013/5/23', 2293.81, 2275.67, 2274.1, 2304.95],
|
||||
['2013/5/24', 2281.45, 2288.53, 2270.25, 2292.59],
|
||||
['2013/5/27', 2286.66, 2293.08, 2283.94, 2301.7],
|
||||
['2013/5/28', 2293.4, 2321.32, 2281.47, 2322.1],
|
||||
['2013/5/29', 2323.54, 2324.02, 2321.17, 2334.33],
|
||||
['2013/5/30', 2316.25, 2317.75, 2310.49, 2325.72],
|
||||
['2013/5/31', 2320.74, 2300.59, 2299.37, 2325.53],
|
||||
['2013/6/3', 2300.21, 2299.25, 2294.11, 2313.43],
|
||||
['2013/6/4', 2297.1, 2272.42, 2264.76, 2297.1],
|
||||
['2013/6/5', 2270.71, 2270.93, 2260.87, 2276.86],
|
||||
['2013/6/6', 2264.43, 2242.11, 2240.07, 2266.69],
|
||||
['2013/6/7', 2242.26, 2210.9, 2205.07, 2250.63],
|
||||
['2013/6/13', 2190.1, 2148.35, 2126.22, 2190.1]
|
||||
]);
|
||||
function splitData(rawData) {
|
||||
const categoryData = [];
|
||||
const values = [];
|
||||
for (var i = 0; i < rawData.length; i++) {
|
||||
categoryData.push(rawData[i].splice(0, 1)[0]);
|
||||
values.push(rawData[i]);
|
||||
}
|
||||
return {
|
||||
categoryData: categoryData,
|
||||
values: values
|
||||
};
|
||||
}
|
||||
function calculateMA(dayCount) {
|
||||
var result = [];
|
||||
for (var i = 0, len = data0.values.length; i < len; i++) {
|
||||
if (i < dayCount) {
|
||||
result.push('-');
|
||||
continue;
|
||||
}
|
||||
var sum = 0;
|
||||
for (var j = 0; j < dayCount; j++) {
|
||||
sum += +data0.values[i - j][1];
|
||||
}
|
||||
result.push(sum / dayCount);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 绘制初始的Echarts图表，始终会在页面中。并返回当前图表的实例化信息，便于使用echarts.connect()进行连接
|
||||
const configecharts = (options = {}) => {
|
||||
// 先将容器中的_echarts_instance_清除，不处理会导致高度变化了但图表不刷新
|
||||
document.getElementById('main').removeAttribute('_echarts_instance_')
|
||||
// 初始化k线图图表
|
||||
let chartBox = echarts.init(document.getElementById('main'))
|
||||
// 直接使用pinia中储存的option数据
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
|
||||
},
|
||||
grid: [{
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '5%',
|
||||
}],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: data0.categoryData,
|
||||
boundaryGap: false,
|
||||
axisLine: { onZero: false },
|
||||
splitLine: { show: false },
|
||||
min: 'dataMin',
|
||||
max: 'dataMax'
|
||||
},
|
||||
yAxis: {
|
||||
scale: true,
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 50,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
type: 'slider',
|
||||
top: '90%',
|
||||
start: 50,
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '日K',
|
||||
type: 'candlestick',
|
||||
data: data0.values,
|
||||
itemStyle: {
|
||||
color: upColor,
|
||||
color0: downColor,
|
||||
borderColor: upBorderColor,
|
||||
borderColor0: downBorderColor
|
||||
},
|
||||
markPoint: {
|
||||
label: {
|
||||
formatter: function (param) {
|
||||
return param != null ? Math.round(param.value) + '' : '';
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: 'Mark',
|
||||
coord: ['2013/5/31', 2300],
|
||||
value: 2300,
|
||||
itemStyle: {
|
||||
color: 'rgb(41,60,85)'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'highest value',
|
||||
type: 'max',
|
||||
valueDim: 'highest'
|
||||
},
|
||||
{
|
||||
name: 'lowest value',
|
||||
type: 'min',
|
||||
valueDim: 'lowest'
|
||||
},
|
||||
{
|
||||
name: 'average value on close',
|
||||
type: 'average',
|
||||
valueDim: 'close'
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
formatter: function (param) {
|
||||
return param.name + '<br>' + (param.data.coord || '');
|
||||
}
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
symbol: ['none', 'none'],
|
||||
data: [
|
||||
[
|
||||
{
|
||||
name: 'from lowest to highest',
|
||||
type: 'min',
|
||||
valueDim: 'lowest',
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'max',
|
||||
valueDim: 'highest',
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
{
|
||||
name: 'min line on close',
|
||||
type: 'min',
|
||||
valueDim: 'close'
|
||||
},
|
||||
{
|
||||
name: 'max line on close',
|
||||
type: 'max',
|
||||
valueDim: 'close'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'MA5',
|
||||
type: 'line',
|
||||
data: calculateMA(5),
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
opacity: 0.5
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'MA10',
|
||||
type: 'line',
|
||||
data: calculateMA(10),
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
opacity: 0.5
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'MA20',
|
||||
type: 'line',
|
||||
data: calculateMA(20),
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
opacity: 0.5
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'MA30',
|
||||
type: 'line',
|
||||
data: calculateMA(30),
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
// 配置图表数据信息
|
||||
chartBox.setOption(option)
|
||||
|
||||
// mergeOptions方法可以合并两个对象，并返回合并后的对象。
|
||||
// 更新信息，可有可无?，调用时配置
|
||||
chartBox.setOption(options)
|
||||
|
||||
// 图表的分组，用于联动
|
||||
chartBox.group = 'group1'
|
||||
// 根据页面大小自动响应图表大小
|
||||
window.addEventListener('resize', function () {
|
||||
chartBox.resize()
|
||||
})
|
||||
return chartBox
|
||||
}
|
||||
|
||||
//绘制一个点击事件传参的Echarts图表。并返回当前图表的实例化信息，便于使用echarts.connect()进行连接
|
||||
const commonecharts = (containerId, options = {}) => {
|
||||
// 先将容器中的_echarts_instance_清除，不处理会导致高度变化了但图表不刷新
|
||||
document.getElementById(containerId).removeAttribute('_echarts_instance_')
|
||||
// 初始化图表
|
||||
const chart = echarts.init(document.getElementById(containerId))
|
||||
// 图表的配置信息
|
||||
const option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '20%',
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
// 设置图表实例的配置项
|
||||
chart.setOption(option)
|
||||
// mergeOptions方法可以合并两个对象，并返回合并后的对象。
|
||||
chart.setOption(options)
|
||||
|
||||
// 图表的分组，用于联动
|
||||
chart.group = 'group1'
|
||||
// 根据页面大小自动响应图表大小
|
||||
window.addEventListener('resize', function () {
|
||||
chartBox2.resize()
|
||||
})
|
||||
return chart
|
||||
}
|
||||
// 连接所有图表
|
||||
echarts.connect('group1')
|
||||
|
||||
onMounted(() => {
|
||||
dynamicsHeight()
|
||||
configecharts()
|
||||
})
|
||||
onBeforeUnmount(()=>{
|
||||
echarts.disconnect()
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="chartsinfo" ref="chartsInfo">
|
||||
<!-- K线图 -->
|
||||
<div
|
||||
id="main"
|
||||
ref="mKline"
|
||||
class="flex-item"
|
||||
:style="{ height: `${heightList[0]}px` }"
|
||||
></div>
|
||||
|
||||
<div
|
||||
v-if="chartConfigs[0].status"
|
||||
id="charts1"
|
||||
ref="charts1"
|
||||
:style="{ height: `${heightList[1]}px` }"
|
||||
></div>
|
||||
<div
|
||||
v-if="chartConfigs[1].status"
|
||||
id="charts2"
|
||||
ref="charts2"
|
||||
:style="{ height: `${heightList[1]}px` }"
|
||||
></div>
|
||||
<div
|
||||
v-if="chartConfigs[2].status"
|
||||
id="charts3"
|
||||
ref="charts3"
|
||||
:style="{ height: `${heightList[1]}px` }"
|
||||
></div>
|
||||
<div
|
||||
v-if="chartConfigs[3].status"
|
||||
id="charts4"
|
||||
ref="charts4"
|
||||
:style="{ height: `${heightList[1]}px` }"
|
||||
></div>
|
||||
<div
|
||||
v-if="chartConfigs[4].status"
|
||||
id="charts5"
|
||||
ref="charts5"
|
||||
:style="{ height: `${heightList[1]}px` }"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- 底部的各个图表选项信息 -->
|
||||
<ul class="typelist">
|
||||
<li
|
||||
v-for="(item, index) in chartConfigs"
|
||||
:key="index"
|
||||
@click="addChart(item)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.chartsinfo {
|
||||
height: calc(100vh - 20px);
|
||||
}
|
||||
|
||||
.typelist {
|
||||
margin-top: auto;
|
||||
position: relative;
|
||||
z-index: 99999999;
|
||||
color: #191919;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.typelist > li {
|
||||
padding: 2px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #2d98b9;
|
||||
}
|
||||
</style>
|
||||
957
src/end/EndDesign.vue
Normal file
957
src/end/EndDesign.vue
Normal file
@ -0,0 +1,957 @@
|
||||
<script setup>
|
||||
import {
|
||||
onMounted,
|
||||
inject,
|
||||
ref,
|
||||
nextTick,
|
||||
onBeforeUnmount,
|
||||
} from 'vue'
|
||||
|
||||
import {
|
||||
calculateMA,
|
||||
calculateStdDeviation,
|
||||
calculateMACD,
|
||||
calculateKDJ,
|
||||
calculateRSI,
|
||||
calculateVOL,
|
||||
} from './computedInfo'
|
||||
|
||||
let charts1 = ref(null)
|
||||
let charts2 = ref(null)
|
||||
let charts3 = ref(null)
|
||||
let charts4 = ref(null)
|
||||
|
||||
// 请求后端数据
|
||||
let szdata = ref([])
|
||||
let kdata = ref([])
|
||||
let xdata = ref([])
|
||||
let closedata = ref([])
|
||||
let ma5 = ref()
|
||||
// 标准差
|
||||
let StdDev = ref()
|
||||
let topStdDev = ref()
|
||||
let downStdDev = ref()
|
||||
|
||||
let rsi1 = ref()
|
||||
let rsi2 = ref()
|
||||
let rsi3 = ref()
|
||||
|
||||
let vol = ref()
|
||||
let interval = ref()
|
||||
|
||||
import request from '@/utils/request'
|
||||
let baseURL = 'http://127.0.0.1:8015'
|
||||
const redata = () => {
|
||||
try {
|
||||
request({
|
||||
url: baseURL + '/stock',
|
||||
method: 'get',
|
||||
params: {
|
||||
symbol: 'sz000001',
|
||||
start_date: '2021-01-01',
|
||||
end_date: '2022-12-31',
|
||||
},
|
||||
}).then((res) => {
|
||||
xdata.value = Object.values(res.date)
|
||||
let { open, close, low, high, volume } = res
|
||||
for (let i = 0; i < Object.keys(open).length; i++) {
|
||||
kdata.value.push([open[i], close[i], low[i], high[i]])
|
||||
closedata.value.push(close[i])
|
||||
}
|
||||
|
||||
// 计算5日移动平均线
|
||||
ma5.value = calculateMA(closedata.value, 5)
|
||||
|
||||
StdDev.value = calculateStdDeviation(closedata.value)
|
||||
|
||||
topStdDev.value = closedata.value.map((item) =>
|
||||
parseFloat((item + StdDev.value).toFixed(2))
|
||||
)
|
||||
downStdDev.value = closedata.value.map((item) =>
|
||||
parseFloat((item - StdDev.value).toFixed(2))
|
||||
)
|
||||
|
||||
// MACD数据
|
||||
let { dif, dea, macd } = calculateMACD(closedata.value)
|
||||
|
||||
// 准备数据数组，同时设置颜色
|
||||
macd = macd.map(function (value) {
|
||||
return {
|
||||
value: value,
|
||||
itemStyle: {
|
||||
color: value >= 0 ? '#FF0000' : '#00FF00', // 根据值的正负设置颜色
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
chartConfigs.value[0].options.series[0].data = dif
|
||||
chartConfigs.value[0].options.series[1].data = dea
|
||||
chartConfigs.value[0].options.series[2].data = macd
|
||||
chartConfigs.value[0].options.xAxis.data = xdata.value
|
||||
|
||||
// vol数据
|
||||
vol.value = calculateVOL(close, high, low)
|
||||
chartConfigs.value[1].options.xAxis.data = xdata.value
|
||||
chartConfigs.value[1].options.series[0].data = vol.value
|
||||
|
||||
// KDJ数据
|
||||
let { kValues, dValues, jValues } = calculateKDJ(res)
|
||||
chartConfigs.value[2].options.series[0].data = kValues
|
||||
chartConfigs.value[2].options.series[1].data = dValues
|
||||
chartConfigs.value[2].options.series[2].data = jValues
|
||||
chartConfigs.value[2].options.xAxis.data = xdata.value
|
||||
|
||||
// RSI数据
|
||||
rsi1.value = calculateRSI(closedata.value)
|
||||
rsi2.value = calculateRSI(closedata.value, 12)
|
||||
rsi3.value = calculateRSI(closedata.value, 24)
|
||||
chartConfigs.value[3].options.series[0].data = rsi1.value
|
||||
chartConfigs.value[3].options.series[1].data = rsi2.value
|
||||
chartConfigs.value[3].options.series[2].data = rsi3.value
|
||||
chartConfigs.value[3].options.xAxis.data = xdata.value
|
||||
|
||||
dynamicsHeight()
|
||||
configecharts()
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('请求失败:', err)
|
||||
}
|
||||
}
|
||||
|
||||
//引入echarts
|
||||
let echarts = inject('echarts')
|
||||
|
||||
// 外层盒子容器，为了计算图形在内部的高度分配问题
|
||||
const chartsInfo = ref(null)
|
||||
// K线图的容器
|
||||
const mKline = ref(null)
|
||||
|
||||
// 存储各个图形所分配的高度信息
|
||||
let heightList = ref([])
|
||||
// 计算高度、设置高度
|
||||
const dynamicsHeight = () => {
|
||||
// 高度
|
||||
let domHeightList = chartsInfo.value.offsetHeight
|
||||
// 判断是否进行了底部选项的点击事件，如果点击了则会往数组中添加信息，则长度就会改变
|
||||
|
||||
// if (clicklist.value.length) {
|
||||
// // 先清空数组，避免
|
||||
// heightList.value = []
|
||||
// // 将处理过后的数据加入数组
|
||||
// heightList.value.push(domHeightList * (1 - clicklist.value.length * 0.15))
|
||||
// // 设置最上面K线图的高度
|
||||
// mKline.value.style.height = `${heightList.value[0]}px`
|
||||
// // 设置新添加图表的高度
|
||||
// heightList.value.push(domHeightList * 0.15)
|
||||
|
||||
// console.log(heightList.value)
|
||||
// } else {
|
||||
// // 先清空数组，避免之前的数据没有被清空
|
||||
// heightList.value = []
|
||||
|
||||
// // 设置只有K线图的高度的父容器的全部大小
|
||||
// mKline.value.style.height = `${domHeightList}px`
|
||||
// }
|
||||
|
||||
console.log(chartsInfo.value.children.length)
|
||||
// 子元素长度
|
||||
let childrenLength = chartsInfo.value.children.length
|
||||
|
||||
if (childrenLength) {
|
||||
// 先清空数组，避免
|
||||
heightList.value = []
|
||||
// 将处理过后的数据加入数组
|
||||
heightList.value.push(domHeightList * (1 - childrenLength * 0.15))
|
||||
// 设置最上面K线图的高度
|
||||
mKline.value.style.height = `${heightList.value[0]}px`
|
||||
// 设置新添加图表的高度
|
||||
heightList.value.push(domHeightList * 0.15)
|
||||
|
||||
console.log(heightList.value)
|
||||
} else {
|
||||
// 先清空数组，避免之前的数据没有被清空
|
||||
heightList.value = []
|
||||
|
||||
// 设置只有K线图的高度的父容器的全部大小
|
||||
mKline.value.style.height = `${domHeightList}px`
|
||||
}
|
||||
}
|
||||
|
||||
// 定义图表配置数组
|
||||
let chartConfigs = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: 'MACD',
|
||||
attId: 'charts1',
|
||||
status: false,
|
||||
options: {
|
||||
animation: false,
|
||||
tooltip: {
|
||||
trigger: 'axis', // 触发类型为坐标轴
|
||||
axisPointer: {
|
||||
// 坐标轴指示器
|
||||
type: 'cross', // 类型为交叉
|
||||
label: {
|
||||
backgroundColor: '#6a7985', // 标签背景色
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
},
|
||||
{
|
||||
type: 'slider',
|
||||
show: false,
|
||||
},
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'DIF',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(204,102,0,1)',
|
||||
},
|
||||
},
|
||||
symbol: 'none',
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
name: 'DEA',
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(0,128,255,1)',
|
||||
},
|
||||
},
|
||||
symbol: 'none',
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
name: 'MACD',
|
||||
type: 'bar',
|
||||
barWidth: '1',
|
||||
// symbol: 'none',
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'VOL',
|
||||
attId: 'charts2',
|
||||
status: false,
|
||||
options: {
|
||||
animation: false,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985',
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
},
|
||||
{
|
||||
type: 'slider',
|
||||
show: false,
|
||||
},
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
// splitNumber: 3 ,
|
||||
interval: 10,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'VOL',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'KDJ',
|
||||
attId: 'charts3',
|
||||
status: false,
|
||||
options: {
|
||||
animation: false,
|
||||
tooltip: {
|
||||
trigger: 'axis', // 触发类型为坐标轴
|
||||
axisPointer: {
|
||||
// 坐标轴指示器
|
||||
type: 'cross', // 类型为交叉
|
||||
label: {
|
||||
backgroundColor: '#6a7985', // 标签背景色
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
xAxisIndex: [0, 0],
|
||||
start: 20,
|
||||
end: 100,
|
||||
},
|
||||
{
|
||||
type: 'slider',
|
||||
show: false,
|
||||
},
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'K',
|
||||
type: 'line',
|
||||
data: [],
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
// lineStyle: {
|
||||
// width: 1,
|
||||
// },
|
||||
// areaStyle: {
|
||||
// opacity: 0.5,
|
||||
// },
|
||||
// itemStyle: {
|
||||
// color: 'rgba(0,128,255,1)',
|
||||
// },
|
||||
},
|
||||
{
|
||||
name: 'D',
|
||||
type: 'line',
|
||||
data: [],
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
// lineStyle: {
|
||||
// width: 1,
|
||||
// },
|
||||
// areaStyle: {
|
||||
// opacity: 0.5,
|
||||
// },
|
||||
// itemStyle: {
|
||||
// color: 'rgba(0,128,255,1)',
|
||||
// },
|
||||
},
|
||||
{
|
||||
name: 'J',
|
||||
type: 'line',
|
||||
data: [],
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
// lineStyle: {
|
||||
// width: 1,
|
||||
// },
|
||||
// areaStyle: {
|
||||
// opacity: 0.5,
|
||||
// },
|
||||
// itemStyle: {
|
||||
// color: 'rgba(0,128,255,1)',
|
||||
// },
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'RSI',
|
||||
attId: 'charts4',
|
||||
status: false,
|
||||
options: {
|
||||
animation: false,
|
||||
tooltip: {
|
||||
trigger: 'axis', // 触发类型为坐标轴
|
||||
axisPointer: {
|
||||
// 坐标轴指示器
|
||||
type: 'cross', // 类型为交叉
|
||||
label: {
|
||||
backgroundColor: '#6a7985', // 标签背景色
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
xAxisIndex: [0, 0],
|
||||
start: 20,
|
||||
end: 100,
|
||||
},
|
||||
{
|
||||
type: 'slider',
|
||||
show: false,
|
||||
},
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'rsi1',
|
||||
type: 'line',
|
||||
data: [],
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
// lineStyle: {
|
||||
// width: 1,
|
||||
// },
|
||||
// areaStyle: {
|
||||
// opacity: 0.5,
|
||||
// },
|
||||
// itemStyle: {
|
||||
// color: 'rgba(0,128,255,1)',
|
||||
// },
|
||||
},
|
||||
{
|
||||
name: 'rsi2',
|
||||
type: 'line',
|
||||
data: [],
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
// lineStyle: {
|
||||
// width: 1,
|
||||
// },
|
||||
// areaStyle: {
|
||||
// opacity: 0.5,
|
||||
// },
|
||||
// itemStyle: {
|
||||
// color: 'rgba(0,128,255,1)',
|
||||
// },
|
||||
},
|
||||
{
|
||||
name: 'rsi3',
|
||||
type: 'line',
|
||||
data: [],
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
// lineStyle: {
|
||||
// width: 1,
|
||||
// },
|
||||
// areaStyle: {
|
||||
// opacity: 0.5,
|
||||
// },
|
||||
// itemStyle: {
|
||||
// color: 'rgba(0,128,255,1)',
|
||||
// },
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
// 储存点击底部选项的状态的数据
|
||||
const clicklist = ref([])
|
||||
|
||||
// 处理点击事件并添加图表
|
||||
const addChart = (item) => {
|
||||
// 检查数组中是否已经存在具有相同domId的元素
|
||||
// let domToRemove = chartBoxList.value.find(element => element.domId === item.attId)
|
||||
// if(domToRemove){
|
||||
// domToRemove.chart.dispose()
|
||||
// }
|
||||
|
||||
// let indexToRemove = chartBoxList.value.findIndex(element => element.domId === item.attId)
|
||||
|
||||
// // 如果找到了，移除那个元素
|
||||
// if (indexToRemove !== -1) {
|
||||
// chartBoxList.value.splice(indexToRemove, 1)
|
||||
// }
|
||||
|
||||
// 判断当前点击的图表的状态，如果已经存在则不进行操作
|
||||
if (clicklist.value.includes(item.name)) {
|
||||
// 先移除当前的图表信息
|
||||
// clicklist.value = clicklist.value.filter((content) => content !== item.name)
|
||||
|
||||
// if (item.attId === 'charts1') {
|
||||
// charts1.value.style.display = 'none'
|
||||
// }
|
||||
|
||||
// 调用高度计算函数，重新分配高度
|
||||
dynamicsHeight()
|
||||
// 延迟执行，确保图表已经创建
|
||||
nextTick(() => {
|
||||
chartConfigs.value.forEach((element) => {
|
||||
if (element.name == item.name) {
|
||||
element.status = false
|
||||
|
||||
// 调用configecharts函数，刷新图表，防止图形重叠
|
||||
configecharts()
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
// 往数组里面添加参数信息
|
||||
// clicklist.value.push(item.name)
|
||||
// 遍历数组，找到对应名称的图表并设置状态为true
|
||||
chartConfigs.value.forEach((element) => {
|
||||
if (element.name == item.name) {
|
||||
element.status = true
|
||||
}
|
||||
})
|
||||
|
||||
// 调用高度计算函数，重新分配高度
|
||||
dynamicsHeight()
|
||||
// 延迟执行，确保图表已经创建
|
||||
nextTick(() => {
|
||||
chartConfigs.value.forEach((element) => {
|
||||
if (element.name == item.name) {
|
||||
element.status = true
|
||||
|
||||
// 调用configecharts函数，刷新图表，防止图形重叠
|
||||
configecharts()
|
||||
// 调用commonecharts函数，会根据传入的参数进行图表的绘制
|
||||
// commonecharts(item.attId, item.options)
|
||||
if (!clicklist.value.includes(item.name)) {
|
||||
commonecharts(item.attId, item.options)
|
||||
clicklist.value.push(item.name)
|
||||
}
|
||||
// if (item.attId === 'charts1') {
|
||||
// charts1.value.style.display = 'block'
|
||||
// }
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 绘制初始的Echarts图表，始终会在页面中。并返回当前图表的实例化信息，便于使用echarts.connect()进行连接
|
||||
const configecharts = (options = {}) => {
|
||||
// 先将容器中的_echarts_instance_清除，不处理会导致高度变化了但图表不刷新
|
||||
document.getElementById('main').removeAttribute('_echarts_instance_')
|
||||
// 初始化k线图图表
|
||||
let chartBox = echarts.init(document.getElementById('main'))
|
||||
// 直接使用pinia中储存的option数据
|
||||
const option = {
|
||||
animation: false,
|
||||
tooltip: {
|
||||
trigger: 'axis', // 触发类型为坐标轴
|
||||
axisPointer: {
|
||||
// 坐标轴指示器
|
||||
type: 'cross', // 类型为交叉
|
||||
label: {
|
||||
backgroundColor: '#6a7985', // 标签背景色
|
||||
},
|
||||
animation: false,
|
||||
},
|
||||
// formatter: (params)=> {
|
||||
// let str = '<div style="padding: 3px 12px;width: 161px;background: #FFFFFF;border: 1px solid #DCDFE6;box-shadow:none; opacity: 1;border-radius: 4px;"><span style="color:#606062;font-size: 12px;">' + params[0].axisValue + "</span><br />";
|
||||
// params.forEach((item) => {
|
||||
// str +=
|
||||
// '<span style="color:#f00;font-size: 12px;color: #1D1D20;"><span style="float:left; margin-top:8px; margin-right:5px;border-radius:50%;width:6px;height:6px;background-color:'+item.color+'"></span>' + " " + item.data + "</span>";
|
||||
// });
|
||||
// str += '</div>'
|
||||
// return str;
|
||||
|
||||
// // console.log(params[0]);
|
||||
|
||||
// }
|
||||
},
|
||||
legend: {
|
||||
data: ['KLine', 'MA5', 'BOLL1', 'BOLL2'],
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '5%',
|
||||
},
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: xdata.value,
|
||||
gridIndex: 0,
|
||||
scale: true,
|
||||
boundaryGap: false,
|
||||
axisLine: { onZero: false },
|
||||
splitLine: { show: false },
|
||||
splitNumber: 20,
|
||||
min: 'dataMin',
|
||||
max: 'dataMax',
|
||||
sampling: 'lttb', // 最大程度保证采样后线条的趋势，形状和极值。
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
gridIndex: 0,
|
||||
scale: true,
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'slider',
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'KLine',
|
||||
type: 'candlestick',
|
||||
xAxisIndex: 0,
|
||||
yAxisIndex: 0,
|
||||
data: kdata.value,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#ef232a',
|
||||
color0: '#14b143',
|
||||
borderColor: '#ef232a',
|
||||
borderColor0: '#14b143',
|
||||
},
|
||||
},
|
||||
// markArea: {
|
||||
// silent: true,
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: 'Honeydew',
|
||||
// },
|
||||
// },
|
||||
// data: [],
|
||||
// },
|
||||
// markPoint: {
|
||||
// data: [
|
||||
// { type: 'max', name: '最大值' },
|
||||
// { type: 'min', name: '最小值' },
|
||||
// ],
|
||||
// },
|
||||
// markLine: {
|
||||
// label: {
|
||||
// normal: {
|
||||
// position: 'middle',
|
||||
// textStyle: { color: 'Blue', fontSize: 12 },
|
||||
// },
|
||||
// },
|
||||
// data: [],
|
||||
// symbol: ['circle', 'none'],
|
||||
// },
|
||||
},
|
||||
{
|
||||
name: 'MA5',
|
||||
type: 'line',
|
||||
xAxisIndex: 0,
|
||||
yAxisIndex: 0,
|
||||
data: ma5.value,
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'BOLL1',
|
||||
type: 'line',
|
||||
xAxisIndex: 0,
|
||||
yAxisIndex: 0,
|
||||
data: topStdDev.value,
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0.5,
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
// areaStyle: {
|
||||
// // 线条样式
|
||||
// normal: {
|
||||
// // 右，下，左，上
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
||||
// [
|
||||
// // 渐变色
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: 'rgba(255, 46, 106, 0.21)'
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: 'rgba(255, 46, 106, 0)'
|
||||
// }
|
||||
// ],
|
||||
// false
|
||||
// )
|
||||
// }
|
||||
// }
|
||||
},
|
||||
{
|
||||
name: 'BOLL2',
|
||||
type: 'line',
|
||||
xAxisIndex: 0,
|
||||
yAxisIndex: 0,
|
||||
data: downStdDev.value,
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0.5,
|
||||
color: 'green',
|
||||
},
|
||||
},
|
||||
// areaStyle: {
|
||||
// // 线条样式
|
||||
// normal: {
|
||||
// // 右，下，左，上
|
||||
// color:'white'
|
||||
// }
|
||||
// }
|
||||
},
|
||||
// {
|
||||
// name: '',
|
||||
// type: 'line',
|
||||
// xAxisIndex: 0,
|
||||
// yAxisIndex: 0,
|
||||
// data: ma5.value,
|
||||
// smooth: true,
|
||||
// lineStyle: {
|
||||
// normal: {
|
||||
// opacity: 0.5,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
],
|
||||
}
|
||||
// 配置图表数据信息
|
||||
chartBox.setOption(option)
|
||||
|
||||
// mergeOptions方法可以合并两个对象，并返回合并后的对象。
|
||||
// 更新信息，可有可无?，调用时配置
|
||||
chartBox.setOption(options)
|
||||
|
||||
// 图表的分组，用于联动
|
||||
chartBox.group = 'group1'
|
||||
// 根据页面大小自动响应图表大小
|
||||
window.addEventListener('resize', function () {
|
||||
chartBox.resize()
|
||||
})
|
||||
}
|
||||
|
||||
// chart实例化数组
|
||||
let chartBoxList = ref([])
|
||||
//绘制一个点击事件传参的Echarts图表。并返回当前图表的实例化信息，便于使用echarts.connect()进行连接
|
||||
const commonecharts = (containerId, options = {}) => {
|
||||
// 先将容器中的_echarts_instance_清除，不处理会导致高度变化了但图表不刷新
|
||||
document.getElementById(containerId).removeAttribute('_echarts_instance_')
|
||||
// 初始化图表
|
||||
const chart = echarts.init(document.getElementById(containerId))
|
||||
|
||||
chartBoxList.value.push({
|
||||
chart,
|
||||
chartid: chart.id,
|
||||
domId: containerId,
|
||||
})
|
||||
|
||||
console.log(chartBoxList.value)
|
||||
|
||||
// 图表的配置信息
|
||||
const option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xdata.value,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '20%',
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: [1, 2, 3, 4, 5, 6, 7, 2, 12, 12, 34],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
// 设置图表实例的配置项
|
||||
chart.setOption(option)
|
||||
// mergeOptions方法可以合并两个对象，并返回合并后的对象。
|
||||
chart.setOption(options)
|
||||
|
||||
// 图表的分组，用于联动
|
||||
chart.group = 'group1'
|
||||
|
||||
// 根据页面大小自动响应图表大小
|
||||
window.addEventListener('resize', function () {
|
||||
chart.resize()
|
||||
})
|
||||
|
||||
return chart
|
||||
}
|
||||
// 连接所有图表
|
||||
echarts.connect('group1')
|
||||
|
||||
onMounted(() => {
|
||||
redata()
|
||||
const chart = echarts.init(charts1.value)
|
||||
console.log(chart)
|
||||
|
||||
charts1.value.style.height = `${200}px`
|
||||
|
||||
// 图表的配置信息
|
||||
const option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '20%',
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: [1, 2, 3, 4, 5, 6, 7, 2, 12, 12, 34],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
// 设置图表实例的配置项
|
||||
chart.setOption(option)
|
||||
// mergeOptions方法可以合并两个对象，并返回合并后的对象。
|
||||
// chart.setOption(options)
|
||||
|
||||
// 图表的分组，用于联动
|
||||
chart.group = 'group1'
|
||||
|
||||
// 根据页面大小自动响应图表大小
|
||||
window.addEventListener('resize', function () {
|
||||
chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
// echarts.disconnect()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="chartsinfo" ref="chartsInfo">
|
||||
<!-- K线图 -->
|
||||
<div
|
||||
id="main"
|
||||
ref="mKline"
|
||||
class="flex-item"
|
||||
:style="{ height: `${heightList[0]}px` }"
|
||||
></div>
|
||||
|
||||
<div
|
||||
id="charts1"
|
||||
ref="charts1"
|
||||
:style="{ height: `${heightList[1]}px` }"
|
||||
></div>
|
||||
<!-- <div
|
||||
v-if="chartConfigs[1].status"
|
||||
id="charts2"
|
||||
ref="charts2"
|
||||
:style="{ height: `${heightList[1]}px` }"
|
||||
></div>
|
||||
<div
|
||||
v-if="chartConfigs[2].status"
|
||||
id="charts3"
|
||||
ref="charts3"
|
||||
:style="{ height: `${heightList[1]}px` }"
|
||||
></div>
|
||||
<div
|
||||
v-if="chartConfigs[3].status"
|
||||
id="charts4"
|
||||
ref="charts4"
|
||||
:style="{ height: `${heightList[1]}px` }"
|
||||
></div> -->
|
||||
</div>
|
||||
|
||||
<!-- 底部的各个图表选项信息 -->
|
||||
<ul class="typelist">
|
||||
<li
|
||||
v-for="(item, index) in chartConfigs"
|
||||
:key="index"
|
||||
@click="addChart(item)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.chartsinfo {
|
||||
height: calc(100vh - 20px);
|
||||
}
|
||||
|
||||
.typelist {
|
||||
margin-top: auto;
|
||||
position: relative;
|
||||
z-index: 99999999;
|
||||
width: 100%;
|
||||
color: #191919;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
.typelist > li {
|
||||
padding: 2px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.typelist > li:hover {
|
||||
color: gold;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #2d98b9;
|
||||
}
|
||||
</style>
|
||||
1752
src/end/NewDesign.vue
Normal file
1752
src/end/NewDesign.vue
Normal file
File diff suppressed because it is too large
Load Diff
32
src/end/NodataView.vue
Normal file
32
src/end/NodataView.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<div class="con">
|
||||
<div class="nodata">
|
||||
<div class="text">当前股票没有数据！</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.con {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--my-common-bgc-2);
|
||||
}
|
||||
.nodata {
|
||||
min-height: calc(100vh - 50px);
|
||||
/* height: calc(100vh - 22px); */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.text{
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
/*字体粗细*/
|
||||
-webkit-text-stroke: 1px var(--my-common-fc-1);
|
||||
/*描边*/
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
293
src/end/computedInfo.js
Normal file
293
src/end/computedInfo.js
Normal file
@ -0,0 +1,293 @@
|
||||
// 计算移动平均线MA的函数，接收收盘价格数组和计算所需的天数作为参数
|
||||
export function calculateMA (closingPrices, dayCount) {
|
||||
// 检查数据点的数量是否足够计算移动平均线
|
||||
if (closingPrices.length < dayCount) {
|
||||
return null // 数据不足，返回null
|
||||
}
|
||||
|
||||
let result = []
|
||||
// 从第dayCount个数据点开始计算（因为前dayCount-1个数据点不足以计算一个完整的移动平均线）
|
||||
for (let i = 0; i <= closingPrices.length - dayCount; i++) {
|
||||
let sum = 0
|
||||
// 计算当前窗口内所有价格的总和
|
||||
for (let j = 0; j < dayCount; j++) {
|
||||
sum += closingPrices[i + j]
|
||||
}
|
||||
// 计算并添加移动平均线值到结果数组
|
||||
result.push(sum / dayCount)
|
||||
}
|
||||
result = result.map(item => parseFloat(item.toFixed(2)))
|
||||
return result // 返回计算出的移动平均线值数组
|
||||
}
|
||||
|
||||
// 计算标准差的函数
|
||||
export function calculateStdDeviation (prices) {
|
||||
if (prices.length === 0) {
|
||||
throw new Error("价格数组不能为空")
|
||||
}
|
||||
// 计算平均值
|
||||
const mean = prices.reduce((sum, price) => sum + price, 0) / prices.length
|
||||
|
||||
// 计算每个价格与平均值的差的平方和
|
||||
const varianceSum = prices.reduce((sum, price) => sum + Math.pow(price - mean, 2), 0)
|
||||
|
||||
// 计算方差（样本方差使用N-1作为分母）
|
||||
const variance = varianceSum / (prices.length - 1)
|
||||
|
||||
// 计算标准差（方差的平方根）,取两位小数
|
||||
const stDeviation = parseFloat(Math.sqrt(variance).toFixed(2))
|
||||
|
||||
return stDeviation
|
||||
}
|
||||
|
||||
|
||||
export function calculateEMA (prices, period) {
|
||||
let ema = []
|
||||
let multiplier = 2 / (period + 1)
|
||||
let previousEMA = prices.reduce((sum, price) => sum + price, 0) / period // 初始EMA为前period天的收盘价平均值
|
||||
|
||||
ema.push(previousEMA) // 添加第一个EMA值
|
||||
|
||||
for (let i = period; i < prices.length; i++) {
|
||||
let currentEMA = (prices[i] - previousEMA) * multiplier + previousEMA
|
||||
ema.push(currentEMA)
|
||||
previousEMA = currentEMA
|
||||
}
|
||||
|
||||
// 我们只关心最后一个EMA值（即最新周期的EMA），但这里返回整个EMA数组以便调试
|
||||
return ema
|
||||
}
|
||||
|
||||
|
||||
// 计算DIF的函数，但dif数组长度将受限于价格数组和EMA计算所需的最小长度
|
||||
export function calculateDIF (prices, shortPeriod, longPeriod) {
|
||||
// 确保价格数组足够长以计算所需的EMA
|
||||
if (prices.length < longPeriod + 1) {
|
||||
return [] // 或抛出错误
|
||||
}
|
||||
|
||||
// 计算整个价格数组的EMA，但通常只关注最近的EMA值
|
||||
let shortEMA = calculateEMA(prices, shortPeriod)
|
||||
let longEMA = calculateEMA(prices, longPeriod)
|
||||
|
||||
// DIF数组，从两个EMA数组都有值的起始位置开始计算
|
||||
let dif = []
|
||||
let startIndex = Math.max(shortEMA.length - 1, longEMA.length - 1) - (longPeriod - 1) // 找到两个EMA都能计算的起始索引（可能需要根据实际情况调整）
|
||||
// 注意：这里的startIndex计算可能需要根据实际需求进行调整，因为它依赖于EMA数组的实际可用长度和所需的计算周期。
|
||||
// 下面的循环确保了只有当两个EMA数组在相同索引处都有值时，才计算DIF。
|
||||
for (let i = startIndex; i < Math.min(shortEMA.length, longEMA.length); i++) {
|
||||
dif.push(shortEMA[i] - longEMA[i])
|
||||
}
|
||||
|
||||
// 如果需要，可以在dif数组前面填充null或0，以使其长度与prices相同（但这在金融分析上可能没有意义）
|
||||
// while (dif.length < prices.length) {
|
||||
// dif.unshift(null); // 或0，或其他适当的填充值
|
||||
// }
|
||||
|
||||
return dif // 返回DIF数组，其长度可能小于prices数组
|
||||
}
|
||||
// 计算DEA的函数
|
||||
export function calculateDEA (dif, deaPeriod) {
|
||||
// DEA就是DIF的EMA，所以直接使用calculateEMA函数计算DIF数组的EMA
|
||||
return calculateEMA(dif, deaPeriod)
|
||||
}
|
||||
|
||||
// MACD指标的计算函数
|
||||
export function calculateMACD (
|
||||
prices,
|
||||
shortPeriod = 12,
|
||||
longPeriod = 26,
|
||||
deaPeriod = 9
|
||||
) {
|
||||
function calculateEMA (prices, period) {
|
||||
let ema = []
|
||||
let multiplier = 2 / (period + 1)
|
||||
let sum = 0
|
||||
for (let i = 0; i < period; i++) {
|
||||
sum += prices[i]
|
||||
}
|
||||
let previousEMA = sum / period
|
||||
ema.push(previousEMA)
|
||||
for (let i = period; i < prices.length; i++) {
|
||||
let currentEMA = (prices[i] - previousEMA) * multiplier + previousEMA
|
||||
ema.push(currentEMA)
|
||||
previousEMA = currentEMA
|
||||
}
|
||||
return ema
|
||||
}
|
||||
|
||||
let shortEMA = calculateEMA(prices, shortPeriod)
|
||||
let longEMA = calculateEMA(prices, longPeriod)
|
||||
let dif = []
|
||||
for (let i = 0; i < Math.min(shortEMA.length, longEMA.length); i++) {
|
||||
dif.push(shortEMA[i] - longEMA[i])
|
||||
}
|
||||
let dea = calculateEMA(dif, deaPeriod)
|
||||
let macd = []
|
||||
for (let i = 0; i < Math.min(dif.length, dea.length); i++) {
|
||||
macd.push((dif[i] - dea[i]) * 2)
|
||||
}
|
||||
// 将dif, dea, macd中的值保留两位小数
|
||||
dif = dif.map((item) => parseFloat(item.toFixed(2)))
|
||||
dea = dea.map((item) => parseFloat(item.toFixed(2)))
|
||||
macd = macd.map((item) => parseFloat(item.toFixed(2)))
|
||||
return {
|
||||
dif,
|
||||
dea,
|
||||
macd
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// ----------------------------计算KDJ指标的函数----------------------------
|
||||
// 数据整理
|
||||
export function changeShape (res) {
|
||||
// 获取对象的键（这里我们知道键是 'date', 'low', 'high', 'close'，但为了通用性，我们还是获取所有键）
|
||||
const keys = Object.keys(res)
|
||||
|
||||
// 初始化一个空数组来存储结果
|
||||
let result = []
|
||||
|
||||
// 假设所有对象的属性（date, low, high, close）都有相同的索引范围
|
||||
// 这里我们取第一个对象的键集合来确定索引范围（假设它们都有0和1这两个键）
|
||||
const indexRange = Object.keys(res.date) // 或者使用任何其他对象的键集合，因为它们应该有相同的索引
|
||||
|
||||
// 遍历索引范围
|
||||
for (let index of indexRange) {
|
||||
// 将索引转换为数字类型，以便进行数学运算（虽然在这个例子中它们已经是数字字符串）
|
||||
const numIndex = parseInt(index, 10)
|
||||
|
||||
// 收集对应索引的值到一个子数组中
|
||||
const row = [
|
||||
res.date[numIndex],
|
||||
res.low[numIndex],
|
||||
res.high[numIndex],
|
||||
res.close[numIndex]
|
||||
]
|
||||
|
||||
// 将子数组添加到结果数组中
|
||||
result.push(row)
|
||||
}
|
||||
return result
|
||||
}
|
||||
// 计算函数
|
||||
export function calculateKDJ (prices) {
|
||||
|
||||
prices = changeShape(prices)
|
||||
let lows = []
|
||||
let highs = []
|
||||
let closes = []
|
||||
// 提取最低价、最高价、收盘价数组
|
||||
prices.forEach((price) => {
|
||||
lows.push(price[1])
|
||||
highs.push(price[2])
|
||||
closes.push(price[3])
|
||||
})
|
||||
let kValues = []
|
||||
let dValues = []
|
||||
let jValues = []
|
||||
let period = 9 // 默认的计算周期，可以根据实际情况调整
|
||||
for (let i = 0; i < closes.length; i++) {
|
||||
if (i < period - 1) {
|
||||
kValues.push(10)
|
||||
dValues.push(10)
|
||||
jValues.push(10)
|
||||
continue
|
||||
}
|
||||
// 计算RSV值（未成熟随机值）
|
||||
let lowPeriod = Math.min(...lows.slice(i - period + 1, i + 1))
|
||||
let highPeriod = Math.max(...highs.slice(i - period + 1, i + 1))
|
||||
let rsv = ((closes[i] - lowPeriod) / (highPeriod - lowPeriod)) * 100
|
||||
if (i === period - 1) {
|
||||
kValues.push(rsv)
|
||||
dValues.push(rsv)
|
||||
} else {
|
||||
// 计算K值，一般采用加权移动平均的方式，这里简化为前一日K值的2/3加上今日RSV的1/3
|
||||
let k = (2 / 3) * kValues[i - 1] + (1 / 3) * rsv
|
||||
kValues.push(k)
|
||||
// 计算D值，一般是前一日D值的2/3加上今日K值的1/3
|
||||
let d = (2 / 3) * dValues[i - 1] + (1 / 3) * k
|
||||
dValues.push(d)
|
||||
}
|
||||
// 计算J值，一般公式为3*K - 2*D
|
||||
let j = 3 * kValues[i] - 2 * dValues[i]
|
||||
jValues.push(j)
|
||||
}
|
||||
kValues = kValues.map(item => parseFloat(item.toFixed(2)))
|
||||
dValues = dValues.map(item => parseFloat(item.toFixed(2)))
|
||||
jValues = jValues.map(item => parseFloat(item.toFixed(2)))
|
||||
return {
|
||||
kValues,
|
||||
dValues,
|
||||
jValues
|
||||
}
|
||||
}
|
||||
// -------------------------------------------------------------------
|
||||
|
||||
// ----------------------------计算RSI指标的函数----------------------------
|
||||
// RSI 的时间跨度推荐 6、12、24 三个值，6 日近似一周的时间周期，12 日可以看作半个月的时间跨度，而 24 日约为一个月的时间跨度。
|
||||
// 短期 RSI 对于价格的变化情况反应比较灵敏，RSI 的值波动较大;长期 RSI 值反应相对迟钝，其波动相对较小。
|
||||
export function calculateRSI (closePrices, period = 6) {
|
||||
let gains = []
|
||||
let losses = []
|
||||
let rsi = []
|
||||
|
||||
for (let i = 0; i < closePrices.length; i++) {
|
||||
if (i === 0) {
|
||||
gains.push(0)
|
||||
losses.push(0)
|
||||
} else {
|
||||
let diff = closePrices[i] - closePrices[i - 1]
|
||||
if (diff > 0) {
|
||||
gains.push(diff)
|
||||
losses.push(0)
|
||||
} else {
|
||||
gains.push(0)
|
||||
losses.push(Math.abs(diff))
|
||||
}
|
||||
}
|
||||
|
||||
if (i >= period - 1) {
|
||||
let sumGain = 0
|
||||
let sumLoss = 0
|
||||
for (let j = i - (period - 1); j <= i; j++) {
|
||||
sumGain += gains[j]
|
||||
sumLoss += losses[j]
|
||||
}
|
||||
|
||||
let avgGain = sumGain / period
|
||||
let avgLoss = sumLoss / period
|
||||
let rs = avgGain / avgLoss
|
||||
rsi.push(100 - (100 / (1 + rs)))
|
||||
}
|
||||
}
|
||||
rsi = rsi.map(item => parseFloat(item.toFixed(2)))
|
||||
return rsi
|
||||
}
|
||||
|
||||
// ----------------------------计算VOL指标的函数----------------------------
|
||||
|
||||
export function calculateVOL (close, high, low) {
|
||||
let arr = []
|
||||
let volvalues = Object.values(close)
|
||||
let highvalues = Object.values(high)
|
||||
let lowvalues = Object.values(low)
|
||||
|
||||
for (let i = 0; i < volvalues.length; i++) {
|
||||
let change = (highvalues[i] + lowvalues[i]) / 2
|
||||
arr.push({
|
||||
value: volvalues[i],
|
||||
itemStyle: {
|
||||
color: volvalues[i] >= change ? '#FF0000' : '#00FF00' // 根据值的正负设置颜色
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return arr
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
1767
src/endnew/NewStyleDesign.vue
Normal file
1767
src/endnew/NewStyleDesign.vue
Normal file
File diff suppressed because it is too large
Load Diff
32
src/endtype/HourLineWrapper.vue
Normal file
32
src/endtype/HourLineWrapper.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<component :is="currentComponent" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import NewDesign from '@/end/NewDesign.vue';
|
||||
import NewStyleDesign from '@/endnew/NewStyleDesign.vue';
|
||||
import NodataView from '@/end/NodataView.vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
|
||||
const currentComponent = computed(() => {
|
||||
// 根据路由参数动态加载组件
|
||||
if (route.params.type === 'vertical') {
|
||||
return NewDesign;
|
||||
} else if (route.params.type === 'grid') {
|
||||
return NewStyleDesign;
|
||||
}
|
||||
// 默认加载的组件
|
||||
return NewDesign;
|
||||
});
|
||||
|
||||
return {
|
||||
currentComponent
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
24
src/main.ts
Normal file
24
src/main.ts
Normal file
@ -0,0 +1,24 @@
|
||||
import './assets/base.css'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
// 使用 element-plus
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
|
||||
import { createPinia } from "pinia";
|
||||
|
||||
// 引入echarts
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(ElementPlus)
|
||||
app.config.globalProperties.$echarts = echarts
|
||||
|
||||
app.use(router)
|
||||
app.use(createPinia())
|
||||
|
||||
app.mount('#app')
|
||||
63
src/router/index.ts
Normal file
63
src/router/index.ts
Normal file
@ -0,0 +1,63 @@
|
||||
import { createRouter, createWebHashHistory } from 'vue-router';
|
||||
|
||||
// const route = useRoute();
|
||||
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'root',
|
||||
redirect: '/thenew', // 默认重定向到 /thenew
|
||||
component: () => import('@/views/TheNewView.vue'), // 顶级路由组件
|
||||
children: [
|
||||
{
|
||||
path: 'thenew',
|
||||
name: 'thenew',
|
||||
// component: () => import('@/views/HomeView.vue'), // HomeView 是 TheNewView 的子组件
|
||||
redirect: '/thenew/nodata', // 默认重定向到 /thenew/hour-line
|
||||
children: [
|
||||
{
|
||||
path: 'hour-line',
|
||||
name: 'hour-line',
|
||||
component: () => import('@/end/NewDesign.vue') // 嵌套子路由
|
||||
},
|
||||
{
|
||||
path: 'hour-line2',
|
||||
name: 'hour-line2',
|
||||
component: () => import('@/endnew/NewStyleDesign.vue') // 嵌套子路由
|
||||
},
|
||||
{
|
||||
path: 'day-line',
|
||||
name: 'day-line',
|
||||
component: () => import('@/end/NodataView.vue') // 嵌套子路由
|
||||
},
|
||||
{
|
||||
path: 'week-line',
|
||||
name: 'week-line',
|
||||
component: () => import('@/end/NodataView.vue') // 嵌套子路由
|
||||
},
|
||||
{
|
||||
path: 'month-line',
|
||||
name: 'month-line',
|
||||
component: () => import('@/end/NodataView.vue') // 嵌套子路由
|
||||
},
|
||||
{
|
||||
path: 'year-line',
|
||||
name: 'year-line',
|
||||
component: () => import('@/end/NodataView.vue') // 嵌套子路由
|
||||
},
|
||||
{
|
||||
path: 'nodata',
|
||||
name: 'nodata',
|
||||
component: () => import('@/end/NodataView.vue') // 嵌套子路由
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
export default router;
|
||||
5
src/shims-vue.d.ts
vendored
Normal file
5
src/shims-vue.d.ts
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
declare module '*.vue' {
|
||||
import { DefineComponent } from 'vue';
|
||||
const component: DefineComponent<{}, {}, any>;
|
||||
export default component;
|
||||
}
|
||||
5
src/store/index.ts
Normal file
5
src/store/index.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { createPinia } from "pinia";
|
||||
|
||||
const pinia = createPinia()
|
||||
|
||||
export default pinia
|
||||
0
src/store/usestylestore.ts
Normal file
0
src/store/usestylestore.ts
Normal file
30
src/store/usethemestore.ts
Normal file
30
src/store/usethemestore.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
//数组处理
|
||||
|
||||
|
||||
|
||||
const useTheme = defineStore("Theme", {
|
||||
state: () => ({
|
||||
theme: false,
|
||||
fontcolor:'#fff',
|
||||
style:'vertical'
|
||||
}),
|
||||
actions: {
|
||||
toggleFontcolor(){
|
||||
if(this.theme){
|
||||
this.fontcolor = '#000'
|
||||
}else{
|
||||
this.fontcolor = '#fff'
|
||||
}
|
||||
},
|
||||
toggleDarkTheme(){
|
||||
this.theme = false
|
||||
},
|
||||
optionConfigData () {
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default useTheme
|
||||
2
src/uilts/vscode.ts
Normal file
2
src/uilts/vscode.ts
Normal file
@ -0,0 +1,2 @@
|
||||
// @ts-ignore
|
||||
// export const vscode= window.acquireVsCodeApi();
|
||||
37
src/utils/echarts.js
Normal file
37
src/utils/echarts.js
Normal file
@ -0,0 +1,37 @@
|
||||
//这个必须要引入的
|
||||
import * as echarts from "echarts/core";
|
||||
|
||||
/** 引入柱状图and折线图图表，图表后缀都为 Chart*/
|
||||
import { BarChart, LineChart } from "echarts/charts";
|
||||
|
||||
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
DatasetComponent,
|
||||
TransformComponent,
|
||||
} from "echarts/components";
|
||||
|
||||
// 标签自动布局，全局过渡动画等特性
|
||||
import { LabelLayout, UniversalTransition } from "echarts/features";
|
||||
|
||||
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
|
||||
// 注册必须的组件
|
||||
echarts.use([
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
DatasetComponent,
|
||||
TransformComponent,
|
||||
BarChart,
|
||||
LabelLayout,
|
||||
UniversalTransition,
|
||||
CanvasRenderer,
|
||||
LineChart,
|
||||
]);
|
||||
|
||||
// 导出
|
||||
export default echarts;
|
||||
45
src/utils/http.js
Normal file
45
src/utils/http.js
Normal file
@ -0,0 +1,45 @@
|
||||
import axios from 'axios'
|
||||
const request = axios.create({
|
||||
method :"GET",
|
||||
timeout:2000,
|
||||
})
|
||||
// 请求拦截器
|
||||
request.interceptors.request.use(config => {
|
||||
console.log("请求拦截成功")
|
||||
// 例如给后端传递token,config是配置参数
|
||||
//如有需要：注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
|
||||
//const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下
|
||||
//if(token){
|
||||
//config.params = {'token':token} //如果要求携带在参数中
|
||||
//config.headers.token= token; //如果要求携带在请求头中
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
console.log('请求拦截失败')
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
// 响应拦截器
|
||||
request.interceptors.response.use(res => {
|
||||
console.log("响应拦截成功")
|
||||
if (res.status != 200) {
|
||||
return
|
||||
} else {
|
||||
return res
|
||||
}
|
||||
},
|
||||
error => {
|
||||
console.log("响应拦截失败")
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
export default (url, method = "GET", params = {}) => {
|
||||
return request({
|
||||
url,
|
||||
method,
|
||||
params
|
||||
})
|
||||
}
|
||||
// export default request
|
||||
|
||||
|
||||
57
src/utils/request.js
Normal file
57
src/utils/request.js
Normal file
@ -0,0 +1,57 @@
|
||||
// 进行axios的二次封装
|
||||
import axios from "axios";
|
||||
// 第一步：利用axios对象的create方法，去创建axios实例(其他的配置:基础路径，超时的时间)
|
||||
let request=axios.create({
|
||||
// 基础路径
|
||||
baseURL:import.meta.env.VITE_APP_BASE_API,//基础路径上会携带/api
|
||||
timeout:5000//超时的时间的设置
|
||||
});
|
||||
// 第二步:request实例添加请求与响应拦截器
|
||||
request.interceptors.request.use((config)=>{
|
||||
// config配置对象，headers属性请求头，经常给服务器端携带公共参数
|
||||
// 返回配置对象
|
||||
return config
|
||||
})
|
||||
// 第三步：响应拦截器
|
||||
request.interceptors.response.use((response)=>{
|
||||
// 成功回调
|
||||
// 简化数据
|
||||
console.log(response);
|
||||
|
||||
if(response.status==200){
|
||||
return response.data.message
|
||||
}
|
||||
|
||||
|
||||
},(error)=>{
|
||||
|
||||
// 失败回调：处理http网络问题
|
||||
// 定义一个变量：存储网络错误信息
|
||||
console.log(error);
|
||||
|
||||
let message=''
|
||||
// http状态码
|
||||
let status=error.response.status
|
||||
switch(status){
|
||||
case 401:
|
||||
message='TOKEN过期'
|
||||
break;
|
||||
case 403:
|
||||
message ='无权访问'
|
||||
break;
|
||||
case 404:
|
||||
message ='请求地址错误'
|
||||
break;
|
||||
case 500:
|
||||
message ='服务器出现问题'
|
||||
break;
|
||||
default:
|
||||
message='网络出现问题'
|
||||
break
|
||||
}
|
||||
|
||||
return Promise.reject(error)
|
||||
})
|
||||
|
||||
// 对外暴露
|
||||
export default request
|
||||
2
src/utils/vscode.ts
Normal file
2
src/utils/vscode.ts
Normal file
@ -0,0 +1,2 @@
|
||||
// @ts-ignore
|
||||
// export const vscode= window.acquireVsCodeApi();
|
||||
240
src/views/HomeView.vue
Normal file
240
src/views/HomeView.vue
Normal file
@ -0,0 +1,240 @@
|
||||
<script setup>
|
||||
import { onMounted, ref, watch} from 'vue' // 主要
|
||||
import { RouterView, useRouter } from 'vue-router'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
import usethemestore from '../store/usethemestore'
|
||||
const themeStore = usethemestore()
|
||||
const { theme, style } = storeToRefs(themeStore)
|
||||
|
||||
const router = useRouter()
|
||||
let routerViewKey = ref(0) // 用于强制重新渲染 RouterView 的 key
|
||||
|
||||
const props = defineProps({
|
||||
message: {
|
||||
type: String,
|
||||
default: '', // 默认值为空
|
||||
},
|
||||
});
|
||||
|
||||
const lightFunc = () => {
|
||||
theme.value = true
|
||||
document.documentElement.style.setProperty('--my-common-bgc-2', '#fff');
|
||||
document.documentElement.style.setProperty('--my-light-br-1', '#e7ebf3');
|
||||
document.documentElement.style.setProperty('--my-common-bgc-1', '#1F1F1F');
|
||||
document.documentElement.style.setProperty('--my-common-fc-1', '#1F1F1F');
|
||||
|
||||
}
|
||||
const darkFunc = () => {
|
||||
theme.value = false
|
||||
document.documentElement.style.setProperty('--my-common-bgc-2', '#1F1F1F');
|
||||
document.documentElement.style.setProperty('--my-light-br-1', '#ffffff');
|
||||
document.documentElement.style.setProperty('--my-common-bgc-1', '#fff');
|
||||
document.documentElement.style.setProperty('--my-common-fc-1', '#fff');
|
||||
}
|
||||
|
||||
const verticalFunc = () => {
|
||||
style.value = 'vertical'
|
||||
router.push({
|
||||
path: `/thenew/hour-line`,
|
||||
params: { type: 'vertical' },
|
||||
})
|
||||
// routerViewKey.value = routerViewKey.value + 1
|
||||
|
||||
}
|
||||
const gridFunc = () => {
|
||||
style.value = 'grid'
|
||||
router.push({
|
||||
path: `/thenew/hour-line2`,
|
||||
params: { type: 'grid' },
|
||||
})
|
||||
// routerViewKey.value = routerViewKey.value + 1
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
watch(() => props.message, (news,old) => {
|
||||
routerViewKey.value = routerViewKey.value + 1
|
||||
router.push(`/thenew/hour-line`)
|
||||
activeIndex.value = 0
|
||||
})
|
||||
})
|
||||
|
||||
const headerData = ref([
|
||||
'日K',
|
||||
'周K',
|
||||
'月K',
|
||||
'季K',
|
||||
'年K',
|
||||
// '1分',
|
||||
// '3分',
|
||||
// '5分',
|
||||
// '15分',
|
||||
// '30分',
|
||||
// '1小时',
|
||||
// '2小时',
|
||||
// '3小时',
|
||||
// '4小时',
|
||||
])
|
||||
// 模拟路由数据
|
||||
let routerList = [
|
||||
'hour-line',
|
||||
'day-line',
|
||||
'week-line',
|
||||
'month-line',
|
||||
'year-line',
|
||||
]
|
||||
// 定义一个响应式变量来存储当前激活的项的索引
|
||||
const activeIndex = ref(0)
|
||||
// 定义一个处理点击事件的函数
|
||||
function handleClick(index) {
|
||||
// 更新当前激活的项的索引
|
||||
activeIndex.value = index
|
||||
// 跳转路由
|
||||
router.push(`/thenew/${routerList[index]}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<ul class="timelist">
|
||||
<li
|
||||
class="item"
|
||||
v-for="(item, index) in headerData"
|
||||
:key="item"
|
||||
:class="{ active: activeIndex === index }"
|
||||
@click="handleClick(index)"
|
||||
>
|
||||
{{ item }}
|
||||
</li>
|
||||
<li class="item">
|
||||
<el-dropdown :hide-on-click="false">
|
||||
<span class="el-dropdown-link">
|
||||
<div v-if="theme">
|
||||
<svg t="1739345471358" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7366" width="16" height="16"><path d="M85.333333 128h853.333334v768H85.333333V128z m85.333334 85.333333v597.333334h682.666666V384h-341.333333V213.333333H170.666667z" p-id="7367" fill="#2c2c2c"></path></svg>
|
||||
</div>
|
||||
<div v-else>
|
||||
<svg t="1739345471358" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7366" width="16" height="16"><path d="M85.333333 128h853.333334v768H85.333333V128z m85.333334 85.333333v597.333334h682.666666V384h-341.333333V213.333333H170.666667z" p-id="7367" fill="#ffffff"></path></svg>
|
||||
</div>
|
||||
<!-- <svg t="1737685184492" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1032" width="16" height="16"><path d="M831.085714 896h-612.571428V437.028571l-118.857143-118.857142 201.142857-201.142858 10.057143 10.057143c113.371429 113.371429 298.057143 113.371429 412.342857 0l10.057143-10.057143L950.857143 334.628571l-118.857143 118.857143V896z m-585.142857-27.428571h557.714286V441.6l106.971428-106.971429L732.342857 155.428571C610.742857 266.971429 423.314286 266.971429 301.714286 155.428571L138.057143 318.171429l106.971428 106.971428V868.571429z" fill="#2c2c2c" p-id="1033"></path></svg> -->
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<div @click="verticalFunc">
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="light"
|
||||
content="垂直"
|
||||
placement="left"
|
||||
>
|
||||
<svg t="1739337693471" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6034" width="16" height="16"><path d="M85.333333 213.333333h853.333334v597.333334H85.333333V213.333333z m85.333334 85.333334v85.333333h682.666666V298.666667H170.666667z m682.666666 170.666666H170.666667v85.333334h682.666666v-85.333334z m0 170.666667H170.666667v85.333333h682.666666v-85.333333z" p-id="6035" fill="#2c2c2c"></path></svg>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<div @click="gridFunc">
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="light"
|
||||
content="网格"
|
||||
placement="left"
|
||||
>
|
||||
<svg t="1739339260343" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7012" width="14" height="14"><path d="M85.333333 128h853.333334v768H85.333333V128z m85.333334 170.666667v213.333333h298.666666V298.666667H170.666667z m384 0v213.333333h298.666666V298.666667h-298.666666z m298.666666 298.666666h-298.666666v213.333334h298.666666v-213.333334z m-384 213.333334v-213.333334H170.666667v213.333334h298.666666z" p-id="7013" fill="#2c2c2c"></path></svg>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</li>
|
||||
<li class="item">
|
||||
<el-dropdown :hide-on-click="false">
|
||||
<span class="el-dropdown-link">
|
||||
<div v-if="theme">
|
||||
<svg t="1737685184492" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1032" width="16" height="16"><path d="M831.085714 896h-612.571428V437.028571l-118.857143-118.857142 201.142857-201.142858 10.057143 10.057143c113.371429 113.371429 298.057143 113.371429 412.342857 0l10.057143-10.057143L950.857143 334.628571l-118.857143 118.857143V896z m-585.142857-27.428571h557.714286V441.6l106.971428-106.971429L732.342857 155.428571C610.742857 266.971429 423.314286 266.971429 301.714286 155.428571L138.057143 318.171429l106.971428 106.971428V868.571429z" fill="#2c2c2c" p-id="1033"></path></svg>
|
||||
</div>
|
||||
<div v-else>
|
||||
<svg t="1737685184492" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1032" width="16" height="16"><path d="M831.085714 896h-612.571428V437.028571l-118.857143-118.857142 201.142857-201.142858 10.057143 10.057143c113.371429 113.371429 298.057143 113.371429 412.342857 0l10.057143-10.057143L950.857143 334.628571l-118.857143 118.857143V896z m-585.142857-27.428571h557.714286V441.6l106.971428-106.971429L732.342857 155.428571C610.742857 266.971429 423.314286 266.971429 301.714286 155.428571L138.057143 318.171429l106.971428 106.971428V868.571429z" fill="#ffffff" p-id="1033"></path></svg>
|
||||
</div>
|
||||
<!-- <svg t="1737685184492" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1032" width="16" height="16"><path d="M831.085714 896h-612.571428V437.028571l-118.857143-118.857142 201.142857-201.142858 10.057143 10.057143c113.371429 113.371429 298.057143 113.371429 412.342857 0l10.057143-10.057143L950.857143 334.628571l-118.857143 118.857143V896z m-585.142857-27.428571h557.714286V441.6l106.971428-106.971429L732.342857 155.428571C610.742857 266.971429 423.314286 266.971429 301.714286 155.428571L138.057143 318.171429l106.971428 106.971428V868.571429z" fill="#2c2c2c" p-id="1033"></path></svg> -->
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<div @click="lightFunc">
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="light"
|
||||
content="Light"
|
||||
placement="left"
|
||||
>
|
||||
<svg t="1737685432082" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3218" width="16" height="16"><path d="M504.832 144h24.08c6.608 0 11.952 4.48 11.952 9.984v80.208c0 5.504-5.344 9.984-11.952 9.984h-24.08c-6.608 0-11.968-4.48-11.968-9.984V153.984c0-5.52 5.36-9.984 11.968-9.984z m10.304 541.92c96.432 0 174.608-78.176 174.608-174.608 0-96.448-78.176-174.624-174.608-174.624S340.528 414.88 340.528 511.312c0 96.432 78.176 174.608 174.608 174.608z m0 48c-122.944 0-222.608-99.68-222.608-222.608 0-122.944 99.664-222.624 222.608-222.624s222.608 99.68 222.608 222.624c0 122.928-99.68 222.608-222.608 222.608z m-10.24-355.792a9.52 9.52 0 0 1 10.24 9.488v247.2a9.696 9.696 0 0 1-10.448 9.648 133.584 133.584 0 0 1 0.208-266.336z m263.184-135.056l17.024 17.024c4.672 4.672 5.28 11.632 1.376 15.536L729.6 332.512c-3.904 3.904-10.864 3.296-15.52-1.376l-17.04-17.024c-4.672-4.672-5.28-11.632-1.376-15.552l56.88-56.864c3.904-3.92 10.864-3.296 15.52 1.376z m110.528 261.76v24.08c0 6.608-4.48 11.952-9.984 11.952h-80.208c-5.504 0-9.984-5.344-9.984-11.952v-24.08c0-6.608 4.48-11.968 9.984-11.968h80.208c5.52 0 9.984 5.36 9.984 11.968z m-93.504 257.68l-17.024 17.024c-4.672 4.672-11.632 5.28-15.536 1.376l-56.88-56.864c-3.904-3.92-3.296-10.88 1.376-15.536l17.024-17.04c4.672-4.672 11.632-5.28 15.536-1.376l56.88 56.88c3.92 3.904 3.296 10.88-1.376 15.536z m-256.192 116.096h-24.08c-6.608 0-11.968-4.48-11.968-9.984v-80.208c0-5.504 5.36-9.984 11.968-9.984h24.08c6.608 0 11.952 4.48 11.952 9.984v80.208c0 5.52-5.344 9.984-11.952 9.984z m-268.528-100.448l-14.272-14.272a10.016 10.016 0 0 1 0-14.16l56.88-56.88a10.016 10.016 0 0 1 14.16 0l14.272 14.272a10.016 10.016 0 0 1 0 14.176l-56.864 56.864a10.016 10.016 0 0 1-14.176 0zM144 528.912v-24.08c0-6.608 4.48-11.968 9.984-11.968h80.208c5.504 0 9.984 5.36 9.984 11.968v24.08c0 6.608-4.48 11.952-9.984 11.952H153.984c-5.52 0-9.984-5.344-9.984-11.952z m104.64-268.8l17.024-17.04c4.672-4.672 11.632-5.28 15.536-1.376l56.88 56.864c3.904 3.92 3.296 10.88-1.376 15.552l-17.04 17.024c-4.672 4.672-11.616 5.28-15.52 1.376l-56.88-56.88c-3.92-3.904-3.296-10.88 1.36-15.52z" fill="#2c2c2c" p-id="3219"></path></svg>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<div @click="darkFunc">
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="light"
|
||||
content="Dark"
|
||||
placement="left"
|
||||
>
|
||||
<svg t="1737685471806" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3524" width="16" height="16"><path d="M504.832 144h24.08c6.608 0 11.952 4.48 11.952 9.984v80.208c0 5.504-5.344 9.984-11.952 9.984h-24.08c-6.608 0-11.968-4.48-11.968-9.984V153.984c0-5.52 5.36-9.984 11.968-9.984z m263.248 99.072l17.024 17.024c4.672 4.672 5.28 11.632 1.376 15.536L729.6 332.512c-3.904 3.904-10.864 3.296-15.52-1.376l-17.04-17.024c-4.672-4.672-5.28-11.632-1.376-15.552l56.88-56.864c3.904-3.92 10.864-3.296 15.52 1.376z m110.528 261.76v24.08c0 6.608-4.48 11.952-9.984 11.952h-80.208c-5.504 0-9.984-5.344-9.984-11.952v-24.08c0-6.608 4.48-11.968 9.984-11.968h80.208c5.52 0 9.984 5.36 9.984 11.968z m-93.504 257.68l-17.024 17.024c-4.672 4.672-11.632 5.28-15.536 1.376l-56.88-56.864c-3.904-3.92-3.296-10.88 1.376-15.536l17.024-17.04c4.672-4.672 11.632-5.28 15.536-1.376l56.88 56.88c3.92 3.904 3.296 10.88-1.376 15.536z m-256.192 116.096h-24.08c-6.608 0-11.968-4.48-11.968-9.984v-80.208c0-5.504 5.36-9.984 11.968-9.984h24.08c6.608 0 11.952 4.48 11.952 9.984v80.208c0 5.52-5.344 9.984-11.952 9.984z m-268.528-100.448l-14.272-14.272a10.016 10.016 0 0 1 0-14.16l56.88-56.88a10.016 10.016 0 0 1 14.16 0l14.272 14.272a10.016 10.016 0 0 1 0 14.176l-56.864 56.864a10.016 10.016 0 0 1-14.176 0zM144 528.912v-24.08c0-6.608 4.48-11.968 9.984-11.968h80.208c5.504 0 9.984 5.36 9.984 11.968v24.08c0 6.608-4.48 11.952-9.984 11.952H153.984c-5.52 0-9.984-5.344-9.984-11.952z m104.64-268.8l17.024-17.04c4.672-4.672 11.632-5.28 15.536-1.376l56.88 56.864c3.904 3.92 3.296 10.88-1.376 15.552l-17.04 17.024c-4.672 4.672-11.616 5.28-15.52 1.376l-56.88-56.88c-3.92-3.904-3.296-10.88 1.36-15.52zM515.12 685.92c96.432 0 174.608-78.176 174.608-174.608 0-96.448-78.176-174.624-174.608-174.624S340.528 414.88 340.528 511.312c0 96.432 78.176 174.608 174.608 174.608z m0 48c-122.944 0-222.608-99.68-222.608-222.608 0-122.944 99.664-222.624 222.608-222.624s222.608 99.68 222.608 222.624c0 122.928-99.68 222.608-222.608 222.608zM478.288 427.52a82.8 82.8 0 0 0-1.68 16.64c0 43.936 34.32 79.552 76.64 79.552a74.624 74.624 0 0 0 48.544-17.984c4.544-3.872 14.72-2.4 15.392 3.184 0.592 4.848 0.896 9.792 0.896 14.8 0 64.224-50.144 116.272-112 116.272s-112-52.048-112-116.272c0-48.064 28.096-89.312 68.176-107.024 6.976-3.088 17.312 4.576 16.032 10.832z" fill="#2c2c2c" p-id="3525"></path></svg>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="view">
|
||||
<RouterView :key="routerViewKey"></RouterView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
/* width: 100vw; */
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.timelist {
|
||||
/* background-color: white; */
|
||||
background-color: var(--my-common-bgc-2) !important;
|
||||
/* color: #414040; */
|
||||
color: var(--my-common-fc-1);
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
border-bottom: 1px solid rgb(175, 173, 173);
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.timelist > li {
|
||||
padding: 0 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.timelist > li:nth-child(6){
|
||||
margin-left: auto;
|
||||
/* margin-right: 10px; */
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #2d98b9;
|
||||
}
|
||||
|
||||
.view {
|
||||
height: calc(100vh - 27px);
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
</style>
|
||||
1237
src/views/TheNewView.vue
Normal file
1237
src/views/TheNewView.vue
Normal file
File diff suppressed because it is too large
Load Diff
12
tsconfig.app.json
Normal file
12
tsconfig.app.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"exclude": ["src/**/__tests__/*"],
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
11
tsconfig.json
Normal file
11
tsconfig.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
tsconfig.node.json
Normal file
18
tsconfig.node.json
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"extends": "@tsconfig/node22/tsconfig.json",
|
||||
"include": [
|
||||
"vite.config.*",
|
||||
"vitest.config.*",
|
||||
"cypress.config.*",
|
||||
"nightwatch.conf.*",
|
||||
"playwright.config.*"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"noEmit": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"types": ["node"]
|
||||
}
|
||||
}
|
||||
30
vite.config.ts
Normal file
30
vite.config.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
base: './',
|
||||
plugins: [
|
||||
vue(),
|
||||
vueDevTools(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
},
|
||||
},
|
||||
server: {
|
||||
open: true,
|
||||
proxy: {
|
||||
"/api/v1": {
|
||||
// target: "http://10.1.5.188:8011/",
|
||||
target: "http://127.0.0.1:8012",
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(/^\/api\/v1/, ''),
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user