个股中心列表对接，涨停分析词云和板块分布图实现
This commit is contained in:
renzhijun
@@ -255,7 +255,7 @@
|
||||
const res = await calendarCombinedData(param);
|
||||
if (res.success && Array.isArray(res.data)) {
|
||||
this.calendarApiData = res.data;
|
||||
console.log('日历数据加载成功', this.calendarApiData);
|
||||
//console.log('日历数据加载成功', this.calendarApiData);
|
||||
// 接口数据加载后，重新触发一次当前选中日期的事件，更新数据
|
||||
if (this.selectDateStr) {
|
||||
const [year, month, day] = this.selectDateStr.split('-').map(Number);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name" : "JiaZhiQianYan",
|
||||
"appid" : "__UNI__83518F0",
|
||||
"appid" : "__UNI__C546BDE",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
|
||||
27
node_modules/.package-lock.json
generated
vendored
27
node_modules/.package-lock.json
generated
vendored
@@ -40,6 +40,15 @@
|
||||
"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
|
||||
"integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
|
||||
},
|
||||
"node_modules/echarts": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
|
||||
"integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0",
|
||||
"zrender": "6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/fflate": {
|
||||
"version": "0.4.8",
|
||||
"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
|
||||
@@ -98,6 +107,11 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
|
||||
},
|
||||
"node_modules/web-vitals": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz",
|
||||
@@ -116,6 +130,19 @@
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/wordcloud": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/wordcloud/-/wordcloud-1.2.3.tgz",
|
||||
"integrity": "sha512-9by77b7Sd9e1K75kSmVeAD+JnGpiLR1Z4EX1mYQL91jKrU1/4bHw4h4DExQ+dzfT+PvihDcH7OS7V4Y5UkbF2w=="
|
||||
},
|
||||
"node_modules/zrender": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
|
||||
"integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
31
package-lock.json
generated
31
package-lock.json
generated
@@ -9,7 +9,9 @@
|
||||
"version": "1.2.4",
|
||||
"dependencies": {
|
||||
"crypto-js": "^4.2.0",
|
||||
"posthog-js": "^1.298.0"
|
||||
"echarts": "^6.0.0",
|
||||
"posthog-js": "^1.298.0",
|
||||
"wordcloud": "^1.2.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@posthog/core": {
|
||||
@@ -48,6 +50,15 @@
|
||||
"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
|
||||
"integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
|
||||
},
|
||||
"node_modules/echarts": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
|
||||
"integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0",
|
||||
"zrender": "6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/fflate": {
|
||||
"version": "0.4.8",
|
||||
"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
|
||||
@@ -106,6 +117,11 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
|
||||
},
|
||||
"node_modules/web-vitals": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz",
|
||||
@@ -124,6 +140,19 @@
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/wordcloud": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/wordcloud/-/wordcloud-1.2.3.tgz",
|
||||
"integrity": "sha512-9by77b7Sd9e1K75kSmVeAD+JnGpiLR1Z4EX1mYQL91jKrU1/4bHw4h4DExQ+dzfT+PvihDcH7OS7V4Y5UkbF2w=="
|
||||
},
|
||||
"node_modules/zrender": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
|
||||
"integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,6 +17,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"crypto-js": "^4.2.0",
|
||||
"posthog-js": "^1.298.0"
|
||||
"echarts": "^6.0.0",
|
||||
"posthog-js": "^1.298.0",
|
||||
"wordcloud": "^1.2.3"
|
||||
}
|
||||
}
|
||||
|
||||
12
pages.json
12
pages.json
@@ -162,6 +162,18 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "components/word-cloud/word-cloud",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "components/WordCloud/WordCloud",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
}
|
||||
],
|
||||
"subPackages": [
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
</view>
|
||||
|
||||
<view style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16rpx; margin: 0 20rpx;">
|
||||
<view @click="list2Index = index" v-for="(item,index) in topLists2" :key="index"
|
||||
<view @click="handleTypeClick(index)" v-for="(item,index) in topLists2" :key="index"
|
||||
style="border: 1rpx solid #D2D2D2; padding: 12rpx;"
|
||||
:style="{border: `1rpx solid ${list2Index == index ? '#F2C369' : '#D2D2D2'}`}">
|
||||
<view style="font-size: 24rpx; color: #070707; font-weight: bold; text-align: center;"
|
||||
@@ -45,14 +45,14 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- '股票名称', '涨跌幅', '市值', '成交额', '行业' 的 内容 -->
|
||||
<view v-for="(obj, j) in 10"
|
||||
<view v-for="(obj, j) in filteredData" @click="itemDetails(obj)"
|
||||
style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 10rpx; min-height: 60rpx; margin: 0 20rpx;"
|
||||
:style="{'background-color': (j % 2 == 0 ? '#fff' : '#FAFAFC')}">
|
||||
<view v-for="(item,index) in ['云南白药', '+0.04%', '996.85 亿元', '4.44 亿元', '医药生物']" :key="index"
|
||||
<view v-for="(item,index) in getTableItem(obj)" :key="index"
|
||||
style="padding: 10rpx 0; color: #666666; font-size: 20rpx; font-weight: 500; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column;"
|
||||
:style="{color: (index == 0 ? '#222222' : index == 1 ? '#EC3440' : '#666666')}">
|
||||
<view>{{item}}</view>
|
||||
<view v-if="index == 0" style="color: #666666; font-size: 20rpx; font-weight: 500;">000768
|
||||
<view>{{item[0]}}</view>
|
||||
<view v-if="index == 0" style="color: #666666; font-size: 20rpx; font-weight: 500;">{{item[1]}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -234,6 +234,8 @@ import { conceptsDailyTop,marketHeatmap,marketStatistics,marketHotspotOverview }
|
||||
return {
|
||||
navH: inject('navHeight'),
|
||||
contentTop: '',
|
||||
allStockData:[],
|
||||
filteredData:[],
|
||||
topLists: [{
|
||||
title: '大盘涨跌幅',
|
||||
value: '+0.31%',
|
||||
@@ -310,12 +312,31 @@ import { conceptsDailyTop,marketHeatmap,marketStatistics,marketHotspotOverview }
|
||||
onLoad(e) {
|
||||
this.activeIndex = e.index
|
||||
this.contentTop = this.navH + (20 + 70 + 25) / 750 * inject('windowWidth')
|
||||
this.conceptsDailyTop()
|
||||
//this.conceptsDailyTop()
|
||||
this.marketHeatmap()
|
||||
this.marketStatistics()
|
||||
this.marketHotspotOverview()
|
||||
//this.marketStatistics()
|
||||
//this.marketHotspotOverview()
|
||||
},
|
||||
methods: {
|
||||
handleTypeClick(index) {
|
||||
this.list2Index = index;
|
||||
// 先请求数据，再筛选
|
||||
this.marketHeatmap();
|
||||
},
|
||||
getTableItem(obj) {
|
||||
// 先处理空值，避免 toFixed 调用时报错
|
||||
const marketCap = obj.market_cap ? obj.market_cap.toFixed(2) : '0.00';
|
||||
const amount = obj.amount ? obj.amount.toFixed(2) : '0.00';
|
||||
const changePercent = obj.change_percent ? obj.change_percent : 0;
|
||||
|
||||
return [
|
||||
[obj.stock_name, obj.stock_code],
|
||||
[`${changePercent}%`], // 使用模板字符串更规范
|
||||
[`${marketCap}亿元`],
|
||||
[`${amount}亿元`],
|
||||
[obj.industry || '暂无'] // 处理行业为空的情况
|
||||
];
|
||||
},
|
||||
conceptsDailyTop(){
|
||||
conceptsDailyTop().then(res=>{
|
||||
|
||||
@@ -324,12 +345,40 @@ import { conceptsDailyTop,marketHeatmap,marketStatistics,marketHotspotOverview }
|
||||
})
|
||||
},
|
||||
marketHeatmap(){
|
||||
marketHeatmap().then(res=>{
|
||||
let param = {
|
||||
limit: 500
|
||||
}
|
||||
marketHeatmap(param).then(res=>{
|
||||
// 存储原始数据
|
||||
this.allStockData = res.data || [];
|
||||
// 调用筛选方法
|
||||
this.filterStockByMarketCap();
|
||||
|
||||
}).catch(error=>{
|
||||
|
||||
})
|
||||
},
|
||||
// 根据市值区间筛选数据
|
||||
filterStockByMarketCap() {
|
||||
const { list2Index, allStockData } = this;
|
||||
let filtered = [];
|
||||
|
||||
switch (list2Index) {
|
||||
case 0: // 超大盘股（>1000亿）
|
||||
filtered = allStockData.filter(item => item.market_cap > 1000);
|
||||
break;
|
||||
case 1: // 大盘股（500-1000亿）
|
||||
filtered = allStockData.filter(item => item.market_cap >= 500 && item.market_cap <= 1000);
|
||||
break;
|
||||
case 2: // 中盘股（100-500亿）
|
||||
filtered = allStockData.filter(item => item.market_cap >= 100 && item.market_cap <= 500);
|
||||
break;
|
||||
default:
|
||||
filtered = allStockData;
|
||||
}
|
||||
|
||||
this.filteredData = filtered;
|
||||
},
|
||||
marketStatistics(){
|
||||
marketStatistics().then(res=>{
|
||||
|
||||
@@ -344,6 +393,11 @@ import { conceptsDailyTop,marketHeatmap,marketStatistics,marketHotspotOverview }
|
||||
|
||||
})
|
||||
},
|
||||
itemDetails(item){
|
||||
uni.navigateTo({
|
||||
url: '/pagesStock/stockCenterDetails/stockCenterDetails?code='+item.stock_code
|
||||
})
|
||||
},
|
||||
moreAction() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/geGuCenter/detail'
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
|
||||
|
||||
<view style="margin: 25rpx;">
|
||||
<LCCalendar @date-change="handleDateChange"></LCCalendar>
|
||||
<LCCalendar @date-change="handleDateChange"></LCCalendar>
|
||||
</view>
|
||||
|
||||
|
||||
@@ -94,17 +94,36 @@
|
||||
|
||||
<view
|
||||
style="margin: 25rpx; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20rpx; color: #999999; font-size: 22rpx; font-weight: 500;">
|
||||
<view v-for="(item, index) in bkTypes"
|
||||
<!-- <view v-for="(item, index) in bkTypes"
|
||||
style="display: flex; align-items: center; justify-content: center; padding: 10rpx 20rpx;"
|
||||
:style="{color: (index == 0 ? '#BB8520' : '#999999'), border: `1rpx solid ${index == 0 ? '#F2C369' : '#D2D2D2'}`, 'background-color' : (index == 0 ? '#FFFAF1' : '#FFF')}">
|
||||
{{item}}
|
||||
</view> -->
|
||||
<view v-for="(item, index) in bkTypes" @click="switchTab(index)"
|
||||
style="display: flex; align-items: center; justify-content: center; padding: 10rpx 20rpx; border-radius: 8rpx;"
|
||||
:style="{
|
||||
color: (activeType == index ? '#BB8520' : '#999999'),
|
||||
border: `1rpx solid ${activeType == index ? '#F2C369' : '#D2D2D2'}`,
|
||||
'background-color' : (activeType == index ? '#FFFAF1' : '#FFF'),
|
||||
'cursor': 'pointer'
|
||||
}">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
style="height: 400rpx; display: flex; align-items: center; justify-content: center; background-color: blue;">
|
||||
<l-echart ref="chartRef"></l-echart>
|
||||
</view>
|
||||
<view style=" display: flex; align-items: center; justify-content: center;padding: 0 25rpx; ">
|
||||
<!-- <view v-if="activeType === 0"
|
||||
style="width: 100%; height: 500rpx; display: flex; align-items: center; justify-content: center; color: #999;">
|
||||
板块关联图内容区域
|
||||
</view> -->
|
||||
<view v-show="activeType === 0" style="width: 100%; height: 500rpx;">
|
||||
<l-echart ref="graphChartRef"></l-echart>
|
||||
</view>
|
||||
<view v-show="activeType === 1" style="width: 100%; height: 500rpx;">
|
||||
<l-echart ref="chartRef"></l-echart>
|
||||
</view>
|
||||
<WordCloud v-show="activeType === 2" :wordData="wordData" :width="330" :height="330" />
|
||||
</view>
|
||||
|
||||
|
||||
<view style="color: #2B2B2B; font-weight: 500; display: flex; margin: 25rpx 20rpx;">
|
||||
@@ -162,17 +181,121 @@
|
||||
import {
|
||||
inject
|
||||
} from 'vue'
|
||||
import { calendarCombinedData,analyseHighStocks } from '@/request/api'
|
||||
import {
|
||||
calendarCombinedData,
|
||||
analyseHighStocks
|
||||
} from '@/request/api'
|
||||
const echarts = require('../../uni_modules/lime-echart/static/echarts.min.js');
|
||||
import WordCloud from '@/components/WordCloud/WordCloud.vue';
|
||||
|
||||
|
||||
// 模拟关系图数据（替代接口请求的les-miserables.json）
|
||||
const mockGraphData = {
|
||||
categories: [{
|
||||
name: '板块'
|
||||
},
|
||||
{
|
||||
name: '概念'
|
||||
},
|
||||
{
|
||||
name: '个股'
|
||||
}
|
||||
],
|
||||
nodes: [{
|
||||
name: '科技板块',
|
||||
symbolSize: 50,
|
||||
category: 0
|
||||
},
|
||||
{
|
||||
name: '人工智能',
|
||||
symbolSize: 30,
|
||||
category: 1
|
||||
},
|
||||
{
|
||||
name: '大数据',
|
||||
symbolSize: 25,
|
||||
category: 1
|
||||
},
|
||||
{
|
||||
name: '科大讯飞',
|
||||
symbolSize: 20,
|
||||
category: 2
|
||||
},
|
||||
{
|
||||
name: '百度',
|
||||
symbolSize: 20,
|
||||
category: 2
|
||||
},
|
||||
{
|
||||
name: '金融板块',
|
||||
symbolSize: 50,
|
||||
category: 0
|
||||
},
|
||||
{
|
||||
name: '数字货币',
|
||||
symbolSize: 30,
|
||||
category: 1
|
||||
},
|
||||
{
|
||||
name: '招商银行',
|
||||
symbolSize: 20,
|
||||
category: 2
|
||||
},
|
||||
{
|
||||
name: '平安银行',
|
||||
symbolSize: 20,
|
||||
category: 2
|
||||
}
|
||||
],
|
||||
links: [{
|
||||
source: '科技板块',
|
||||
target: '人工智能',
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
source: '科技板块',
|
||||
target: '大数据',
|
||||
value: 8
|
||||
},
|
||||
{
|
||||
source: '人工智能',
|
||||
target: '科大讯飞',
|
||||
value: 6
|
||||
},
|
||||
{
|
||||
source: '人工智能',
|
||||
target: '百度',
|
||||
value: 6
|
||||
},
|
||||
{
|
||||
source: '金融板块',
|
||||
target: '数字货币',
|
||||
value: 9
|
||||
},
|
||||
{
|
||||
source: '数字货币',
|
||||
target: '招商银行',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
source: '数字货币',
|
||||
target: '平安银行',
|
||||
value: 5
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
WordCloud
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
navH: inject('navHeight'),
|
||||
contentTop: '',
|
||||
selectedYearMonth: '', // 年-月（去掉日）
|
||||
selectedFullDate: '', // 年-月-日
|
||||
selectedItem: null , // 选中的item完整数据
|
||||
selectedYearMonth: '', // 年-月（去掉日）
|
||||
selectedFullDate: '', // 年-月-日
|
||||
selectedItem: null, // 选中的item完整数据
|
||||
tabTypes: [{
|
||||
data: '',
|
||||
change: 0,
|
||||
@@ -189,6 +312,7 @@ import { calendarCombinedData,analyseHighStocks } from '@/request/api'
|
||||
title: '炸板率'
|
||||
}
|
||||
],
|
||||
wordData: [],
|
||||
bkList: [{
|
||||
title: '存储芯片',
|
||||
count: 8
|
||||
@@ -258,71 +382,127 @@ import { calendarCombinedData,analyseHighStocks } from '@/request/api'
|
||||
'板块分布',
|
||||
'热门概念词云'
|
||||
],
|
||||
option2:{
|
||||
title: {
|
||||
show:false
|
||||
activeType: 0, // 默认选中第一个标签
|
||||
// 饼图配置项
|
||||
pieOption: {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
animation:false,
|
||||
legend: {
|
||||
show:false
|
||||
top: '5%',
|
||||
left: 'center',
|
||||
show:false
|
||||
},
|
||||
tooltip:{
|
||||
show:true,
|
||||
triggerOn:'mousemove'
|
||||
},
|
||||
radar: {
|
||||
indicator: [
|
||||
{ name: '市场地位', max: 100 },
|
||||
{ name: '技术实力', max: 100 },
|
||||
{ name: '品牌价值', max: 100 },
|
||||
{ name: '运营效率', max: 100 },
|
||||
{ name: '财务健康', max: 100 },
|
||||
{ name: '创新能力', max: 100 },
|
||||
{ name: '风险控制', max: 100 },
|
||||
{ name: '成长潜力', max: 100 }
|
||||
],
|
||||
shape: 'polygon',
|
||||
splitNumber: 5,
|
||||
axisName: {
|
||||
color: '#54555A'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: ['#CFD2D7']
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
areaStyle:{
|
||||
color:['#F4F6FA','white']
|
||||
|
||||
series: [{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
padAngle: 2,
|
||||
itemStyle: {
|
||||
borderRadius: 8
|
||||
},
|
||||
// label: {
|
||||
// show: false,
|
||||
// position: 'center'
|
||||
// },
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 10,
|
||||
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#CFD2D7'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Beijing',
|
||||
type: 'radar',
|
||||
lineStyle: {
|
||||
width:1
|
||||
},
|
||||
labelLine: {
|
||||
length:1,
|
||||
length2:5,
|
||||
|
||||
},
|
||||
data: [{
|
||||
value: 10,
|
||||
name: '科技板块'
|
||||
},
|
||||
data: [],
|
||||
symbol: 'circle',
|
||||
symbolSize: 4,
|
||||
label:{
|
||||
show:true
|
||||
{
|
||||
value: 8,
|
||||
name: '人脑工程'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#5070DD'
|
||||
{
|
||||
value: 9,
|
||||
name: '商业航天'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1
|
||||
}
|
||||
},
|
||||
]
|
||||
{
|
||||
value: 10,
|
||||
name: '人工智能'
|
||||
},
|
||||
{
|
||||
value: 9,
|
||||
name: '芯片'
|
||||
},
|
||||
{
|
||||
value: 7,
|
||||
name: '算力网'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
name: '智能机器'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
name: '资产注入'
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
name: '智能医疗'
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
name: '国防军工'
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
name: '康复医疗'
|
||||
},
|
||||
{
|
||||
value: 20,
|
||||
name: '创新药'
|
||||
},
|
||||
]
|
||||
}]
|
||||
},
|
||||
// 关系图配置项
|
||||
graphOption: {
|
||||
tooltip: {},
|
||||
legend: [],
|
||||
series: [{
|
||||
name: '板块关联',
|
||||
type: 'graph',
|
||||
layout: 'none',
|
||||
data: [],
|
||||
links: [],
|
||||
categories: [],
|
||||
roam: true, // 允许拖拽和缩放
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
formatter: '{b}'
|
||||
},
|
||||
labelLayout: {
|
||||
hideOverlap: true
|
||||
},
|
||||
scaleLimit: {
|
||||
min: 0.4,
|
||||
max: 2
|
||||
},
|
||||
lineStyle: {
|
||||
color: 'source',
|
||||
curveness: 0.3
|
||||
}
|
||||
}]
|
||||
},
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
@@ -331,53 +511,431 @@ import { calendarCombinedData,analyseHighStocks } from '@/request/api'
|
||||
this.contentTop = this.navH + 20 / 750 * inject('windowWidth')
|
||||
|
||||
this.analyseHighStocks()
|
||||
|
||||
|
||||
},
|
||||
|
||||
onReady() {
|
||||
// 页面就绪后，若默认选中的是板块分布，初始化饼图
|
||||
//if (this.activeType === 0) {
|
||||
this.initGraphChart(); // 初始化关系图
|
||||
//} else if (this.activeType === 1) {
|
||||
this.initPieChart(); // 初始化饼图
|
||||
//}
|
||||
},
|
||||
// mounted() {
|
||||
// // 初始化当天日期格式（防止日历组件事件未及时触发）
|
||||
// const today = new Date();
|
||||
// const month = today.getMonth() + 1;
|
||||
// const day = today.getDate();
|
||||
// this.tabTypes[0].data = `${month}月${day}日`;
|
||||
// this.tabTypes[1].data = '0'; // 默认涨停家数为0，后续会被日历数据覆盖
|
||||
// },
|
||||
methods: {
|
||||
handleDateChange(data) {
|
||||
console.log('从日历组件接收的参数：', data.item?.zt_count);
|
||||
// 赋值到父页面的变量中
|
||||
this.selectedYearMonth = data.yearMonth;
|
||||
this.selectedFullDate = data.fullDate;
|
||||
this.selectedItem = data.item;
|
||||
// 2. 格式化日期：年-月-日 → 月日（如 2026-01-14 → 1月14日）
|
||||
if (data.fullDate) {
|
||||
const [year, month, day] = data.fullDate.split('-').map(Number);
|
||||
this.tabTypes[0].data = `${month}月${day}日`;
|
||||
}
|
||||
// 切换标签
|
||||
async switchTab(index) {
|
||||
this.activeType = index;
|
||||
|
||||
// 3. 赋值涨停家数（优先取item中的zt_count，无数据则显示0）
|
||||
const ztCount = data.item?.zt_count ?? 0;
|
||||
this.tabTypes[1].data = ztCount.toString(); // 转为字符串保证格式统一
|
||||
|
||||
// this.analyseHighStocks()
|
||||
},
|
||||
analyseHighStocks(){
|
||||
const formatDate = this.selectedFullDate.replace(/-/g, '');
|
||||
let param = {
|
||||
date: formatDate
|
||||
}
|
||||
analyseHighStocks(param).then(res=>{
|
||||
switch (index) {
|
||||
case 0:
|
||||
this.$refs.graphChartRef && this.initGraphChart(); // 增加存在性判断
|
||||
break;
|
||||
case 1:
|
||||
this.$refs.chartRef && this.initPieChart(); // 增加存在性判断
|
||||
break;
|
||||
case 2:
|
||||
this.initWordCloud();
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 初始化关系图（增加容错）
|
||||
async initGraphChart() {
|
||||
|
||||
}).catch(error=>{
|
||||
const chart = await this.$refs.graphChartRef.init(echarts);
|
||||
this.graphOption.legend = [{
|
||||
data: mockGraphData.categories.map(a => a.name)
|
||||
}];
|
||||
this.graphOption.series[0].data = mockGraphData.nodes;
|
||||
this.graphOption.series[0].links = mockGraphData.links;
|
||||
this.graphOption.series[0].categories = mockGraphData.categories;
|
||||
chart.setOption(this.graphOption);
|
||||
|
||||
},
|
||||
// 初始化饼图（核心修复）
|
||||
async initPieChart() {
|
||||
|
||||
const Piechart = await this.$refs.chartRef.init(echarts);
|
||||
console.log("Piechart", Piechart);
|
||||
Piechart.setOption(this.pieOption);
|
||||
|
||||
},
|
||||
// 初始化词云
|
||||
initWordCloud() {
|
||||
this.wordData = [{
|
||||
name: "脑机",
|
||||
value: 10000
|
||||
},
|
||||
{
|
||||
name: "航天",
|
||||
value: 3428
|
||||
},
|
||||
{
|
||||
name: "商业",
|
||||
value: 1747
|
||||
},
|
||||
{
|
||||
name: "智能",
|
||||
value: 1692
|
||||
},
|
||||
{
|
||||
name: "量产",
|
||||
value: 1589
|
||||
},
|
||||
{
|
||||
name: "落地",
|
||||
value: 1555
|
||||
},
|
||||
{
|
||||
name: "存储芯片",
|
||||
value: 1487
|
||||
},
|
||||
{
|
||||
name: "医疗",
|
||||
value: 1348
|
||||
},
|
||||
{
|
||||
name: "马斯克",
|
||||
value: 1346
|
||||
},
|
||||
{
|
||||
name: "业绩",
|
||||
value: 1234
|
||||
},
|
||||
{
|
||||
name: "康复",
|
||||
value: 1143
|
||||
},
|
||||
{
|
||||
name: "机器人",
|
||||
value: 1127
|
||||
},
|
||||
{
|
||||
name: "洁净室",
|
||||
value: 1078
|
||||
},
|
||||
{
|
||||
name: "标的",
|
||||
value: 1072
|
||||
},
|
||||
{
|
||||
name: "设备",
|
||||
value: 1071
|
||||
},
|
||||
{
|
||||
name: "算力",
|
||||
value: 1015
|
||||
},
|
||||
{
|
||||
name: "材料",
|
||||
value: 983
|
||||
},
|
||||
{
|
||||
name: "卫星",
|
||||
value: 970
|
||||
},
|
||||
{
|
||||
name: "科技",
|
||||
value: 947
|
||||
},
|
||||
{
|
||||
name: "资产",
|
||||
value: 828
|
||||
},
|
||||
{
|
||||
name: "半导体",
|
||||
value: 774
|
||||
},
|
||||
{
|
||||
name: "重估",
|
||||
value: 750
|
||||
},
|
||||
{
|
||||
name: "人脑",
|
||||
value: 747
|
||||
},
|
||||
{
|
||||
name: "平台",
|
||||
value: 737
|
||||
},
|
||||
{
|
||||
name: "产业链",
|
||||
value: 726
|
||||
},
|
||||
{
|
||||
name: "赛道",
|
||||
value: 715
|
||||
},
|
||||
{
|
||||
name: "电池",
|
||||
value: 694
|
||||
},
|
||||
{
|
||||
name: "估值",
|
||||
value: 689
|
||||
},
|
||||
{
|
||||
name: "景气",
|
||||
value: 682
|
||||
},
|
||||
{
|
||||
name: "A股",
|
||||
value: 662
|
||||
},
|
||||
{
|
||||
name: "商业化",
|
||||
value: 643
|
||||
},
|
||||
{
|
||||
name: "固态",
|
||||
value: 642
|
||||
},
|
||||
{
|
||||
name: "工程",
|
||||
value: 642
|
||||
},
|
||||
{
|
||||
name: "军工",
|
||||
value: 642
|
||||
},
|
||||
{
|
||||
name: "芯片",
|
||||
value: 615
|
||||
},
|
||||
{
|
||||
name: "医疗器械",
|
||||
value: 606
|
||||
},
|
||||
{
|
||||
name: "供应链",
|
||||
value: 585
|
||||
},
|
||||
{
|
||||
name: "弹性",
|
||||
value: 573
|
||||
},
|
||||
{
|
||||
name: "蓝箭",
|
||||
value: 551
|
||||
},
|
||||
{
|
||||
name: "市值",
|
||||
value: 541
|
||||
},
|
||||
{
|
||||
name: "高端",
|
||||
value: 527
|
||||
},
|
||||
{
|
||||
name: "植入",
|
||||
value: 523
|
||||
},
|
||||
{
|
||||
name: "耗材",
|
||||
value: 523
|
||||
},
|
||||
{
|
||||
name: "逻辑",
|
||||
value: 519
|
||||
},
|
||||
{
|
||||
name: "数据",
|
||||
value: 512
|
||||
},
|
||||
{
|
||||
name: "服务器",
|
||||
value: 504
|
||||
},
|
||||
{
|
||||
name: "供应商",
|
||||
value: 503
|
||||
},
|
||||
{
|
||||
name: "电子",
|
||||
value: 483
|
||||
},
|
||||
{
|
||||
name: "芳纶",
|
||||
value: 458
|
||||
},
|
||||
{
|
||||
name: "传闻",
|
||||
value: 454
|
||||
},
|
||||
{
|
||||
name: "国产化",
|
||||
value: 453
|
||||
},
|
||||
{
|
||||
name: "营销",
|
||||
value: 452
|
||||
},
|
||||
{
|
||||
name: "涨价",
|
||||
value: 450
|
||||
},
|
||||
{
|
||||
name: "临床",
|
||||
value: 449
|
||||
},
|
||||
{
|
||||
name: "转型",
|
||||
value: 444
|
||||
},
|
||||
{
|
||||
name: "强脑",
|
||||
value: 441
|
||||
},
|
||||
{
|
||||
name: "储能",
|
||||
value: 441
|
||||
},
|
||||
{
|
||||
name: "智能家居",
|
||||
value: 438
|
||||
},
|
||||
{
|
||||
name: "场景",
|
||||
value: 435
|
||||
},
|
||||
{
|
||||
name: "港股",
|
||||
value: 423
|
||||
},
|
||||
{
|
||||
name: "柔性",
|
||||
value: 422
|
||||
},
|
||||
{
|
||||
name: "人形",
|
||||
value: 414
|
||||
},
|
||||
{
|
||||
name: "国产",
|
||||
value: 411
|
||||
},
|
||||
{
|
||||
name: "接口技术",
|
||||
value: 401
|
||||
},
|
||||
{
|
||||
name: "消费",
|
||||
value: 399
|
||||
},
|
||||
{
|
||||
name: "创板",
|
||||
value: 397
|
||||
},
|
||||
{
|
||||
name: "全球",
|
||||
value: 389
|
||||
},
|
||||
{
|
||||
name: "替代",
|
||||
value: 389
|
||||
},
|
||||
{
|
||||
name: "融资",
|
||||
value: 388
|
||||
},
|
||||
{
|
||||
name: "补贴",
|
||||
value: 369
|
||||
},
|
||||
{
|
||||
name: "管线",
|
||||
value: 368
|
||||
},
|
||||
{
|
||||
name: "电极",
|
||||
value: 367
|
||||
},
|
||||
{
|
||||
name: "模态",
|
||||
value: 364
|
||||
},
|
||||
{
|
||||
name: "国家",
|
||||
value: 361
|
||||
},
|
||||
{
|
||||
name: "盈利",
|
||||
value: 359
|
||||
},
|
||||
{
|
||||
name: "测试",
|
||||
value: 356
|
||||
},
|
||||
{
|
||||
name: "子公司",
|
||||
value: 354
|
||||
},
|
||||
{
|
||||
name: "实控",
|
||||
value: 353
|
||||
},
|
||||
{
|
||||
name: "八院",
|
||||
value: 353
|
||||
},
|
||||
{
|
||||
name: "价格",
|
||||
value: 352
|
||||
},
|
||||
{
|
||||
name: "旗下",
|
||||
value: 351
|
||||
},
|
||||
{
|
||||
name: "组件",
|
||||
value: 346
|
||||
},
|
||||
{
|
||||
name: "电解液",
|
||||
value: 342
|
||||
},
|
||||
{
|
||||
name: "中标",
|
||||
value: 340
|
||||
}
|
||||
];
|
||||
|
||||
//console.log('父页面设置词云数据:', JSON.stringify(this.wordData));
|
||||
},
|
||||
handleDateChange(data) {
|
||||
console.log('从日历组件接收的参数：', data.item?.zt_count);
|
||||
// 赋值到父页面的变量中
|
||||
this.selectedYearMonth = data.yearMonth;
|
||||
this.selectedFullDate = data.fullDate;
|
||||
this.selectedItem = data.item;
|
||||
// 2. 格式化日期：年-月-日 → 月日（如 2026-01-14 → 1月14日）
|
||||
if (data.fullDate) {
|
||||
const [year, month, day] = data.fullDate.split('-').map(Number);
|
||||
this.tabTypes[0].data = `${month}月${day}日`;
|
||||
}
|
||||
|
||||
// 3. 赋值涨停家数（优先取item中的zt_count，无数据则显示0）
|
||||
const ztCount = data.item?.zt_count ?? 0;
|
||||
this.tabTypes[1].data = ztCount.toString(); // 转为字符串保证格式统一
|
||||
|
||||
// this.analyseHighStocks()
|
||||
},
|
||||
analyseHighStocks() {
|
||||
const formatDate = this.selectedFullDate.replace(/-/g, '');
|
||||
let param = {
|
||||
date: formatDate
|
||||
}
|
||||
analyseHighStocks(param).then(res => {
|
||||
|
||||
}).catch(error => {
|
||||
|
||||
})
|
||||
},
|
||||
async init() {
|
||||
// chart 图表实例不能存在data里
|
||||
const chart = await this.$refs.chartRef.init(echarts);
|
||||
// chart.on('click',function (params) {
|
||||
// console.log(params)
|
||||
// })
|
||||
chart.setOption(this.option2)
|
||||
},
|
||||
|
||||
|
||||
|
||||
bkydAction(index) {
|
||||
uni.navigateTo({
|
||||
url: `/pagesStock/stockCenterDetails/bkydmx?index=${index}`
|
||||
|
||||
Reference in New Issue
Block a user