mirror of
https://github.com/ArvinLovegood/go-stock.git
synced 2025-07-19 00:00:09 +08:00
feat(frontend):为股票公告列表添加走势图和资金趋势图
- 在 StockNoticeList 组件中添加 KLineChart 和 MoneyTrend 组件 - 实现股票代码和名称的悬停显示功能- 添加资金趋势图和 K线图的渲染 - 优化股票代码显示格式
This commit is contained in:
parent
9d8af191c5
commit
0a2491d725
@ -4,6 +4,8 @@ import {GetStockList, StockNotice} from "../../wailsjs/go/main/App";
|
|||||||
import {BrowserOpenURL} from "../../wailsjs/runtime";
|
import {BrowserOpenURL} from "../../wailsjs/runtime";
|
||||||
import {RefreshCircleSharp} from "@vicons/ionicons5";
|
import {RefreshCircleSharp} from "@vicons/ionicons5";
|
||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
|
import KLineChart from "./KLineChart.vue";
|
||||||
|
import MoneyTrend from "./moneyTrend.vue";
|
||||||
|
|
||||||
|
|
||||||
const list = ref([])
|
const list = ref([])
|
||||||
@ -66,7 +68,19 @@ function getTypeColor(name){
|
|||||||
return "info"
|
return "info"
|
||||||
|
|
||||||
}
|
}
|
||||||
|
function getmMarketCode(market,code) {
|
||||||
|
if(market==="0"){
|
||||||
|
return "sz"+code
|
||||||
|
}else if(market==="1"){
|
||||||
|
return "sh"+code
|
||||||
|
}else if(market==="2"){
|
||||||
|
return "bj"+code
|
||||||
|
}else if(market==="3"){
|
||||||
|
return "hk"+code
|
||||||
|
}else{
|
||||||
|
return code
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -87,10 +101,20 @@ function getTypeColor(name){
|
|||||||
<n-tbody>
|
<n-tbody>
|
||||||
<n-tr v-for="item in list" :key="item.art_code">
|
<n-tr v-for="item in list" :key="item.art_code">
|
||||||
<n-td>
|
<n-td>
|
||||||
<n-tag type="info">{{item.codes[0].stock_code }}</n-tag>
|
<n-popover trigger="hover" placement="right">
|
||||||
|
<template #trigger>
|
||||||
|
<n-tag type="info" :bordered="false">{{item.codes[0].stock_code }}</n-tag>
|
||||||
|
</template>
|
||||||
|
<money-trend style="width: 800px" :code="getmMarketCode(item.codes[0].market_code,item.codes[0].stock_code)" :name="item.codes[0].short_name" :days="360" :dark-theme="true" :chart-height="500"></money-trend>
|
||||||
|
</n-popover>
|
||||||
</n-td>
|
</n-td>
|
||||||
<n-td>
|
<n-td>
|
||||||
<n-tag type="info">{{item.codes[0].short_name }}</n-tag>
|
<n-popover trigger="hover" placement="right">
|
||||||
|
<template #trigger>
|
||||||
|
<n-tag type="info" :bordered="false">{{item.codes[0].short_name }}</n-tag>
|
||||||
|
</template>
|
||||||
|
<k-line-chart style="width: 800px" :code="getmMarketCode(item.codes[0].market_code,item.codes[0].stock_code)" :chart-height="500" :name="item.codes[0].short_name" :k-days="20" :dark-theme="true"></k-line-chart>
|
||||||
|
</n-popover>
|
||||||
</n-td>
|
</n-td>
|
||||||
<n-td>
|
<n-td>
|
||||||
<n-a type="info" @click="openWin(item.art_code)"><n-text :type="getTypeColor(item.columns[0].column_name)"> {{item.title}}</n-text></n-a>
|
<n-a type="info" @click="openWin(item.art_code)"><n-text :type="getTypeColor(item.columns[0].column_name)"> {{item.title}}</n-text></n-a>
|
||||||
|
@ -72,6 +72,13 @@ const handleLine = (code, days) => {
|
|||||||
const upColor = '#ec0000';
|
const upColor = '#ec0000';
|
||||||
const downColor = '#00da3c';
|
const downColor = '#00da3c';
|
||||||
let option = {
|
let option = {
|
||||||
|
title: {
|
||||||
|
text: name,
|
||||||
|
left: '20px',
|
||||||
|
textStyle: {
|
||||||
|
color: darkTheme?'#ccc':'#456'
|
||||||
|
}
|
||||||
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user